From 2c992a09e6eb9af4cc84f14c6276a77a695824c3 Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Thu, 26 Mar 2026 10:22:46 +0200
Subject: [PATCH 01/18] feat(checkbox): changes from review + added card
 variant #222

---
 .claude/hooks/post-edit-test.sh               |  52 +++
 .claude/settings.json                         |  15 +
 .claude/skills/contributing/SKILL.md          |  69 +++
 .../contributing/references/a11y-review.md    |  78 ++++
 .../contributing/references/best-practices.md | 296 ++++++++++++
 .../contributing/references/new-component.md  |  68 +++
 .../contributing/references/refactoring.md    |  60 +++
 .../skills/contributing/references/stories.md | 135 ++++++
 .../skills/contributing/references/testing.md |  89 ++++
 .coderabbit.yaml                              |  44 ++
 CLAUDE.md                                     | 155 +++++++
 .../checkbox-card.component.scss              | 125 ++++++
 .../checkbox-card.component.spec.ts           |  60 +++
 .../checkbox-card/checkbox-card.component.ts  |  29 ++
 .../form/checkbox/checkbox.component.scss     |   6 +
 .../form/checkbox/checkbox.stories.ts         | 420 +++++++++++++++++-
 tedi/components/form/index.ts                 |   1 +
 17 files changed, 1693 insertions(+), 9 deletions(-)
 create mode 100755 .claude/hooks/post-edit-test.sh
 create mode 100644 .claude/settings.json
 create mode 100644 .claude/skills/contributing/SKILL.md
 create mode 100644 .claude/skills/contributing/references/a11y-review.md
 create mode 100644 .claude/skills/contributing/references/best-practices.md
 create mode 100644 .claude/skills/contributing/references/new-component.md
 create mode 100644 .claude/skills/contributing/references/refactoring.md
 create mode 100644 .claude/skills/contributing/references/stories.md
 create mode 100644 .claude/skills/contributing/references/testing.md
 create mode 100644 .coderabbit.yaml
 create mode 100644 CLAUDE.md
 create mode 100644 tedi/components/form/checkbox-card/checkbox-card.component.scss
 create mode 100644 tedi/components/form/checkbox-card/checkbox-card.component.spec.ts
 create mode 100644 tedi/components/form/checkbox-card/checkbox-card.component.ts

diff --git a/.claude/hooks/post-edit-test.sh b/.claude/hooks/post-edit-test.sh
new file mode 100755
index 000000000..e786d601d
--- /dev/null
+++ b/.claude/hooks/post-edit-test.sh
@@ -0,0 +1,52 @@
+#!/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 tedi/
+if [[ ! "$FILE" =~ ^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
+SPEC="${FILE%.*}.spec.${FILE##*.}"
+# Handle .component.ts -> .component.spec.ts
+if [[ "$FILE" =~ \.component\.ts$ ]]; then
+  SPEC="${FILE%.component.ts}.component.spec.ts"
+elif [[ "$FILE" =~ \.component\.html$ ]]; then
+  SPEC="${FILE%.component.html}.component.spec.ts"
+elif [[ "$FILE" =~ \.component\.scss$ ]]; then
+  SPEC="${FILE%.component.scss}.component.spec.ts"
+elif [[ "$FILE" =~ \.directive\.ts$ ]]; then
+  SPEC="${FILE%.directive.ts}.directive.spec.ts"
+elif [[ "$FILE" =~ \.service\.ts$ ]]; then
+  SPEC="${FILE%.service.ts}.service.spec.ts"
+fi
+
+# Run test if spec file exists
+if [[ -f "$SPEC" ]]; then
+  echo "Running: npx jest $SPEC"
+  npx jest "$SPEC" --no-coverage 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..2aa508efc
--- /dev/null
+++ b/.claude/skills/contributing/SKILL.md
@@ -0,0 +1,69 @@
+---
+name: contributing
+description: >
+  Guide for contributing to TEDI Design System Angular. 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 Angular Contributing
+
+You are a senior Angular 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 Angular 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 React (`../react/src/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-angular/references/components.md`:
+- **New component** → add entry to the appropriate section (TEDI-Ready or Community) with selector, key inputs/outputs, and a usage example.
+- **Removed component** → delete its entry.
+- **Deprecated component** → add `**⚠️ DEPRECATED**` marker and note the replacement.
+- **API change** (renamed input, new output, changed selector) → 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 6006)
+npm test               # Run all tests (Jest)
+npx jest path/to/file  # Run a single test file
+npm run lint           # Stylelint + ESLint with --fix
+npm run build          # Build library to dist/
+```
diff --git a/.claude/skills/contributing/references/a11y-review.md b/.claude/skills/contributing/references/a11y-review.md
new file mode 100644
index 000000000..93954eff3
--- /dev/null
+++ b/.claude/skills/contributing/references/a11y-review.md
@@ -0,0 +1,78 @@
+# WCAG Accessibility Review
+
+Target component: `$ARGUMENTS`
+
+## Audit Procedure
+
+### 1. Read the Component
+
+Read all files for the target component:
+- `.component.ts` — check host bindings, ARIA attributes set programmatically
+- `.component.html` — check template for roles, aria-* attributes, semantic HTML
+- `.component.scss` — check focus styles, contrast, reduced motion support
+- `.component.spec.ts` — 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 (not relying on browser default if custom styled)
+- [ ] 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
+
+### 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)
+
+### 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..705499173
--- /dev/null
+++ b/.claude/skills/contributing/references/best-practices.md
@@ -0,0 +1,296 @@
+# TEDI Angular Best Practices
+
+Read before writing any component code.
+
+## Component Architecture
+
+### Class Structure
+```typescript
+@Component({
+  selector: 'tedi-component-name',
+  standalone: true,
+  imports: [/* only what's needed */],
+  templateUrl: './component-name.component.html',
+  styleUrl: './component-name.component.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ComponentNameComponent {
+  // 1. Injected services (private, readonly)
+  // 2. Inputs (input(), model())
+  // 3. Outputs (output())
+  // 4. Internal signals (signal(), computed())
+  // 5. Lifecycle methods
+  // 6. Public methods
+  // 7. Private methods
+}
+```
+
+### Signal-Based Inputs
+Use Angular signals API exclusively — never use `@Input()` / `@Output()` decorators:
+```typescript
+readonly variant = input<ButtonVariant>('primary');
+readonly disabled = input<boolean>(false);
+readonly value = model<string>('');           // two-way binding
+readonly clicked = output<MouseEvent>();      // event emitter
+```
+
+### Form Controls (ControlValueAccessor)
+```typescript
+@Component({
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => MyControlComponent),
+    multi: true,
+  }],
+})
+export class MyControlComponent implements ControlValueAccessor {
+  readonly value = model<T>(defaultValue);
+  private onChange: (value: T) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  writeValue(value: T): void { this.value.set(value); }
+  registerOnChange(fn: (value: T) => void): void { this.onChange = fn; }
+  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
+  setDisabledState(isDisabled: boolean): void { /* handle */ }
+}
+```
+
+### Selector Conventions
+- **Element selectors** (`tedi-toggle`, `tedi-date-picker`, `tedi-modal`) — for wrapper components
+- **Attribute selectors** (`[tedi-button]`, `[tedi-checkbox]`) — for components that enhance native elements
+
+### Event Listener Cleanup
+- Use arrow function properties for event handlers: `handleKeydown = (e: KeyboardEvent) => {}`
+- Add listeners in constructor or ngOnInit, remove in ngOnDestroy with same reference
+- Check `isPlatformBrowser()` before any DOM access (modal, dropdown patterns)
+
+### Effects
+- Effects in constructor auto-clean up — no need for takeUntilDestroyed
+- Use effects for syncing derived state (e.g., selected date → input display value)
+
+## Naming Conventions
+
+| Item | Convention | Example |
+|------|-----------|---------|
+| Component selector | `tedi-kebab-case` | `tedi-date-picker` |
+| Attribute selector | `[tedi-kebab-case]` | `[tedi-button]` |
+| Component class | PascalCase + Component | `DatePickerComponent` |
+| Directive class | PascalCase + Directive | `HideAtDirective` |
+| File names | kebab-case | `date-picker.component.ts` |
+| CSS classes | BEM with `tedi-` prefix | `.tedi-button__icon--large` |
+| Enums/Types | PascalCase | `ButtonVariant` |
+
+## Styling
+
+### SCSS Rules
+- Use `tedi-` prefix for all class names (enforced by stylelint).
+- Follow BEM: `.tedi-block__element--modifier`
+- **Sub-components are separate BEM blocks** with a shared prefix: `tedi-modal-header`, `tedi-modal-content`, `tedi-modal-footer`. Angular components have their own templates and internal structure, making them blocks — not elements. Use `__` elements only for simple DOM nodes inside a single component's template (e.g., `tedi-modal-header__head`).
+- Max nesting depth: 4 levels.
+- Use design tokens from `@tedi-design-system/core` for colors, spacing, typography.
+- Never use hardcoded color values — always reference tokens.
+- Never use fallback values in CSS `var()` — write `var(--token-name)`, not `var(--token-name, fallback)`.
+- 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.
+- Use `ViewEncapsulation.None` — scope styles via BEM naming, not Angular encapsulation.
+
+### Style Targeting: Classes Over Element Selectors
+- **Always target CSS classes**, not Angular component element selectors.
+- Add a CSS class to the component's `host` binding and style that class instead.
+- Only style Angular element selectors directly when you cannot add a class to the host (e.g., third-party components like `cdk-dialog-container` where you don't control the host).
+
+**Correct** — sub-component with its own block class on host:
+```typescript
+// modal-header.component.ts
+@Component({
+  host: { class: "tedi-modal-header" },
+})
+```
+```scss
+.tedi-modal-header { padding: var(--token); }
+.tedi-modal-header__head { display: flex; }
+```
+
+**Avoid** — styling Angular element selector:
+```scss
+// Don't do this when you control the component
+tedi-modal-header { padding: var(--token); }
+```
+
+**Exception** — third-party element you can't add classes to:
+```scss
+// OK: cdk-dialog-container is from Angular CDK, we can't add classes to its host
+cdk-dialog-container { outline: none; }
+```
+
+### Example
+```scss
+.tedi-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tedi-spacing-2);
+
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &--primary {
+    background-color: var(--tedi-color-primary);
+  }
+}
+```
+
+## Testing Patterns
+
+### Basic Component Test
+```typescript
+describe('ComponentNameComponent', () => {
+  let fixture: ComponentFixture<ComponentNameComponent>;
+  let component: ComponentNameComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ComponentNameComponent],
+      providers: [
+        { provide: TediTranslationService, useClass: TranslationMock },
+        { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: 'et' },
+      ],
+    });
+    fixture = TestBed.createComponent(ComponentNameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+```
+
+### Testing Inputs
+```typescript
+fixture.componentRef.setInput('variant', 'secondary');
+fixture.detectChanges();
+```
+
+### Testing Form Controls
+Use a test host component:
+```typescript
+@Component({
+  standalone: true,
+  imports: [MyControlComponent, ReactiveFormsModule],
+  template: `<tedi-my-control [formControl]="control" />`
+})
+class TestHostComponent {
+  control = new FormControl<string>('');
+}
+```
+
+### Testing Keyboard Navigation
+```typescript
+const el = fixture.debugElement.query(By.css('.tedi-component'));
+el.triggerEventHandler('keydown', new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+fixture.detectChanges();
+```
+
+### Testing Accessibility
+- Verify ARIA attributes are set correctly.
+- Verify role attributes on interactive elements.
+- Verify focus moves correctly on keyboard events.
+- Verify `aria-live` regions update on state changes.
+
+### Required Providers
+- `TediTranslationService` → mock with `TranslationMock` class (translate returns key, track returns () => key)
+- `TEDI_TRANSLATION_DEFAULT_TOKEN` → provide `'et'` as value
+- `LiveAnnouncer` → mock when component uses screen reader announcements (e.g., number-field)
+- CDK Overlay → mock completely for overlay/toast service tests
+
+### Common Pitfalls
+- Services with static state (e.g., ToastService) need reset in `beforeEach`
+- Use `fixture.componentRef.setInput()` to set signal inputs, NOT direct property assignment
+- Use `fakeAsync`/`tick` for components with setTimeout or animations, clean up in `afterEach`
+- Import all child components in TestBed `imports` array
+
+## Storybook Stories
+
+### Structure
+```typescript
+export default {
+  title: 'TEDI-Ready/Components/Category/ComponentName',
+  component: ComponentNameComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ComponentNameComponent, /* dependencies */],
+    }),
+  ],
+  parameters: {
+    status: { type: ['partiallyTediReady'] }, // or 'existsInTediReady'
+  },
+  argTypes: {
+    inputName: {
+      description: 'What this input does',
+      control: { type: 'radio' },
+      options: ['option1', 'option2'],
+      table: {
+        category: 'inputs',
+        defaultValue: { summary: 'option1' },
+      },
+    },
+  },
+} as Meta<ComponentNameComponent>;
+
+export const Default: StoryObj<ComponentNameComponent> = {
+  args: { inputName: 'option1' },
+};
+
+export const WithReactiveForms: StoryObj<ComponentNameComponent> = {
+  render: () => ({
+    props: { control: new FormControl('') },
+    template: `<tedi-my-control [formControl]="control" />`,
+  }),
+};
+```
+
+### 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)
+- **Interactive examples** — form controls with reactive forms
+- Stories matching **all variants visible in Figma**
+
+## Barrel Exports
+
+### Component-level `index.ts`
+```typescript
+export { ComponentNameComponent } from './component-name.component';
+export { ComponentNameType } from './component-name.types'; // if applicable
+```
+
+### Register in Category `index.ts`
+Add the new component export to the parent category barrel file (e.g., `tedi/components/form/index.ts`).
+
+## Key File Locations
+
+### Services
+- Translation: `tedi/services/translation/translation.service.ts` (root-provided)
+- Theme: `tedi/services/theme/theme.service.ts` (root-provided)
+- Toast: `tedi/services/toast/toast.service.ts` (root-provided, has static state)
+- Breakpoint: `tedi/services/breakpoint/breakpoint.service.ts`
+
+### Configuration
+- App-level provider: `tedi/providers/tedi.provider.ts` → `provideTedi(config)`
+- Translation token: `tedi/tokens/translation.token.ts`
+- Theme token: `tedi/tokens/theme.token.ts`
+- Translations map: `tedi/services/translation/translations.ts` (et, en, ru)
+
+### Utilities
+- Date formatting: `tedi/utils/date.util.ts`
+- Cookie signal: `tedi/utils/cookies.util.ts`
+- DOM helpers: `tedi/utils/elements.util.ts`
+- UUID generation: `tedi/helpers/generate-uuid.ts`
+
+## Known Quirks
+- `toggle.component.ts` still uses old `@ViewChild` decorator — should be migrated to `viewChild()` signal
+- Translations support both simple strings and parameterized functions: `(key: string) => string`
+- Do NOT reference `community/` components as examples — they are community-contributed and not always reviewed
diff --git a/.claude/skills/contributing/references/new-component.md b/.claude/skills/contributing/references/new-component.md
new file mode 100644
index 000000000..49fe652d6
--- /dev/null
+++ b/.claude/skills/contributing/references/new-component.md
@@ -0,0 +1,68 @@
+# Create New TEDI 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 React (`../react/src/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 selector (`tedi-` prefix)
+- **Category** — which folder under `tedi/components/` it belongs to
+- **API design** — all inputs (with types and defaults), outputs, content projection slots
+- **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 (inputs, outputs, states, keyboard, a11y, form integration if applicable)
+- **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 `tedi/components/<category>/<component-name>/`:
+
+```
+component-name.component.ts
+component-name.component.html
+component-name.component.scss
+component-name.component.spec.ts
+component-name.stories.ts
+index.ts
+```
+
+## Step 4: Implement
+
+Follow all patterns from best-practices:
+- Standalone, OnPush, ViewEncapsulation.None
+- Signal-based inputs (`input()`, `model()`, `output()`)
+- BEM SCSS with `tedi-` prefix, using design tokens
+- ControlValueAccessor if it's a form control
+- Full WCAG compliance (roles, keyboard nav, focus, aria attributes)
+
+## Step 5: Export
+
+1. Create barrel export in `index.ts`
+2. Add export to the parent category `index.ts` (e.g., `tedi/components/form/index.ts`)
+
+## Step 6: Verify
+
+1. Run tests: `npx jest tedi/components/<category>/<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-angular/references/components.md` with the new component:
+1. Add an entry to the appropriate section (TEDI-Ready or Community) with selector, key inputs/outputs, 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..b09fbc881
--- /dev/null
+++ b/.claude/skills/contributing/references/refactoring.md
@@ -0,0 +1,60 @@
+# Safe Refactor TEDI Component
+
+Target: `$ARGUMENTS`
+
+## Step 1: Understand the Blast Radius
+
+1. Read the component being refactored — all files (`.ts`, `.html`, `.scss`, `.spec.ts`, `.stories.ts`).
+2. Find all consumers:
+   - Search for imports of the component across `tedi/` and `src/`.
+   - Search for the component selector in templates.
+   - Check barrel exports (`index.ts` files) that re-export it.
+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 inputs, outputs, selectors, or exported 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, template, styles
+2. **Public API** — inputs, outputs, selector (only if needed)
+3. **Barrel exports** — update `index.ts` files 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: `npx jest <component-path>`
+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 selector, inputs/outputs, removed or deprecated a component), update `skills/tedi-angular/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..3571a31b3
--- /dev/null
+++ b/.claude/skills/contributing/references/stories.md
@@ -0,0 +1,135 @@
+# Create TEDI Angular Storybook Stories
+
+Target component: `$ARGUMENTS`
+
+## Workflow
+
+### 1. Understand the Component
+
+1. Read the component's `.component.ts` to understand all inputs, outputs, types, and variants.
+2. Read the component's `.component.html` for content projection slots.
+3. **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.
+4. Check if TEDI React (`../react/src/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:
+  ```typescript
+  export const States: StoryObj<ComponentName> = {
+    render: () => ({
+      template: `
+        <div style="display: flex; gap: 1rem;">
+          <tedi-component>Default</tedi-component>
+          <tedi-component>Hover</tedi-component>
+          <tedi-component>Active</tedi-component>
+          <tedi-component>Focus</tedi-component>
+          <tedi-component [disabled]="true">Disabled</tedi-component>
+        </div>
+      `,
+    }),
+    parameters: {
+      pseudo: {
+        hover: 'tedi-component:nth-of-type(2)',
+        active: 'tedi-component:nth-of-type(3)',
+        focusVisible: 'tedi-component:nth-of-type(4)',
+      },
+    },
+  };
+  ```
+
+### 3. Determine the Story Category
+
+Find where the component lives under `tedi/components/` and map to the Storybook title:
+
+| Component path | Story title prefix |
+|---|---|
+| `tedi/components/form/` | `TEDI-Ready/Components/Form/` |
+| `tedi/components/buttons/` | `TEDI-Ready/Components/Buttons/` |
+| `tedi/components/overlay/` | `TEDI-Ready/Components/Overlay/` |
+| `tedi/components/navigation/` | `TEDI-Ready/Components/Navigation/` |
+| Other category | `TEDI-Ready/Components/<Category>/` |
+
+### 4. Create the Stories File
+
+Follow this structure:
+
+```typescript
+import { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { ComponentName } from './index';
+
+/**
+ * <a href="https://www.figma.com/design/..." target="_BLANK">Figma ↗</a>
+ */
+
+export default {
+  title: 'TEDI-Ready/Components/Category/ComponentName',
+  component: ComponentName,
+  decorators: [
+    moduleMetadata({
+      imports: [ComponentName, /* required dependencies */],
+    }),
+  ],
+  parameters: {
+    status: { type: ['partiallyTediReady'] },
+    design: { type: 'figma', url: 'https://www.figma.com/...' },
+  },
+  argTypes: {
+    // One entry per public input
+  },
+} as Meta<ComponentName>;
+```
+
+### 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)
+- [ ] Reactive forms example included if the component implements ControlValueAccessor
+- [ ] Figma link is in the meta `parameters.design` and in the JSDoc comment above `export default`
+
+### 6. argTypes Convention
+
+```typescript
+argTypes: {
+  inputName: {
+    description: 'Brief description of what this input controls',
+    control: { type: 'radio' },  // or 'select', 'boolean', 'text', 'number'
+    options: ['value1', 'value2'],
+    table: {
+      category: 'inputs',
+      type: { summary: 'TypeName' },
+      defaultValue: { summary: 'defaultValue' },
+    },
+  },
+}
+```
+
+### 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..b8e5b392c
--- /dev/null
+++ b/.claude/skills/contributing/references/testing.md
@@ -0,0 +1,89 @@
+# Test & Verify TEDI Component
+
+Target: `$ARGUMENTS`
+
+## Workflow
+
+### 1. Run Tests
+
+If a path was provided, run tests for that specific component:
+```
+npx jest $ARGUMENTS
+```
+
+If no path 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. Known Workarounds
+
+#### jsdom CSS `@layer` parse errors
+
+jsdom <22 does not support CSS `@layer` rules. Angular CDK overlay injects styles
+that use `@layer cdk-overlay { ... }`, which causes jsdom to emit
+`"Could not parse CSS stylesheet"` errors via its VirtualConsole.
+
+**Root cause**: jsdom's VirtualConsole forwards parse errors to `context.console.error`,
+which is jest's buffered console — not `globalThis.console`. Patching `console.error`
+in `setup-jest.ts` or test files has no effect because jest captures these at the
+environment level before any userland code runs.
+
+**Solution**: A custom jest environment (`jest-jsdom-env.ts`) extends
+`jest-preset-angular`'s environment and intercepts `context.console.error` in the
+constructor, filtering out the CSS parse errors before they reach jest's reporter.
+
+```ts
+// jest-jsdom-env.ts
+import JestEnvironment from "jest-preset-angular/environments/jest-jsdom-env";
+import type { JestEnvironmentConfig, EnvironmentContext } from "@jest/environment";
+
+export default class PatchedJsdomEnvironment extends JestEnvironment {
+  constructor(config: JestEnvironmentConfig, context: EnvironmentContext) {
+    const originalError = context.console.error.bind(context.console);
+    context.console.error = (...args: Parameters<typeof console.error>) => {
+      const first = args[0];
+      if (
+        first instanceof Error &&
+        first.message === "Could not parse CSS stylesheet"
+      ) {
+        return;
+      }
+      originalError(...args);
+    };
+    super(config, context);
+  }
+}
+```
+
+Referenced in `jest.config.ts` as `testEnvironment: "<rootDir>/jest-jsdom-env.ts"`.
+
+This will no longer be needed once jsdom is upgraded to 22+ (requires a newer
+`jest-environment-jsdom` or switching to a package like `jest-environment-jsdom-global`).
+
+### 6. 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..f5b31c60b
--- /dev/null
+++ b/.coderabbit.yaml
@@ -0,0 +1,44 @@
+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:
+        - `ViewEncapsulation.None` — intentional, not a security concern.
+        - 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..1275bacd4
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,155 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+TEDI Design System Angular component library (`@tedi-design-system/angular`). Angular 19 standalone component library published via ng-packagr, with Storybook for documentation.
+
+## Commands
+
+```bash
+npm start              # Start Storybook dev server (port 6006)
+npm test               # Run all tests (Jest)
+npm run test:watch     # Run tests in watch mode
+npx jest path/to/file  # Run a single test file
+npm run lint           # Stylelint (SCSS) + ESLint (TS/HTML) with --fix
+npm run build          # Build library to dist/
+```
+
+## Architecture
+
+### Directory Layout
+
+- `tedi/components/` — All UI components, organized by category (form, buttons, overlay, etc.)
+- `tedi/directives/` — Attribute/structural directives
+- `tedi/services/` — Services (translation, theme, breakpoint, toast)
+- `tedi/utils/` — Utility functions (date, cookies, elements)
+- `tedi/tokens/` — Injection tokens (theme, translation)
+- `tedi/providers/` — Angular providers
+- `community/` — Community-contributed components (separate entry point, NOT a reference for TEDI patterns)
+
+### Component File Convention
+
+Each component folder contains:
+```
+component-name.component.ts       # Component class
+component-name.component.html     # Template
+component-name.component.scss     # Styles
+component-name.component.spec.ts  # Tests
+component-name.stories.ts         # Storybook stories
+index.ts                           # Barrel export
+```
+
+### Component Patterns
+
+All components are:
+- **Standalone** (`standalone: true`)
+- **OnPush** change detection
+- **ViewEncapsulation.None** (styles not encapsulated)
+- Using **Angular signals** (`input()`, `model()`, `signal()`, `computed()`)
+- Selector prefix: `tedi-` (e.g., `tedi-button`, `tedi-date-picker`)
+
+Form controls implement `ControlValueAccessor` with `NG_VALUE_ACCESSOR` provider for reactive forms integration.
+
+### Export Chain
+
+`public-api.ts` → `tedi/index.ts` → category `index.ts` → component `index.ts`
+
+Path aliases:
+- `@tedi-design-system/angular/tedi` → `./tedi/index.ts`
+- `@tedi-design-system/angular/community` → `./community/index.ts`
+
+## Styling
+
+- BEM with `tedi-` prefix: `.tedi-component`, `.tedi-component__element`, `.tedi-component--modifier`
+- Sub-components that are their own Angular components are **separate BEM blocks** with a shared prefix: `tedi-modal-header`, `tedi-modal-footer` (not `tedi-modal__header`). Use `__` elements only for simple DOM nodes inside a single component's template (e.g., `tedi-modal-header__head`).
+- Stylelint enforces the `tedi-` prefix pattern on all class selectors
+- Design tokens come from `@tedi-design-system/core`
+- Max nesting depth: 4
+- **Target CSS classes, not Angular element selectors** — add classes to component hosts and style those. Only style element selectors directly for third-party components where you can't control the host (e.g., `cdk-dialog-container`).
+
+## Testing
+
+- Jest with `jest-preset-angular`, jsdom environment
+- Coverage thresholds: 80% on branches/functions/lines/statements
+- Test inputs via `fixture.componentRef.setInput('propName', value)`
+- Mock `TediTranslationService` in tests that use translated components
+- For form controls, use a test host component with `ReactiveFormsModule` and `FormControl`
+
+## Storybook
+
+- Stories at `tedi/**/*.stories.ts`
+- Title format: `"TEDI-Ready/Components/Category/ComponentName"`
+- Uses `moduleMetadata` decorator for imports
+- Status parameters: `partiallyTediReady`, `existsInTediReady`, `devComponent`, etc.
+- Compodoc integration enabled for auto-generated docs
+
+## Commits
+
+- Conventional commits enforced by commitlint
+- Must reference an issue (e.g., `feat(date-picker): add feature #258`)
+- Subject minimum 10 characters
+- Pre-commit hook runs lint-staged (stylelint + prettier)
+
+## Related Repositories
+
+- **TEDI React** (`../react/`) — React 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 `../react/` or `../core/` paths in build scripts, tests, or imports that run in CI.
+
+## Branches
+
+- `main` — production releases
+- `rc` — pre-releases (base branch for PRs)
+
+## Do NOT
+
+- Use `@Input()`, `@Output()`, or `@ViewChild()` decorators — use `input()`, `model()`, `output()`, `viewChild()` signal APIs
+- Use `ViewEncapsulation.Emulated` or `ShadowDom` — always `ViewEncapsulation.None`
+- 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)`
+- Use Angular encapsulation for style scoping — use BEM naming with `tedi-` prefix instead
+- Forget `multi: true` in `NG_VALUE_ACCESSOR` providers
+- Forget `forwardRef()` when a component references itself in its own providers
+- Add event listeners without removing them in `ngOnDestroy` — use arrow function properties for correct reference
+- Use regular methods for event handlers that need cleanup — use `handleX = (e: Event) => {}` property syntax
+- Forget to provide `TediTranslationService` mock and `TEDI_TRANSLATION_DEFAULT_TOKEN` in tests
+- Use `fakeAsync`/`tick` without cleaning up in `afterEach`
+- Use `community/` components as reference for coding patterns or style — they are community-contributed and not always reviewed
+- Style Angular element selectors directly (e.g., `tedi-modal-header { ... }`) — add a CSS class to the host and style the class instead. Exception: third-party elements you can't add classes to (e.g., `cdk-dialog-container`)
+
+## Common Test Setup
+
+Tests that use translated components need:
+```typescript
+class TranslationMock {
+  translate(key: string) { return key; }
+  track(key: string) { return () => key; }
+}
+
+// In TestBed providers:
+{ provide: TediTranslationService, useClass: TranslationMock },
+{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: 'et' },
+```
+
+Form control tests need a host component:
+```typescript
+@Component({
+  standalone: true,
+  imports: [MyComponent, ReactiveFormsModule],
+  template: `<tedi-my-component [formControl]="control" />`
+})
+class TestHostComponent {
+  control = new FormControl<ValueType>(defaultValue);
+}
+```
+
+## 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:
+- `ViewEncapsulation.None` — intentional, not a security concern.
+- Missing CSS `var()` fallback values — intentionally omitted.
diff --git a/tedi/components/form/checkbox-card/checkbox-card.component.scss b/tedi/components/form/checkbox-card/checkbox-card.component.scss
new file mode 100644
index 000000000..aaef41e07
--- /dev/null
+++ b/tedi/components/form/checkbox-card/checkbox-card.component.scss
@@ -0,0 +1,125 @@
+label[tedi-checkbox-card] {
+  --_card-bg: transparent;
+  --_card-text: inherit;
+  --_card-border: transparent;
+
+  display: inline-flex;
+  gap: var(--form-checkbox-radio-card-inner-spacing);
+  align-items: flex-start;
+  padding: var(--form-checkbox-radio-card-checkbox-padding-y) var(--form-checkbox-radio-card-checkbox-padding-x);
+  font-family: var(--family-default);
+  font-size: var(--body-regular-size);
+  line-height: var(--body-regular-line-height);
+  color: var(--_card-text);
+  cursor: pointer;
+  background-color: var(--_card-bg);
+  border: 1px solid var(--_card-border);
+  border-radius: var(--form-checkbox-radio-card-radius);
+
+  [tedi-text],
+  tedi-icon {
+    color: inherit;
+  }
+
+  input[tedi-checkbox],
+  tedi-icon {
+    flex-shrink: 0;
+    margin-top: calc(var(--form-checkbox-radio-card-checkbox-indicator-padding-y) - var(--form-checkbox-radio-card-checkbox-padding-y));
+  }
+
+  input[tedi-checkbox] {
+    &:not(:disabled):hover {
+      box-shadow: none;
+    }
+  }
+
+  &:has(input:focus-visible) {
+    outline: 2px solid var(--form-input-border-active);
+    outline-offset: 1px;
+
+    input[tedi-checkbox]:focus-visible {
+      outline: none;
+    }
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+  }
+
+  &.tedi-checkbox-card--primary {
+    --_card-bg: var(--form-checkbox-radio-card-primary-default-background);
+    --_card-text: var(--form-checkbox-radio-card-primary-default-text);
+    --_card-border: var(--form-checkbox-radio-card-primary-default-border-separate);
+
+    &:has(input:checked) {
+      --_card-bg: var(--form-checkbox-radio-card-primary-selected-background);
+      --_card-text: var(--form-checkbox-radio-card-primary-selected-text);
+      --_card-border: var(--form-checkbox-radio-card-primary-selected-border-separate);
+
+      input[tedi-checkbox]:not(:disabled) {
+        background-color: transparent;
+        border-color: var(--form-checkbox-radio-default-border-selected-inverted);
+      }
+    }
+
+    &:has(input:hover:not(:disabled)) {
+      --_card-bg: var(--form-checkbox-radio-card-primary-hover-background);
+      --_card-text: var(--form-checkbox-radio-card-primary-hover-text);
+      --_card-border: var(--form-checkbox-radio-card-primary-hover-border);
+    }
+
+    &:has(input:disabled:not(:checked)) {
+      --_card-bg: var(--form-checkbox-radio-card-primary-disabled-default-background);
+      --_card-text: var(--form-checkbox-radio-card-primary-disabled-default-text);
+      --_card-border: var(--form-checkbox-radio-card-primary-disabled-default-background);
+    }
+
+    &:has(input:disabled:checked) {
+      --_card-bg: var(--form-checkbox-radio-card-primary-disabled-selected-background);
+      --_card-text: var(--form-checkbox-radio-card-primary-disabled-selected-text);
+      --_card-border: var(--form-checkbox-radio-card-primary-disabled-selected-background);
+
+      input[tedi-checkbox] {
+        background-color: transparent;
+        border-color: var(--form-checkbox-radio-default-border-selected-inverted);
+      }
+    }
+  }
+
+  // Secondary variant
+  &.tedi-checkbox-card--secondary {
+    --_card-bg: var(--form-checkbox-radio-card-secondary-default-background);
+    --_card-text: var(--form-checkbox-radio-card-secondary-default-text);
+    --_card-border: var(--form-checkbox-radio-card-secondary-default-border);
+
+    &:has(input:checked) {
+      --_card-bg: var(--form-checkbox-radio-card-secondary-selected-background);
+      --_card-text: var(--form-checkbox-radio-card-secondary-selected-text);
+      --_card-border: var(--form-checkbox-radio-card-secondary-selected-border);
+
+      outline: 1px solid var(--_card-border);
+      outline-offset: -2px;
+    }
+
+    &:has(input:hover:not(:disabled)) {
+      --_card-bg: var(--form-checkbox-radio-card-secondary-hover-background);
+      --_card-text: var(--form-checkbox-radio-card-secondary-hover-text);
+      --_card-border: var(--form-checkbox-radio-card-secondary-hover-border);
+    }
+
+    &:has(input:disabled:not(:checked)) {
+      --_card-bg: var(--form-checkbox-radio-card-secondary-disabled-default-background);
+      --_card-text: var(--form-checkbox-radio-card-secondary-disabled-default-text);
+      --_card-border: var(--form-checkbox-radio-card-secondary-disabled-default-border);
+    }
+
+    &:has(input:disabled:checked) {
+      --_card-bg: var(--form-checkbox-radio-card-secondary-disabled-selected-background);
+      --_card-text: var(--form-checkbox-radio-card-secondary-disabled-selected-text);
+      --_card-border: var(--form-checkbox-radio-card-secondary-disabled-selected-border);
+
+      outline: 1px solid var(--_card-border);
+      outline-offset: -2px;
+    }
+  }
+}
diff --git a/tedi/components/form/checkbox-card/checkbox-card.component.spec.ts b/tedi/components/form/checkbox-card/checkbox-card.component.spec.ts
new file mode 100644
index 000000000..8dd7829a5
--- /dev/null
+++ b/tedi/components/form/checkbox-card/checkbox-card.component.spec.ts
@@ -0,0 +1,60 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import {
+  CheckboxCardComponent,
+  CheckboxCardVariant,
+} from "./checkbox-card.component";
+import { CheckboxComponent } from "../checkbox/checkbox.component";
+
+@Component({
+  standalone: true,
+  imports: [CheckboxCardComponent, CheckboxComponent],
+  template: `
+    <label tedi-checkbox-card [variant]="variant">
+      <input tedi-checkbox type="checkbox" />
+      Text
+    </label>
+  `,
+})
+class TestHostComponent {
+  variant: CheckboxCardVariant = "primary";
+}
+
+describe("CheckboxCardComponent", () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let labelElement: HTMLLabelElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    });
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    labelElement = fixture.nativeElement.querySelector("label");
+  });
+
+  it("should create component", () => {
+    expect(labelElement).toBeTruthy();
+    expect(labelElement.classList).toContain("tedi-checkbox-card");
+  });
+
+  it("should apply primary class by default", () => {
+    expect(labelElement.classList).toContain("tedi-checkbox-card--primary");
+    expect(labelElement.classList).not.toContain(
+      "tedi-checkbox-card--secondary"
+    );
+  });
+
+  it("should apply secondary class", () => {
+    fixture.componentInstance.variant = "secondary";
+    fixture.detectChanges();
+    expect(labelElement.classList).toContain("tedi-checkbox-card--secondary");
+    expect(labelElement.classList).not.toContain("tedi-checkbox-card--primary");
+  });
+
+  it("should contain a checkbox input", () => {
+    const input = labelElement.querySelector('input[type="checkbox"]');
+    expect(input).toBeTruthy();
+  });
+});
diff --git a/tedi/components/form/checkbox-card/checkbox-card.component.ts b/tedi/components/form/checkbox-card/checkbox-card.component.ts
new file mode 100644
index 000000000..077636779
--- /dev/null
+++ b/tedi/components/form/checkbox-card/checkbox-card.component.ts
@@ -0,0 +1,29 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+export type CheckboxCardVariant = "primary" | "secondary";
+
+@Component({
+  standalone: true,
+  selector: "label[tedi-checkbox-card]",
+  template: "<ng-content />",
+  styleUrl: "./checkbox-card.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "tedi-checkbox-card",
+    "[class.tedi-checkbox-card--primary]": "variant() === 'primary'",
+    "[class.tedi-checkbox-card--secondary]": "variant() === 'secondary'",
+  },
+})
+export class CheckboxCardComponent {
+  /**
+   * Visual variant of the card.
+   * @default primary
+   */
+  readonly variant = input<CheckboxCardVariant>("primary");
+}
diff --git a/tedi/components/form/checkbox/checkbox.component.scss b/tedi/components/form/checkbox/checkbox.component.scss
index 1b5f661e8..099c1ac07 100644
--- a/tedi/components/form/checkbox/checkbox.component.scss
+++ b/tedi/components/form/checkbox/checkbox.component.scss
@@ -24,6 +24,12 @@ input[tedi-checkbox][type="checkbox"] {
     box-shadow: 0 0 0 1px var(--form-checkbox-radio-default-border-hover);
   }
 
+  &:not(:disabled):active {
+    background-color: var(--form-checkbox-radio-default-background-active);
+    border-color: var(--form-checkbox-radio-default-border-active);
+    box-shadow: none;
+  }
+
   &:not(:checked):disabled {
     cursor: not-allowed;
     background-color: var(--form-general-background-disabled);
diff --git a/tedi/components/form/checkbox/checkbox.stories.ts b/tedi/components/form/checkbox/checkbox.stories.ts
index 49b570b55..4980f3190 100644
--- a/tedi/components/form/checkbox/checkbox.stories.ts
+++ b/tedi/components/form/checkbox/checkbox.stories.ts
@@ -5,7 +5,9 @@ import {
   StoryObj,
 } from "@storybook/angular";
 import { CheckboxComponent } from "./checkbox.component";
+import { CheckboxCardComponent } from "../checkbox-card/checkbox-card.component";
 import { RowComponent } from "../../helpers/grid/row/row.component";
+import { ColComponent } from "../../helpers/grid/col/col.component";
 import { TextComponent } from "../../base/text/text.component";
 import { LabelComponent } from "../label/label.component";
 import { IconComponent } from "../../base/icon/icon.component";
@@ -15,13 +17,12 @@ import { TooltipContentComponent } from "../../overlay/tooltip/tooltip-content/t
 import { InfoButtonComponent } from "../../buttons/info-button/info-button.component";
 import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
 
-
 type StoryCheckboxComponent = CheckboxComponent & {
   indeterminate: boolean;
 };
 
 /**
- * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.21.30?node-id=6149-138033&m=dev" target="_blank">Figma ↗</a><br />
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.41.64?node-id=4228-72936&m=dev" target="_blank">Figma ↗</a><br />
  * <a href="https://www.tedi.ee/1ee8444b7/p/796203-checkbox" target="_blank">Zeroheight ↗</a>
  */
 export default {
@@ -31,7 +32,9 @@ export default {
     moduleMetadata({
       imports: [
         CheckboxComponent,
+        CheckboxCardComponent,
         RowComponent,
+        ColComponent,
         TextComponent,
         LabelComponent,
         IconComponent,
@@ -82,7 +85,7 @@ export default {
     indeterminate: {
       control: "boolean",
       description:
-        "Renders a alternate checked state, with a slash, which is neither toggled on or off, interacting with the checkbox will dismiss the indeterminate state.",
+        "Renders an alternate checked state, with a slash, which is neither toggled on or off. Interacting with the checkbox will dismiss the indeterminate state.",
     },
   },
 } as Meta<StoryCheckboxComponent>;
@@ -103,6 +106,10 @@ export const Default: StoryObj<StoryCheckboxComponent & { disabled: boolean }> =
     }),
   };
 
+/**
+ * Default size is used on desktop, large size is applied automatically on mobile screen sizes.
+ * Use in tables where the checkbox has no text. **Otherwise, prefer using default size.**
+ */
 export const Size: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
@@ -305,7 +312,7 @@ export const Group: StoryObj<CheckboxComponent> = {
         </div>
         <div>
           <p tedi-text color="secondary">Label</p>
-          <div style="display: flex; align-items: center; gap: 12px;">
+          <tedi-row [cols]="1" [gapY]="1">
             <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
               <input tedi-checkbox type="checkbox" />
               Text
@@ -318,12 +325,12 @@ export const Group: StoryObj<CheckboxComponent> = {
               <input tedi-checkbox type="checkbox" />
               Text
             </label>
-          </div>
-          <tedi-feedback-text text="Hint text" />
+          </tedi-row>
+          <tedi-feedback-text text="Feedback text" type="error" />
         </div>
         <div>
           <p tedi-text color="secondary">Label</p>
-          <tedi-row [cols]="1" [gapY]="1">
+          <div style="display: flex; align-items: center; gap: 12px;">
             <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
               <input tedi-checkbox type="checkbox" />
               Text
@@ -336,8 +343,8 @@ export const Group: StoryObj<CheckboxComponent> = {
               <input tedi-checkbox type="checkbox" />
               Text
             </label>
-          </tedi-row>
-          <tedi-feedback-text text="Feedback text" type="error" />
+          </div>
+          <tedi-feedback-text text="Hint text" />
         </div>
         <div>
           <p tedi-text color="secondary">Label</p>
@@ -361,3 +368,398 @@ export const Group: StoryObj<CheckboxComponent> = {
     `,
   }),
 };
+
+/**
+ * All visual states of the checkbox component.
+ */
+export const States: StoryObj<CheckboxComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="2" [gapY]="3">
+        <div>Default</div>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-checkbox type="checkbox" />
+          Text
+        </label>
+
+        <div>Selected</div>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-checkbox type="checkbox" checked />
+          Text
+        </label>
+
+        <div>Error</div>
+        <div>
+          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+            <input tedi-checkbox type="checkbox" [invalid]="true" />
+            Text
+          </label>
+          <tedi-feedback-text text="Feedback text" type="error" />
+        </div>
+
+        <div>Disabled</div>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-checkbox type="checkbox" disabled />
+          Text
+        </label>
+
+        <div>Disabled selected</div>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-checkbox type="checkbox" checked disabled />
+          Text
+        </label>
+
+        <div>Indeterminate</div>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-checkbox type="checkbox" [indeterminate]="true" />
+          Text
+        </label>
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * Checkbox cards with primary and secondary variants. Primary uses a filled background when selected, secondary uses an outline border.
+ */
+export const CheckboxCards: StoryObj<CheckboxComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" checked />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              Text
+            </label>
+          </div>
+        </div>
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary</p>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" checked />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              Text
+            </label>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Checkbox cards with a description below the label text.
+ */
+export const CheckboxCardsWithDescription: StoryObj<CheckboxComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" checked />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </div>
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary</p>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" checked />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Checkbox cards with icons before the label text.
+ */
+/**
+ * All visual states of the checkbox card component for both primary and secondary variants.
+ */
+export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
+          <tedi-row [cols]="2" [gapY]="3">
+            <tedi-col>Default</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="primary">
+                <input tedi-checkbox type="checkbox" />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Hover</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="primary"
+                style="--_card-bg: var(--form-checkbox-radio-card-primary-hover-background); --_card-text: var(--form-checkbox-radio-card-primary-hover-text); --_card-border: var(--form-checkbox-radio-card-primary-hover-border);">
+                <input tedi-checkbox type="checkbox" />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Selected</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="primary">
+                <input tedi-checkbox type="checkbox" checked />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Focus</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="primary"
+                style="outline: 2px solid var(--form-input-border-active); outline-offset: 1px;">
+                <input tedi-checkbox type="checkbox" />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Disabled</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="primary">
+                <input tedi-checkbox type="checkbox" disabled />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Disabled selected</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="primary">
+                <input tedi-checkbox type="checkbox" checked disabled />
+                Text
+              </label>
+            </tedi-col>
+          </tedi-row>
+        </div>
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary</p>
+          <tedi-row [cols]="2" [gapY]="3">
+            <tedi-col>Default</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="secondary">
+                <input tedi-checkbox type="checkbox" />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Hover</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="secondary"
+                style="--_card-bg: var(--form-checkbox-radio-card-secondary-hover-background); --_card-text: var(--form-checkbox-radio-card-secondary-hover-text); --_card-border: var(--form-checkbox-radio-card-secondary-hover-border);">
+                <input tedi-checkbox type="checkbox" />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Selected</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="secondary">
+                <input tedi-checkbox type="checkbox" checked />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Focus</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="secondary"
+                style="outline: 2px solid var(--form-input-border-active); outline-offset: 1px;">
+                <input tedi-checkbox type="checkbox" />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Disabled</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="secondary">
+                <input tedi-checkbox type="checkbox" disabled />
+                Text
+              </label>
+            </tedi-col>
+
+            <tedi-col>Disabled selected</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="secondary">
+                <input tedi-checkbox type="checkbox" checked disabled />
+                Text
+              </label>
+            </tedi-col>
+          </tedi-row>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const CheckboxCardsWithIcons: StoryObj<CheckboxComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 24px;">
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="home" [size]="18" />
+              Text
+            </label>
+          </div>
+        </div>
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary</p>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="home" [size]="18" />
+              Text
+            </label>
+          </div>
+        </div>
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary with description</p>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="home" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </div>
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary with description</p>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="home" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
diff --git a/tedi/components/form/index.ts b/tedi/components/form/index.ts
index 644875c23..49eef9ab7 100644
--- a/tedi/components/form/index.ts
+++ b/tedi/components/form/index.ts
@@ -1,4 +1,5 @@
 export * from "./checkbox/checkbox.component";
+export * from "./checkbox-card/checkbox-card.component";
 export * from "./date-picker/date-picker.component";
 export * from "./feedback-text/feedback-text.component";
 export * from "./label/label.component";

From 529e14d9690ee2fb3ecb211d1e13a649fd983eb3 Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Thu, 26 Mar 2026 10:23:43 +0200
Subject: [PATCH 02/18] feat(checkbox): removed comments #222

---
 tedi/components/form/checkbox-card/checkbox-card.component.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tedi/components/form/checkbox-card/checkbox-card.component.scss b/tedi/components/form/checkbox-card/checkbox-card.component.scss
index aaef41e07..1c646efd7 100644
--- a/tedi/components/form/checkbox-card/checkbox-card.component.scss
+++ b/tedi/components/form/checkbox-card/checkbox-card.component.scss
@@ -86,7 +86,6 @@ label[tedi-checkbox-card] {
     }
   }
 
-  // Secondary variant
   &.tedi-checkbox-card--secondary {
     --_card-bg: var(--form-checkbox-radio-card-secondary-default-background);
     --_card-text: var(--form-checkbox-radio-card-secondary-default-text);

From 7b6806b2339c1a1aeed25c75c70798f28ee4d526 Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Thu, 26 Mar 2026 10:46:37 +0200
Subject: [PATCH 03/18] feat(checkbox): fixes from coderabbit review #222

---
 .claude/hooks/post-edit-test.sh               |   6 +-
 .../contributing/references/a11y-review.md    |   6 +-
 .../contributing/references/new-component.md  |   2 +-
 .../contributing/references/refactoring.md    |   2 +-
 .../skills/contributing/references/stories.md |   2 +-
 .../skills/contributing/references/testing.md |   6 +-
 CLAUDE.md                                     |   2 +-
 jest-jsdom-env.ts                             |  25 +
 jest.config.ts                                |   2 +-
 skills/tedi-angular/SKILL.md                  | 176 +++++
 skills/tedi-angular/references/components.md  | 714 ++++++++++++++++++
 skills/tedi-angular/references/forms.md       | 145 ++++
 skills/tedi-angular/references/theming.md     | 104 +++
 .../form/checkbox/checkbox.stories.ts         |   8 +-
 14 files changed, 1184 insertions(+), 16 deletions(-)
 create mode 100644 jest-jsdom-env.ts
 create mode 100644 skills/tedi-angular/SKILL.md
 create mode 100644 skills/tedi-angular/references/components.md
 create mode 100644 skills/tedi-angular/references/forms.md
 create mode 100644 skills/tedi-angular/references/theming.md

diff --git a/.claude/hooks/post-edit-test.sh b/.claude/hooks/post-edit-test.sh
index e786d601d..34dcfb044 100755
--- a/.claude/hooks/post-edit-test.sh
+++ b/.claude/hooks/post-edit-test.sh
@@ -46,7 +46,11 @@ fi
 # Run test if spec file exists
 if [[ -f "$SPEC" ]]; then
   echo "Running: npx jest $SPEC"
-  npx jest "$SPEC" --no-coverage 2>&1
+  if ! npx jest "$SPEC" --no-coverage 2>&1; then
+    echo "Auto-test failed (non-blocking)."
+  fi
 else
   echo "No spec file found at $SPEC — skipping auto-test."
 fi
+
+exit 0
diff --git a/.claude/skills/contributing/references/a11y-review.md b/.claude/skills/contributing/references/a11y-review.md
index 93954eff3..4f1816fbc 100644
--- a/.claude/skills/contributing/references/a11y-review.md
+++ b/.claude/skills/contributing/references/a11y-review.md
@@ -51,9 +51,9 @@ Check against WAI-ARIA Authoring Practices for the component pattern:
 
 ### 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)
+- [ ] Touch targets minimum 24x24 CSS pixels (WCAG 2.5.8 — AA), prefer 44x44 (WCAG 2.5.5 — AAA)
+- [ ] Adequate spacing between touch targets (WCAG 2.5.8 — AA)
+- [ ] No functionality dependent on hover alone — touch devices can't hover (WCAG 1.4.13 — AA)
 
 ### 7. Test Coverage
 
diff --git a/.claude/skills/contributing/references/new-component.md b/.claude/skills/contributing/references/new-component.md
index 49fe652d6..458e9c39e 100644
--- a/.claude/skills/contributing/references/new-component.md
+++ b/.claude/skills/contributing/references/new-component.md
@@ -31,7 +31,7 @@ If a new dependency is needed, stop and ask the user for permission.
 
 Create the following files in `tedi/components/<category>/<component-name>/`:
 
-```
+```text
 component-name.component.ts
 component-name.component.html
 component-name.component.scss
diff --git a/.claude/skills/contributing/references/refactoring.md b/.claude/skills/contributing/references/refactoring.md
index b09fbc881..edffdc6aa 100644
--- a/.claude/skills/contributing/references/refactoring.md
+++ b/.claude/skills/contributing/references/refactoring.md
@@ -14,7 +14,7 @@ Target: `$ARGUMENTS`
 ## Step 2: Baseline Tests
 
 Run the full test suite and record the result:
-```
+```bash
 npm test
 ```
 
diff --git a/.claude/skills/contributing/references/stories.md b/.claude/skills/contributing/references/stories.md
index 3571a31b3..0ba02f6a2 100644
--- a/.claude/skills/contributing/references/stories.md
+++ b/.claude/skills/contributing/references/stories.md
@@ -123,7 +123,7 @@ argTypes: {
 ### 7. Verify
 
 Run Storybook to visually confirm stories render correctly:
-```
+```bash
 npm start
 ```
 
diff --git a/.claude/skills/contributing/references/testing.md b/.claude/skills/contributing/references/testing.md
index b8e5b392c..fd1a97fbd 100644
--- a/.claude/skills/contributing/references/testing.md
+++ b/.claude/skills/contributing/references/testing.md
@@ -7,12 +7,12 @@ Target: `$ARGUMENTS`
 ### 1. Run Tests
 
 If a path was provided, run tests for that specific component:
-```
+```bash
 npx jest $ARGUMENTS
 ```
 
 If no path was provided, run the full test suite:
-```
+```bash
 npm test
 ```
 
@@ -26,7 +26,7 @@ If tests fail:
 
 ### 3. Run Lint
 
-```
+```bash
 npm run lint
 ```
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 1275bacd4..f589770e9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -32,7 +32,7 @@ npm run build          # Build library to dist/
 ### Component File Convention
 
 Each component folder contains:
-```
+```text
 component-name.component.ts       # Component class
 component-name.component.html     # Template
 component-name.component.scss     # Styles
diff --git a/jest-jsdom-env.ts b/jest-jsdom-env.ts
new file mode 100644
index 000000000..75bb564c7
--- /dev/null
+++ b/jest-jsdom-env.ts
@@ -0,0 +1,25 @@
+import JestEnvironment from "jest-preset-angular/environments/jest-jsdom-env";
+import type { JestEnvironmentConfig, EnvironmentContext } from "@jest/environment";
+
+/**
+ * Custom jest environment that suppresses jsdom "Could not parse CSS stylesheet"
+ * errors. These occur because jsdom <22 does not support CSS @layer rules used
+ * by Angular CDK overlay styles.
+ */
+export default class PatchedJsdomEnvironment extends JestEnvironment {
+  constructor(config: JestEnvironmentConfig, context: EnvironmentContext) {
+    const originalError = context.console.error.bind(context.console);
+    context.console.error = (...args: Parameters<typeof console.error>) => {
+      const first = args[0];
+      if (
+        first instanceof Error &&
+        first.message === "Could not parse CSS stylesheet"
+      ) {
+        return;
+      }
+      originalError(...args);
+    };
+
+    super(config, context);
+  }
+}
diff --git a/jest.config.ts b/jest.config.ts
index 80a5af5df..5ef6b469a 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -12,7 +12,7 @@ export default {
   testPathIgnorePatterns: ["/node_modules/", "/dist/"],
   moduleFileExtensions: ["ts", "html", "js", "json"],
   resolver: "jest-preset-angular/build/resolvers/ng-jest-resolver.js",
-  testEnvironment: "jsdom",
+  testEnvironment: "<rootDir>/jest-jsdom-env.ts",
   collectCoverage: true,
   collectCoverageFrom: ["./tedi/components/**/*.{js,ts,tsx}"],
   coveragePathIgnorePatterns: ["\\.stories\\.ts$"],
diff --git a/skills/tedi-angular/SKILL.md b/skills/tedi-angular/SKILL.md
new file mode 100644
index 000000000..8df325c23
--- /dev/null
+++ b/skills/tedi-angular/SKILL.md
@@ -0,0 +1,176 @@
+---
+name: tedi-angular
+description: >
+  Build UIs with @tedi-design-system/angular — 38+ accessible Angular components with design token
+  theming. Use when creating interfaces, integrating form controls, customizing themes, or working
+  with TEDI components in an Angular application.
+---
+
+# TEDI Design System — Angular
+
+Angular component library with 38+ accessible, standalone components. Built on Angular 19+ with signal-based APIs and design tokens from `@tedi-design-system/core`.
+
+## Installation
+
+```bash
+npm install @tedi-design-system/angular @tedi-design-system/core
+```
+
+### Peer Dependencies
+
+```
+@angular/core: ^19.0.0 || ^20.0.0 || ^21.0.0
+@angular/common: ^19.0.0 || ^20.0.0 || ^21.0.0
+@angular/forms: ^19.0.0 || ^20.0.0 || ^21.0.0
+@angular/cdk: ^19.0.0 || ^20.0.0 || ^21.0.0
+@angular/animations: ^19.0.0 || ^20.0.0 || ^21.0.0
+@angular/platform-browser: ^19.0.0 || ^20.0.0 || ^21.0.0
+ngx-float-ui: ^19.0.1 || ^20.0.0 || ^21.0.0
+```
+
+## Setup
+
+### 1. Provide TEDI configuration
+
+```typescript
+// app.config.ts
+import { provideTedi } from '@tedi-design-system/angular/tedi';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTedi({
+      language: 'et',   // 'et' | 'en' | 'ru'
+      theme: 'default', // 'default' | 'dark' | custom string
+    }),
+  ],
+};
+```
+
+### 2. Import core styles
+
+```scss
+// styles.scss
+@use '@tedi-design-system/core/scss' as tedi;
+```
+
+### 3. Use components
+
+All components are standalone — import them directly where needed:
+
+```typescript
+import { ButtonComponent } from '@tedi-design-system/angular/tedi';
+
+@Component({
+  standalone: true,
+  imports: [ButtonComponent],
+  template: `<button tedi-button variant="primary">Click me</button>`,
+})
+export class MyComponent {}
+```
+
+## Component Patterns
+
+### Standalone imports
+Every TEDI component is standalone. Import only what you use:
+
+```typescript
+import {
+  TextFieldComponent,
+  FormFieldComponent,
+  LabelComponent,
+} from '@tedi-design-system/angular/tedi';
+```
+
+### Attribute vs element selectors
+Some components use attribute selectors to enhance native elements:
+
+```html
+<!-- Attribute selector — enhances native <button> -->
+<button tedi-button variant="primary">Save</button>
+
+<!-- Attribute selector — enhances native <input> -->
+<input tedi-text-field />
+
+<!-- Element selector — wrapper component -->
+<tedi-modal [open]="isOpen">...</tedi-modal>
+<tedi-date-picker [formControl]="dateControl" />
+```
+
+### Signal-based inputs
+All component APIs use Angular signals (`input()`, `model()`, `output()`):
+
+```html
+<!-- One-way binding -->
+<button tedi-button [variant]="variant()" [size]="size()">Action</button>
+
+<!-- Two-way binding (model inputs) -->
+<tedi-date-picker [(selected)]="selectedDate" />
+<tedi-modal [(open)]="isModalOpen">...</tedi-modal>
+```
+
+## Forms
+
+TEDI form controls implement `ControlValueAccessor` for seamless reactive forms integration:
+
+```typescript
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TextFieldComponent, FormFieldComponent, LabelComponent } from '@tedi-design-system/angular/tedi';
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, TextFieldComponent, FormFieldComponent, LabelComponent],
+  template: `
+    <tedi-form-field>
+      <tedi-label>Email</tedi-label>
+      <input tedi-text-field [formControl]="email" type="email" />
+    </tedi-form-field>
+  `,
+})
+export class MyFormComponent {
+  email = new FormControl('');
+}
+```
+
+Form controls: `TextFieldComponent`, `NumberFieldComponent`, `CheckboxComponent`, `ToggleComponent`, `DatePickerComponent`, `DropdownComponent`.
+
+## Theming
+
+TEDI uses CSS custom properties (design tokens) from `@tedi-design-system/core`. Switch themes at runtime:
+
+```typescript
+import { ThemeService } from '@tedi-design-system/angular/tedi';
+
+export class MyComponent {
+  private themeService = inject(ThemeService);
+
+  toggleDark() {
+    this.themeService.theme.set('dark');
+  }
+}
+```
+
+Themes apply via CSS class on `<html>`: `tedi-theme--default`, `tedi-theme--dark`.
+
+## Translation
+
+Built-in support for Estonian, English, and Russian:
+
+```typescript
+import { TediTranslationService } from '@tedi-design-system/angular/tedi';
+
+export class MyComponent {
+  private translation = inject(TediTranslationService);
+
+  switchLanguage() {
+    this.translation.setLanguage('en');
+  }
+}
+```
+
+## Additional References
+
+Load based on your task — **do not load all at once**:
+
+- [references/components.md](references/components.md) — All components by category with selectors, inputs, and usage
+- [references/theming.md](references/theming.md) — Design tokens, SCSS customization, theme service
+- [references/forms.md](references/forms.md) — Form controls, validation, reactive forms patterns
diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
new file mode 100644
index 000000000..feb326c22
--- /dev/null
+++ b/skills/tedi-angular/references/components.md
@@ -0,0 +1,714 @@
+# 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/angular/tedi` — TEDI-Ready (preferred)
+- `@tedi-design-system/angular/community` — Community/extended
+
+---
+
+# TEDI-Ready Components
+
+All components are standalone (`standalone: true`), use `ChangeDetectionStrategy.OnPush`, and `ViewEncapsulation.None`. Import from `@tedi-design-system/angular/tedi`.
+
+## Base
+
+### Icon
+**Selector:** `tedi-icon`
+**Inputs:**
+- `name: string` — Material Icon name (required)
+- `size: IconSize = 24` — 8, 12, 16, 18, 24, 36, 48, or "inherit"
+- `color: IconColor = "primary"`
+- `background: IconBackgroundColor` — circular background color
+- `variant: IconVariant = "outlined"` — "filled" or "outlined"
+- `type: IconType = "outlined"` — Material Symbols style
+- `label: string` — accessible label
+
+### Text
+**Selector:** `[tedi-text]`
+**Inputs:**
+- `modifiers: TextModifiers[] | TextModifiers` — h1-h6, bold, italic, uppercase, etc.
+- `color: TextColor = "primary"`
+**Slots:** default
+
+## Buttons
+
+### Button
+**Selector:** `[tedi-button]`
+**Inputs:**
+- `variant: ButtonVariant = "primary"`
+- `size: ButtonSize = "default"` — "default" or "small"
+**Slots:** default
+
+```html
+<button tedi-button variant="primary">Click me</button>
+<button tedi-button variant="secondary" size="small">Small</button>
+```
+
+### ClosingButton
+**Selector:** `button[tedi-closing-button]`
+**Inputs:**
+- `size: ClosingButtonSize = "default"`
+- `iconSize: ClosingButtonIconSize = 24` — 18 or 24
+- `ariaLabel: string`
+
+### Collapse
+**Selector:** `tedi-collapse`
+**Inputs:**
+- `openText: string` — text when collapsed
+- `closeText: string` — text when expanded
+- `defaultOpen: boolean = false`
+- `hideCollapseText: boolean = false`
+- `arrowType: ArrowType = "default"`
+**Slots:** default
+
+### InfoButton
+**Selector:** `button[tedi-info-button]`
+**Inputs:**
+- `ariaLabel: string`
+
+## Cards
+
+### Accordion
+**Selector:** `tedi-accordion`
+**Inputs:**
+- `allowMultiple: boolean = false`
+**Slots:** default (AccordionItem children)
+
+### AccordionItem
+**Selector:** `tedi-accordion-item`
+**Inputs:**
+- `title: string = ""`
+- `titleLayout: "hug" | "fill" = "hug"`
+- `defaultExpanded: boolean = false`
+- `expandActionPosition: "start" | "end" = "end"`
+- `description: string`
+- `showIconCard: boolean = false`
+- `selected: boolean = false`
+- `headerClass: string | null`
+- `bodyClass: string | null`
+**Model:** `expanded: boolean`
+**Slots:** default, `[tedi-accordion-icon-card]`, `[tedi-accordion-start-action]`, `[tedi-accordion-end-action]`
+
+```html
+<tedi-accordion>
+  <tedi-accordion-item title="Section 1">Content 1</tedi-accordion-item>
+  <tedi-accordion-item title="Section 2">Content 2</tedi-accordion-item>
+</tedi-accordion>
+```
+
+## Content
+
+### Carousel
+**Selector:** `tedi-carousel`
+
+Composed of sub-components:
+
+```html
+<tedi-carousel>
+  <tedi-carousel-header>Title</tedi-carousel-header>
+  <tedi-carousel-content [slidesPerView]="{xs: 1, md: 3}" [gap]="{xs: 16}">
+    <div *tediCarouselSlide>Slide 1</div>
+    <div *tediCarouselSlide>Slide 2</div>
+  </tedi-carousel-content>
+  <tedi-carousel-footer>
+    <tedi-carousel-indicators />
+    <tedi-carousel-navigation />
+  </tedi-carousel-footer>
+</tedi-carousel>
+```
+
+### CarouselContent
+**Selector:** `tedi-carousel-content`
+**Inputs:**
+- `slidesPerView: BreakpointInput<number> = {xs: 1}`
+- `gap: BreakpointInput<number> = {xs: 16}`
+- `fade: boolean = false`
+- `transitionMs: number = 400`
+
+### CarouselIndicators
+**Selector:** `tedi-carousel-indicators`
+**Inputs:**
+- `withArrows: boolean = false`
+- `variant: CarouselIndicatorsVariant = "dots"` — "dots" or "numbers"
+
+### List
+**Selector:** `ul[tedi-list]` or `ol[tedi-list]`
+**Inputs:**
+- `styled: boolean = true`
+- `color: BulletColor = "brand"`
+**Slots:** default
+
+```html
+<ul tedi-list>
+  <li>Item 1</li>
+  <li>Item 2</li>
+</ul>
+```
+
+### TextGroup
+**Selector:** `tedi-text-group`
+**Inputs:**
+- `type: TextGroupType = "horizontal"` — "vertical" or "horizontal"
+- `labelWidth: string` — e.g., "200px", "30%"
+- Responsive: `xs, sm, md, lg, xl, xxl: TextGroupInputs`
+
+```html
+<tedi-text-group type="horizontal" labelWidth="200px">
+  <tedi-text-group-label>Name</tedi-text-group-label>
+  <tedi-text-group-value>John Doe</tedi-text-group-value>
+</tedi-text-group>
+```
+
+## Form
+
+### TextField
+**Selector:** `input[tedi-text-field]`
+**Model:** `value: string`
+**Inputs:**
+- `arrowsHidden: boolean = true`
+**Outputs:**
+- `clear: void`
+
+```html
+<input tedi-text-field [(value)]="name" />
+<input tedi-text-field [formControl]="nameControl" />
+```
+
+### NumberField
+**Selector:** `tedi-number-field`
+**Model:** `value: number`
+**Inputs:**
+- `inputId: string` (required)
+- `label: string`
+- `min: number`, `max: number`, `step: number = 1`
+- `size: NumberFieldSize = "default"`
+- `suffix: string` — unit text
+- `fullWidth: boolean = false`
+- `disabled: boolean = false`
+- `required: boolean = false`
+- `invalid: boolean = false`
+
+### Checkbox
+**Selector:** `input[type=checkbox][tedi-checkbox]`
+**Inputs:**
+- `size: CheckboxSize = "default"` — "default" or "large"
+- `invalid: boolean = false`
+
+```html
+<input type="checkbox" tedi-checkbox [formControl]="agreeControl" />
+```
+
+### Toggle
+**Selector:** `tedi-toggle`
+**Model:** `checked: boolean`
+**Inputs:**
+- `inputId: string` (required)
+- `variant: ToggleVariant = "primary"` — "primary" or "colored"
+- `type: ToggleType = "filled"` — "filled" or "outlined"
+- `size: ToggleSize = "default"` — "default" or "large"
+- `icon: boolean = false`
+- `disabled: boolean = false`
+- `required: boolean = false`
+
+### DatePicker
+**Selector:** `tedi-date-picker`
+**Model:** `selected: Date | null`, `month: Date`
+**Inputs:**
+- `disabled: DatePickerMatcher | null` — function `(date: Date) => boolean`
+- `monthMode: DatePickerSelectorMode = "dropdown"`
+- `yearMode: DatePickerSelectorMode = "dropdown"`
+- `allowManualInput: boolean = true`
+- `showWeekNumbers: boolean = false`
+- `closeOnSelect: boolean = true`
+- `inputState: "default" | "error" | "valid" = "default"`
+- `inputSize: "default" | "small" = "default"`
+- `inputDisabled: boolean = false`
+- `inputId: string`, `inputPlaceholder: string`
+
+```html
+<tedi-date-picker [formControl]="dateControl" [showWeekNumbers]="true" />
+```
+
+### FormField
+**Selector:** `tedi-form-field`
+**Inputs:**
+- `size: InputSize = "default"`
+- `icon: string | FormFieldIcon`
+- `clearable: boolean = false`
+- `inputClass: string | null`
+
+```html
+<tedi-form-field [clearable]="true" icon="search">
+  <tedi-label>Search</tedi-label>
+  <input tedi-text-field [formControl]="searchControl" />
+  <tedi-feedback-text type="hint" text="Type to search" />
+</tedi-form-field>
+```
+
+### Label
+**Selector:** `[tedi-label]`
+**Inputs:**
+- `size: LabelSize = "default"`
+- `required: boolean = false`
+- `color: LabelColor = "secondary"`
+
+### FeedbackText
+**Selector:** `tedi-feedback-text`
+**Inputs:**
+- `text: string` (required)
+- `type: FeedbackTextType = "hint"` — "hint", "valid", "error"
+- `position: FeedbackTextPosition = "left"`
+
+## Helpers
+
+### Row / Col (Grid)
+**Selectors:** `tedi-row`, `tedi-col`
+
+```html
+<tedi-row [cols]="3" gap="md">
+  <tedi-col [width]="2">Wide column</tedi-col>
+  <tedi-col [width]="1">Narrow column</tedi-col>
+</tedi-row>
+```
+
+**Row inputs:** `cols`, `minColWidth`, `justifyItems`, `alignItems`, `gap`, `gapX`, `gapY` + responsive breakpoints
+**Col inputs:** `width` (1-12), `justifySelf`, `alignSelf` + responsive breakpoints
+
+### Separator
+**Selector:** `tedi-separator`
+**Inputs:**
+- `axis: "horizontal" | "vertical" = "horizontal"`
+- `color: SeparatorColor = "primary"`
+- `variant: SeparatorVariant`
+- `thickness: number = 1`
+- `spacing: SeparatorSpacingValue | SeparatorSpacing`
+- `size: string = "100%"`
+
+### ScrollFade
+**Selector:** `tedi-scroll-fade`
+**Inputs:**
+- `fadeSize: ScrollFadeSize = 20` — gradient size in percent (0, 10, 20)
+- `fadePosition: ScrollFadePosition = "both"` — `"top"`, `"bottom"`, or `"both"`
+- `scrollBar: ScrollFadeScrollbar = "custom"` — `"default"` or `"custom"`
+**Outputs:**
+- `scrolledToTop: void`
+- `scrolledToBottom: void`
+
+```html
+<tedi-scroll-fade fadePosition="both" [fadeSize]="10">
+  <!-- Scrollable content -->
+</tedi-scroll-fade>
+```
+
+### Timeline
+**Selector:** `tedi-timeline`
+**Inputs:**
+- `activeIndex: number`
+
+```html
+<tedi-timeline [activeIndex]="1">
+  <tedi-timeline-item [timings]="['10:00']">
+    <tedi-timeline-title>Step 1</tedi-timeline-title>
+    <tedi-timeline-description>Description</tedi-timeline-description>
+  </tedi-timeline-item>
+</tedi-timeline>
+```
+
+## Layout
+
+### Header
+**Selector:** `header[tedi-header]`
+
+```html
+<header tedi-header>
+  <tedi-header-content>
+    <img src="logo.svg" alt="Logo" />
+  </tedi-header-content>
+  <tedi-header-actions>
+    <tedi-header-language [languages]="languages" (languageChange)="onLangChange($event)" />
+    <tedi-header-profile [name]="userName">
+      <tedi-header-role [role]="role" [representatives]="reps" [(currentRepresentative)]="currentRep" />
+      <tedi-header-logout />
+    </tedi-header-profile>
+  </tedi-header-actions>
+</header>
+```
+
+### SideNav
+**Selector:** `nav[tedi-sidenav]`
+**Inputs:**
+- `dividers: boolean = true`
+- `size: SideNavItemSize = "large"`
+- `collapsible: boolean = false`
+- `desktopBreakpoint: Breakpoint = "lg"`
+
+```html
+<nav tedi-sidenav [collapsible]="true">
+  <tedi-sidenav-item icon="home" route="/home" [selected]="true">Home</tedi-sidenav-item>
+  <tedi-sidenav-item icon="settings" route="/settings">Settings</tedi-sidenav-item>
+  <tedi-sidenav-dropdown>
+    <tedi-sidenav-item icon="folder">Documents</tedi-sidenav-item>
+    <tedi-sidenav-dropdown-group>
+      <tedi-sidenav-dropdown-item route="/docs/recent">Recent</tedi-sidenav-dropdown-item>
+      <tedi-sidenav-dropdown-item route="/docs/shared">Shared</tedi-sidenav-dropdown-item>
+    </tedi-sidenav-dropdown-group>
+  </tedi-sidenav-dropdown>
+</nav>
+```
+
+### Footer
+**Selector:** `tedi-footer`
+
+```html
+<tedi-footer>
+  <tedi-footer-body>
+    <tedi-footer-section icon="phone" heading="Contact">
+      <p>+372 123 4567</p>
+    </tedi-footer-section>
+  </tedi-footer-body>
+  <tedi-footer-bottom>
+    <tedi-footer-side position="center">© 2024</tedi-footer-side>
+  </tedi-footer-bottom>
+</tedi-footer>
+```
+
+## Loader
+
+### Spinner
+**Selector:** `tedi-spinner`
+**Inputs:**
+- `size: SpinnerSize = 16` — 10, 16, or 48
+- `color: SpinnerColor = "primary"`
+- `label: string` — screen reader label
+
+## Navigation
+
+### Link
+**Selector:** `[tedi-link]`
+**Inputs:**
+- `variant: LinkVariant = "default"`
+- `size: LinkSize = "default"`
+- `underline: boolean = true`
+- `target: string`
+- Responsive: `xs, sm, md, lg, xl, xxl: LinkInputs`
+**Slots:** default
+
+```html
+<a tedi-link href="/page" variant="default">Go to page</a>
+```
+
+## Notifications
+
+### Alert
+**Selector:** `tedi-alert`
+**Model:** `open: boolean = true`
+**Inputs:**
+- `title: string`
+- `type: AlertType = "info"`
+- `icon: string`
+- `showClose: boolean = false`
+- `role: AlertRole = "alert"`
+- `variant: AlertVariant = "default"`
+- `closeDelay: number = 0`
+**Outputs:**
+- `closeClick: void`
+**Slots:** default
+
+```html
+<tedi-alert type="success" title="Saved!" [showClose]="true">
+  Your changes have been saved.
+</tedi-alert>
+```
+
+### Toast (via ToastService)
+
+```typescript
+import { ToastService } from '@tedi-design-system/angular/tedi';
+
+export class MyComponent {
+  private toastService = inject(ToastService);
+
+  showToast() {
+    this.toastService.open({
+      title: 'Success',
+      type: 'success',
+      duration: 6000,
+    });
+  }
+}
+```
+
+Add `<tedi-toast-container />` to your root template.
+
+## Overlay
+
+### Modal (via ModalService)
+
+Open modals programmatically via `ModalService.open()`. Uses Angular CDK Dialog for overlay, backdrop, focus trapping, scroll blocking, and keyboard events.
+
+```typescript
+import { ModalService, ModalRef, MODAL_DATA } from '@tedi-design-system/angular/tedi';
+
+// Opening a modal
+private modalService = inject(ModalService);
+
+openModal() {
+  const ref = this.modalService.open<string>(MyModalContent, {
+    data: { title: 'Hello' },
+    width: 'md',                    // 'xs' | 'sm' | 'md' | 'lg' | 'xl' | custom CSS value
+    size: 'default',                // 'default' | 'small'
+    position: 'center',             // 'center' | 'top' | 'left' | 'right'
+    closeOnBackdropClick: true,
+    scrollBehavior: 'content',      // 'content' | 'page'
+    mobileFullscreen: false,
+  });
+
+  ref.closed.subscribe(result => console.log(result));
+}
+```
+
+**ModalConfig inputs:**
+- `data: unknown` — injected via `MODAL_DATA` token
+- `width: ModalWidth = "sm"` — preset (`xs`-`xl`) or custom CSS value (`"80%"`, `"600px"`)
+- `size: ModalSize = "default"` — `"default"` or `"small"`
+- `position: ModalPosition = "center"` — `"center"`, `"top"`, `"left"`, `"right"`
+- `closeOnBackdropClick: boolean = true`
+- `scrollBehavior: "content" | "page" = "content"`
+- `mobileFullscreen: boolean = false`
+
+**ModalRef methods/properties:**
+- `close(result?: R)` — close with optional result
+- `closed: Observable<R | undefined>` — emits on close
+- `backdropClick(): Observable<MouseEvent>`
+- `keydownEvents(): Observable<KeyboardEvent>`
+- `updateSize(width: string, height: string)`
+
+**Content component pattern:**
+
+```typescript
+@Component({
+  imports: [ModalComponent, ModalHeaderComponent, ModalContentComponent, ModalFooterComponent, ButtonComponent],
+  template: `
+    <tedi-modal>
+      <tedi-modal-header [showClose]="true">
+        <h1>{{ data.title }}</h1>
+        <p tedi-modal-description>Optional description</p>
+      </tedi-modal-header>
+      <tedi-modal-content>
+        <!-- Content here -->
+      </tedi-modal-content>
+      <tedi-modal-footer>
+        <button tedi-button variant="secondary" (click)="ref.close('cancel')">Cancel</button>
+        <button tedi-button (click)="ref.close('confirm')">Confirm</button>
+      </tedi-modal-footer>
+    </tedi-modal>
+  `,
+})
+class MyModalContent {
+  data = inject(MODAL_DATA);
+  ref = inject(ModalRef);
+}
+```
+
+**Sub-components:**
+- `tedi-modal-header` — `showClose: boolean = true`
+- `tedi-modal-content` — scrollable body
+- `tedi-modal-footer` — action buttons
+
+### Modal (template-based, deprecated)
+
+The `[(open)]` binding approach is deprecated. Use `ModalService.open()` for new code.
+
+```html
+<tedi-modal [(open)]="isOpen" width="sm" position="center">
+  <tedi-modal-header><h1>Title</h1></tedi-modal-header>
+  <tedi-modal-content>Body</tedi-modal-content>
+  <tedi-modal-footer>
+    <button tedi-button (click)="isOpen = false">Close</button>
+  </tedi-modal-footer>
+</tedi-modal>
+```
+
+### Dropdown
+**Selector:** `tedi-dropdown`
+**Model:** `value: string`
+**Inputs:**
+- `position: DropdownPosition = "bottom-start"`
+- `preventOverflow: boolean = true`
+- `appendTo: string`
+
+```html
+<tedi-dropdown [(value)]="selected">
+  <button tedi-button>Select option</button>
+  <tedi-dropdown-content dropdownRole="listbox">
+    <li tedi-dropdown-item value="a">Option A</li>
+    <li tedi-dropdown-item value="b">Option B</li>
+  </tedi-dropdown-content>
+</tedi-dropdown>
+```
+
+### Popover
+**Selector:** `tedi-popover`
+**Inputs:**
+- `position: PopoverPosition = "top"`
+- `dismissible: boolean = true`
+- `withArrow: boolean = true`
+- `lockScroll: boolean = false`
+- `appendTo: string = "body"`
+
+### Tooltip
+**Selector:** `tedi-tooltip`
+**Inputs:**
+- `position: TooltipPosition = "top"`
+- `preventOverflow: boolean = true`
+- `openWith: TooltipOpenWith = "both"` — hover, focus, or both
+- `appendTo: string = "body"`
+
+```html
+<tedi-tooltip position="top">
+  <tedi-tooltip-trigger>
+    <button tedi-button>Hover me</button>
+  </tedi-tooltip-trigger>
+  <tedi-tooltip-content>Tooltip text</tedi-tooltip-content>
+</tedi-tooltip>
+```
+
+## Tags
+
+### Tag
+**Selector:** `tedi-tag`
+**Inputs:**
+- `loading: boolean = false`
+- `closable: boolean = false`
+- `type: TagType = "primary"`
+**Outputs:**
+- `closed: Event`
+**Slots:** default
+
+```html
+<tedi-tag type="primary" [closable]="true" (closed)="onRemove()">Label</tedi-tag>
+```
+
+### StatusBadge
+**Selector:** `tedi-status-badge`
+**Inputs:**
+- `text: string`
+- `color: StatusBadgeColor = "neutral"`
+- `variant: StatusBadgeVariant = "filled"`
+- `size: StatusBadgeSize = "default"`
+- `status: StatusBadgeStatus`
+- `icon: string`
+
+```html
+<tedi-status-badge text="Active" color="success" status="positive" />
+```
+
+---
+
+# Community Components
+
+Import from `@tedi-design-system/angular/community`. These are community-contributed, have relaxed review standards, and are **not recommended** when a TEDI-Ready equivalent exists.
+
+## Buttons
+
+### FloatingButton
+**Selector:** `[tedi-floating-button]`
+- `variant: FloatingButtonVariant = "primary"`
+- `size: FloatingButtonSize = "default"`
+- `axis: FloatingButtonAxis = "horizontal"`
+
+## Cards
+
+### Accordion — **DEPRECATED** (use TEDI-Ready Accordion)
+### Card
+**Selector:** `tedi-card`
+- `borderless: boolean`, `spacing: CardSpacing = "md"`, `accentBorder: CardAccentBorder`, `selected: boolean`
+- Sub-components: `tedi-card-header`, `tedi-card-content`, `tedi-card-row`
+
+## Form
+
+### Checkbox
+**Selector:** `tedi-checkbox` | ControlValueAccessor
+- `inputId: string`, `value: string`, `size: CheckboxSize`, `hasError: boolean`
+- Models: `checked: boolean | null`, `indeterminate: boolean`, `disabled: boolean`
+
+### CheckboxGroup / CheckboxCardGroup
+**Selector:** `tedi-checkbox-group`, `tedi-checkbox-card-group`
+
+### Input — **DEPRECATED** (use TEDI-Ready TextField)
+
+### Radio / RadioGroup / RadioCardGroup
+**Selector:** `tedi-radio`, `tedi-radio-group`, `tedi-radio-card-group`
+
+### Select / Multiselect
+**Selector:** `tedi-select`, `tedi-multiselect` | ControlValueAccessor
+- `inputId: string`, `label: string`, `clearable: boolean = true`, `state: InputState`, `size: InputSize`
+
+### Search
+**Selector:** `tedi-search` | ControlValueAccessor
+- `inputId: string`, `autocompleteOptions: AutocompleteOption[]`, `size: SearchSize`, `withButton: boolean`
+
+### Textarea
+**Selector:** `[tedi-textarea]` (extends Input)
+- `resizeX: boolean = false`, `resizeY: boolean = true`
+
+### FileDropzone
+**Selector:** `tedi-file-dropzone` | ControlValueAccessor
+- `accept: string`, `maxSize: number`, `multiple: boolean`, `mode: "append" | "replace"`
+
+### FormField / InputGroup
+**Selector:** `tedi-form-field`, `tedi-input-group`
+
+## Helpers
+
+### ProgressBar
+**Selector:** `tedi-progress-bar`
+- `value: number = 0`, `direction: "horizontal" | "vertical"`, `small: boolean`
+
+## Navigation
+
+### Breadcrumbs
+**Selector:** `tedi-breadcrumbs`
+- `crumbs: Breadcrumb[]`, `shortCrumbs: boolean` | Breakpoint support
+
+### Pagination
+**Selector:** `tedi-pagination`
+- Models: `page: number = 1`, `pageSize: number = 50`
+- `pageSizeOptions: number[]`, `length: number`
+
+### Tabs
+**Selector:** `tedi-tabs`
+- Sub-components: `[tedi-tab]` (`tabId: string`), `tedi-tab-content` (`tabId: string`)
+
+### TableOfContents
+**Selector:** `tedi-table-of-contents`
+- `heading: string`, `position: "default" | "fixed" | "sticky"`, `scrollAware: boolean`
+
+### VerticalStepper
+**Selector:** `tedi-vertical-stepper`
+- `compact: boolean`, `enumerated: boolean`
+- Sub-component: `tedi-vertical-stepper-item` (`title: string`, `completed`, `error`, `selected`, `disabled`)
+
+## Overlay
+
+### Dropdown
+**Selector:** `tedi-dropdown`
+- `dropdownId: string`, `dropdownRole: "menu" | "listbox"`
+- Sub-component: `[tedi-dropdown-item]`
+
+### Modal
+**Selector:** `tedi-modal`
+- Models: `maxWidth: ModalBreakpoint = "sm"`, `variant: "default" | "small"`
+- Sub-components: `tedi-modal-header`, `tedi-modal-footer`
+
+## Tags
+
+### Tag — **DEPRECATED** (use TEDI-Ready Tag)
+### StatusBadge — **DEPRECATED** (use TEDI-Ready StatusBadge)
+
+## Table
+
+### TableStyles
+**Selector:** `tedi-table-styles`
+- `size: "default" | "small"`, `verticalBorders: boolean`, `striped: boolean`, `clickable: boolean`
diff --git a/skills/tedi-angular/references/forms.md b/skills/tedi-angular/references/forms.md
new file mode 100644
index 000000000..6157b9e15
--- /dev/null
+++ b/skills/tedi-angular/references/forms.md
@@ -0,0 +1,145 @@
+# Form Controls
+
+TEDI form controls implement Angular's `ControlValueAccessor` interface, integrating seamlessly with `ReactiveFormsModule` and `FormsModule`.
+
+## Available Form Controls
+
+| Component | Selector | Value Type |
+|-----------|----------|------------|
+| TextFieldComponent | `input[tedi-text-field]` | `string` |
+| NumberFieldComponent | `tedi-number-field` | `number` |
+| CheckboxComponent | `input[tedi-checkbox]` | `boolean` |
+| ToggleComponent | `tedi-toggle` | `boolean` |
+| DatePickerComponent | `tedi-date-picker` | `Date \| null` |
+| DropdownComponent | `tedi-dropdown` | `string` |
+
+## Basic Usage with Reactive Forms
+
+```typescript
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import {
+  TextFieldComponent,
+  FormFieldComponent,
+  LabelComponent,
+  FeedbackTextComponent,
+  CheckboxComponent,
+} from '@tedi-design-system/angular/tedi';
+
+@Component({
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    TextFieldComponent,
+    FormFieldComponent,
+    LabelComponent,
+    FeedbackTextComponent,
+    CheckboxComponent,
+  ],
+  template: `
+    <form [formGroup]="form">
+      <tedi-form-field>
+        <tedi-label>Full name</tedi-label>
+        <input tedi-text-field formControlName="name" />
+        <tedi-feedback-text type="error" *ngIf="form.controls.name.invalid">
+          Name is required
+        </tedi-feedback-text>
+      </tedi-form-field>
+
+      <tedi-form-field>
+        <tedi-label>Email</tedi-label>
+        <input tedi-text-field formControlName="email" type="email" />
+      </tedi-form-field>
+
+      <input tedi-checkbox formControlName="agree" />
+    </form>
+  `,
+})
+export class MyFormComponent {
+  form = new FormGroup({
+    name: new FormControl('', Validators.required),
+    email: new FormControl(''),
+    agree: new FormControl(false),
+  });
+}
+```
+
+## Form Field Structure
+
+The recommended structure for a form field:
+
+```html
+<tedi-form-field>
+  <tedi-label>Field label</tedi-label>
+  <input tedi-text-field [formControl]="control" />
+  <tedi-feedback-text type="error">Error message</tedi-feedback-text>
+  <tedi-feedback-text type="hint">Help text</tedi-feedback-text>
+</tedi-form-field>
+```
+
+`FormFieldComponent` wraps the input with optional label, icon, clear button, and feedback text. Key inputs:
+
+- `size: 'default' | 'small'` — field size
+- `icon: string | FormFieldIcon` — icon name or config
+- `clearable: boolean` — show clear button when value exists
+
+## Two-Way Binding (without forms)
+
+TEDI controls also support two-way binding via `model()` signals:
+
+```html
+<!-- Template-driven two-way binding -->
+<tedi-date-picker [(selected)]="selectedDate" />
+<tedi-dropdown [(value)]="selectedOption" />
+<tedi-toggle [(value)]="isEnabled" />
+```
+
+## Validation States
+
+Form fields automatically reflect validation state from the `FormControl`:
+
+```typescript
+// The form field shows error styling when control is invalid + touched
+this.emailControl = new FormControl('', [Validators.required, Validators.email]);
+```
+
+You can also set validation state explicitly on date-picker:
+
+```html
+<tedi-date-picker [inputState]="'error'" />
+```
+
+States: `'default'`, `'error'`, `'valid'`.
+
+## Disabled State
+
+Both programmatic and form-level disable work:
+
+```typescript
+// Via FormControl
+this.control.disable();
+
+// Via input
+<input tedi-text-field [formControl]="control" [disabled]="true" />
+```
+
+The component combines native disabled state with form-disabled state internally.
+
+## Date Picker
+
+The date picker has extensive configuration:
+
+```html
+<tedi-date-picker
+  [formControl]="dateControl"
+  [showWeekNumbers]="true"
+  [allowManualInput]="true"
+  [closeOnSelect]="true"
+  [monthMode]="'dropdown'"
+  [yearMode]="'dropdown'"
+  [inputSize]="'default'"
+  [inputState]="'default'"
+  [disabled]="disabledDateMatcher"
+/>
+```
+
+The `disabled` input accepts a `DatePickerMatcher` — a function `(date: Date) => boolean` that returns true for dates that should be disabled.
diff --git a/skills/tedi-angular/references/theming.md b/skills/tedi-angular/references/theming.md
new file mode 100644
index 000000000..881beb331
--- /dev/null
+++ b/skills/tedi-angular/references/theming.md
@@ -0,0 +1,104 @@
+# Theming
+
+TEDI uses design tokens from `@tedi-design-system/core` exposed as CSS custom properties. Components are styled with BEM classes using the `tedi-` prefix and `ViewEncapsulation.None`, so all styles are globally accessible and overridable.
+
+## Setup
+
+Import TEDI core styles in your global stylesheet:
+
+```scss
+// styles.scss
+@use '@tedi-design-system/core/scss' as tedi;
+```
+
+Configure the default theme via `provideTedi()`:
+
+```typescript
+provideTedi({
+  theme: 'default', // 'default' | 'dark' | custom string
+})
+```
+
+## Theme Switching
+
+Themes are applied as a CSS class on `<html>`: `tedi-theme--default`, `tedi-theme--dark`.
+
+```typescript
+import { ThemeService } from '@tedi-design-system/angular/tedi';
+
+@Component({ ... })
+export class MyComponent {
+  private themeService = inject(ThemeService);
+
+  setDarkTheme() {
+    this.themeService.theme.set('dark');
+  }
+
+  getCurrentTheme() {
+    return this.themeService.theme(); // reads current theme signal
+  }
+}
+```
+
+The theme is persisted in a cookie (`tedi-theme`) and restored on page load.
+
+## 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 to stay consistent:
+
+```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
+
+All TEDI components use BEM naming with the `tedi-` prefix. You can override styles by targeting BEM classes:
+
+```scss
+// Override button primary color
+.tedi-button--primary {
+  background-color: var(--my-brand-primary);
+}
+
+// Override form field spacing
+.tedi-form-field {
+  margin-bottom: var(--tedi-spacing-4);
+}
+```
+
+Because components use `ViewEncapsulation.None`, standard CSS specificity rules apply. No `::ng-deep` or `:host` needed.
+
+## 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
+}
+```
+
+Then activate it:
+
+```typescript
+this.themeService.theme.set('my-brand');
+// Adds class "tedi-theme--my-brand" to <html>
+```
diff --git a/tedi/components/form/checkbox/checkbox.stories.ts b/tedi/components/form/checkbox/checkbox.stories.ts
index 4980f3190..172b4d99c 100644
--- a/tedi/components/form/checkbox/checkbox.stories.ts
+++ b/tedi/components/form/checkbox/checkbox.stories.ts
@@ -26,7 +26,7 @@ type StoryCheckboxComponent = CheckboxComponent & {
  * <a href="https://www.tedi.ee/1ee8444b7/p/796203-checkbox" target="_blank">Zeroheight ↗</a>
  */
 export default {
-  title: "TEDI-Ready/Components/Form/Checkbox",
+  title: "TEDI-Ready/Components/Form/Choicegroup/Checkbox",
   component: CheckboxComponent,
   decorators: [
     moduleMetadata({
@@ -532,9 +532,6 @@ export const CheckboxCardsWithDescription: StoryObj<CheckboxComponent> = {
   }),
 };
 
-/**
- * Checkbox cards with icons before the label text.
- */
 /**
  * All visual states of the checkbox card component for both primary and secondary variants.
  */
@@ -656,6 +653,9 @@ export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
   }),
 };
 
+/**
+ * Checkbox cards with icons before the label text.
+ */
 export const CheckboxCardsWithIcons: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,

From 2e94ffc6f45f374508a38e13caf2c71de061aef1 Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Fri, 27 Mar 2026 14:12:04 +0200
Subject: [PATCH 04/18] feat(radio): new TEDI-ready component #7

---
 .../contributing/references/best-practices.md |   6 +-
 .../contributing/references/new-component.md  |   2 +-
 .../skills/contributing/references/stories.md |  81 +-
 skills/tedi-angular/references/components.md  |  41 +
 tedi/components/form/index.ts                 |   2 +
 .../form/radio-card/radio-card.component.scss | 160 ++++
 .../radio-card/radio-card.component.spec.ts   |  71 ++
 .../form/radio-card/radio-card.component.ts   |  35 +
 .../form/radio/radio.component.scss           |  87 ++
 .../form/radio/radio.component.spec.ts        |  41 +
 tedi/components/form/radio/radio.component.ts |  33 +
 tedi/components/form/radio/radio.stories.ts   | 781 ++++++++++++++++++
 12 files changed, 1319 insertions(+), 21 deletions(-)
 create mode 100644 tedi/components/form/radio-card/radio-card.component.scss
 create mode 100644 tedi/components/form/radio-card/radio-card.component.spec.ts
 create mode 100644 tedi/components/form/radio-card/radio-card.component.ts
 create mode 100644 tedi/components/form/radio/radio.component.scss
 create mode 100644 tedi/components/form/radio/radio.component.spec.ts
 create mode 100644 tedi/components/form/radio/radio.component.ts
 create mode 100644 tedi/components/form/radio/radio.stories.ts

diff --git a/.claude/skills/contributing/references/best-practices.md b/.claude/skills/contributing/references/best-practices.md
index 705499173..fd0311ed9 100644
--- a/.claude/skills/contributing/references/best-practices.md
+++ b/.claude/skills/contributing/references/best-practices.md
@@ -223,16 +223,16 @@ export default {
       imports: [ComponentNameComponent, /* dependencies */],
     }),
   ],
-  parameters: {
-    status: { type: ['partiallyTediReady'] }, // or 'existsInTediReady'
-  },
+  parameters: {},
   argTypes: {
+    // Every public input/model must have an entry
     inputName: {
       description: 'What this input does',
       control: { type: 'radio' },
       options: ['option1', 'option2'],
       table: {
         category: 'inputs',
+        type: { summary: 'TypeName' },
         defaultValue: { summary: 'option1' },
       },
     },
diff --git a/.claude/skills/contributing/references/new-component.md b/.claude/skills/contributing/references/new-component.md
index 458e9c39e..38dbeda68 100644
--- a/.claude/skills/contributing/references/new-component.md
+++ b/.claude/skills/contributing/references/new-component.md
@@ -46,7 +46,7 @@ Follow all patterns from best-practices:
 - Standalone, OnPush, ViewEncapsulation.None
 - Signal-based inputs (`input()`, `model()`, `output()`)
 - BEM SCSS with `tedi-` prefix, using design tokens
-- ControlValueAccessor if it's a form control
+- Form controls MUST implement `ControlValueAccessor` with `NG_VALUE_ACCESSOR` provider (using `forwardRef()` and `multi: true`) for reactive forms integration. Test with a host component using `ReactiveFormsModule` and `FormControl`.
 - Full WCAG compliance (roles, keyboard nav, focus, aria attributes)
 
 ## Step 5: Export
diff --git a/.claude/skills/contributing/references/stories.md b/.claude/skills/contributing/references/stories.md
index 0ba02f6a2..189ba4fc8 100644
--- a/.claude/skills/contributing/references/stories.md
+++ b/.claude/skills/contributing/references/stories.md
@@ -27,30 +27,67 @@ 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:
+- **States story** — every component that can be activated or has visual states (hover, active, focus, disabled, selected, error, etc.) **must** have a `States` story. Use a table-like layout with `tedi-row`/`tedi-col` grid components, one row per state. Each row has a bold label in the first column and the component in the second column. Use `storybook-addon-pseudo-states` parameters for hover/active/focus. If the component has multiple variants, show them **side by side in columns** (not stacked vertically) — one column per variant with a bold header row, like a comparison table.
+
+  Required imports: `RowComponent`, `ColComponent`, `TextComponent` from `@tedi-design-system/angular/tedi`.
+
+  Define states as a constant and iterate with `*ngFor`:
   ```typescript
+  const PSEUDO_STATE = ['Default', 'Hover', 'Active', 'Focus', 'Disabled'];
+
   export const States: StoryObj<ComponentName> = {
-    render: () => ({
-      template: `
-        <div style="display: flex; gap: 1rem;">
-          <tedi-component>Default</tedi-component>
-          <tedi-component>Hover</tedi-component>
-          <tedi-component>Active</tedi-component>
-          <tedi-component>Focus</tedi-component>
-          <tedi-component [disabled]="true">Disabled</tedi-component>
-        </div>
-      `,
-    }),
     parameters: {
       pseudo: {
-        hover: 'tedi-component:nth-of-type(2)',
-        active: 'tedi-component:nth-of-type(3)',
-        focusVisible: 'tedi-component:nth-of-type(4)',
+        hover: '#Hover',
+        active: '#Active',
+        focusVisible: '#Focus',
       },
     },
+    render: () => ({
+      props: { PSEUDO_STATE },
+      template: `
+        <tedi-row [cols]="1" [gapY]="3">
+          <tedi-row cols="1" [sm]="{ cols: 6 }" *ngFor="let state of PSEUDO_STATE;" alignItems="center">
+            <tedi-col width="1">
+              <p tedi-text modifiers="bold">{{ state }}</p>
+            </tedi-col>
+            <tedi-col width="5">
+              <tedi-component
+                [id]="state"
+                [disabled]="state === 'Disabled'"
+              />
+            </tedi-col>
+          </tedi-row>
+        </tedi-row>
+      `,
+    }),
   };
   ```
 
+  Key rules:
+  - Each state's component must have `[id]="state"` so pseudo-state selectors (`#Hover`, `#Active`, `#Focus`) can target it.
+  - Include all relevant states for the component (e.g., `Selected`, `Error`, `Success` where applicable).
+  - Reference `text-field.stories.ts` as the canonical example.
+
+- **Variant comparison layout** — when a component has multiple variants (e.g., primary/secondary), always show them **side by side** in a `tedi-row` grid, not stacked vertically. Use a header row with bold labels for each variant column:
+  ```html
+  <tedi-row [cols]="2" [gapY]="3">
+    <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+    <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+    <tedi-col><!-- primary content --></tedi-col>
+    <tedi-col><!-- secondary content --></tedi-col>
+  </tedi-row>
+  ```
+  For states with variants, use a 3-column layout (State | Primary | Secondary):
+  ```html
+  <tedi-row [cols]="3" [gapY]="3" alignItems="center">
+    <tedi-col><p tedi-text modifiers="bold">State</p></tedi-col>
+    <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+    <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+    <!-- one row per state -->
+  </tedi-row>
+  ```
+
 ### 3. Determine the Story Category
 
 Find where the component lives under `tedi/components/` and map to the Storybook title:
@@ -85,7 +122,6 @@ export default {
     }),
   ],
   parameters: {
-    status: { type: ['partiallyTediReady'] },
     design: { type: 'figma', url: 'https://www.figma.com/...' },
   },
   argTypes: {
@@ -98,6 +134,7 @@ export default {
 
 - [ ] Every Figma section has a corresponding story export, in the same order
 - [ ] Example content (labels, data, item count) matches Figma exactly
+- [ ] Every public input/model has a corresponding `argTypes` entry with description, control, type summary, and default value
 - [ ] `Default` story has all controls wired up via `args`
 - [ ] States story covers all visual states shown in Figma (default, hover, active, focus, disabled)
 - [ ] Reactive forms example included if the component implements ControlValueAccessor
@@ -105,11 +142,21 @@ export default {
 
 ### 6. argTypes Convention
 
+**Every public input/model must have an argTypes entry.** Do not skip any — all props must appear in the Storybook controls panel with correct typing and descriptions.
+
+Each entry must include:
+- `description` — brief explanation of what the input controls
+- `control` — appropriate control type (`'radio'`, `'select'`, `'boolean'`, `'text'`, `'number'`, `'object'`)
+- `options` — for enum/union type inputs, list all possible values
+- `table.category` — always `'inputs'`
+- `table.type.summary` — the TypeScript type name (e.g., `'boolean'`, `'string'`, `'FilterVariant'`, `'FilterOption[]'`)
+- `table.defaultValue.summary` — the default value
+
 ```typescript
 argTypes: {
   inputName: {
     description: 'Brief description of what this input controls',
-    control: { type: 'radio' },  // or 'select', 'boolean', 'text', 'number'
+    control: { type: 'radio' },  // or 'select', 'boolean', 'text', 'number', 'object'
     options: ['value1', 'value2'],
     table: {
       category: 'inputs',
diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index feb326c22..69c66ffe9 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -199,6 +199,47 @@ Composed of sub-components:
 <input type="checkbox" tedi-checkbox [formControl]="agreeControl" />
 ```
 
+### Radio
+**Selector:** `input[type=radio][tedi-radio]`
+**Inputs:**
+- `size: RadioSize = "default"` — "default" or "large"
+- `invalid: boolean = false`
+
+```html
+<label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+  <input type="radio" tedi-radio name="group" value="a" />
+  Option A
+</label>
+```
+
+### RadioCard
+**Selector:** `label[tedi-radio-card]`
+**Inputs:**
+- `variant: RadioCardVariant = "primary"` — "primary" or "secondary"
+- `grouped: boolean = false` — join cards in a button-group layout
+
+```html
+<!-- Separate cards (default) -->
+<div style="display: flex; gap: 8px;">
+  <label tedi-radio-card variant="primary">
+    <input tedi-radio type="radio" name="cards" />
+    Text
+  </label>
+</div>
+
+<!-- Grouped cards -->
+<div style="display: inline-flex;">
+  <label tedi-radio-card variant="primary" [grouped]="true">
+    <input tedi-radio type="radio" name="cards" />
+    Option A
+  </label>
+  <label tedi-radio-card variant="primary" [grouped]="true">
+    <input tedi-radio type="radio" name="cards" />
+    Option B
+  </label>
+</div>
+```
+
 ### Toggle
 **Selector:** `tedi-toggle`
 **Model:** `checked: boolean`
diff --git a/tedi/components/form/index.ts b/tedi/components/form/index.ts
index 49eef9ab7..c400f22bb 100644
--- a/tedi/components/form/index.ts
+++ b/tedi/components/form/index.ts
@@ -1,5 +1,7 @@
 export * from "./checkbox/checkbox.component";
 export * from "./checkbox-card/checkbox-card.component";
+export * from "./radio/radio.component";
+export * from "./radio-card/radio-card.component";
 export * from "./date-picker/date-picker.component";
 export * from "./feedback-text/feedback-text.component";
 export * from "./label/label.component";
diff --git a/tedi/components/form/radio-card/radio-card.component.scss b/tedi/components/form/radio-card/radio-card.component.scss
new file mode 100644
index 000000000..3fd58e8ba
--- /dev/null
+++ b/tedi/components/form/radio-card/radio-card.component.scss
@@ -0,0 +1,160 @@
+label[tedi-radio-card] {
+  --_card-bg: transparent;
+  --_card-text: inherit;
+  --_card-border: transparent;
+
+  display: inline-flex;
+  gap: var(--form-checkbox-radio-card-inner-spacing);
+  align-items: flex-start;
+  padding: var(--form-checkbox-radio-card-checkbox-padding-y) var(--form-checkbox-radio-card-checkbox-padding-x);
+  font-family: var(--family-default);
+  font-size: var(--body-regular-size);
+  line-height: var(--body-regular-line-height);
+  color: var(--_card-text);
+  cursor: pointer;
+  background-color: var(--_card-bg);
+  border: 1px solid var(--_card-border);
+  border-radius: var(--form-checkbox-radio-card-radius);
+
+  [tedi-text],
+  tedi-icon {
+    color: inherit;
+  }
+
+  input[tedi-radio],
+  tedi-icon {
+    flex-shrink: 0;
+    margin-top: calc(var(--form-checkbox-radio-card-checkbox-indicator-padding-y) - var(--form-checkbox-radio-card-checkbox-padding-y));
+  }
+
+  input[tedi-radio] {
+    &:not(:disabled):hover {
+      box-shadow: none;
+    }
+  }
+
+  &:has(input:focus-visible) {
+    outline: 2px solid var(--form-input-border-active);
+    outline-offset: 1px;
+
+    input[tedi-radio]:focus-visible {
+      outline: none;
+    }
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+  }
+
+  &.tedi-radio-card--grouped {
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--form-checkbox-radio-card-radius);
+      border-bottom-left-radius: var(--form-checkbox-radio-card-radius);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--form-checkbox-radio-card-radius);
+      border-bottom-right-radius: var(--form-checkbox-radio-card-radius);
+    }
+
+    & + & {
+      margin-left: -1px;
+    }
+
+    &:has(input:focus-visible) {
+      z-index: 5;
+    }
+
+    &:has(input:checked) {
+      z-index: 1;
+    }
+  }
+
+  &.tedi-radio-card--primary {
+    --_card-bg: var(--form-checkbox-radio-card-primary-default-background);
+    --_card-text: var(--form-checkbox-radio-card-primary-default-text);
+    --_card-border: var(--form-checkbox-radio-card-primary-default-border-separate);
+
+    &.tedi-radio-card--grouped {
+      --_card-border: var(--form-checkbox-radio-card-primary-default-border-group);
+    }
+
+    &:has(input:checked) {
+      --_card-bg: var(--form-checkbox-radio-card-primary-selected-background);
+      --_card-text: var(--form-checkbox-radio-card-primary-selected-text);
+      --_card-border: var(--form-checkbox-radio-card-primary-selected-border-separate);
+
+      &.tedi-radio-card--grouped {
+        --_card-border: var(--form-checkbox-radio-card-primary-selected-border-group);
+      }
+
+      input[tedi-radio]:not(:disabled) {
+        background-color: transparent;
+        border-color: var(--form-checkbox-radio-default-border-selected-inverted);
+
+        &::before {
+          background: var(--form-checkbox-radio-default-check-indicator-default);
+        }
+      }
+    }
+
+    &:has(input:hover:not(:disabled)) {
+      --_card-bg: var(--form-checkbox-radio-card-primary-hover-background);
+      --_card-text: var(--form-checkbox-radio-card-primary-hover-text);
+      --_card-border: var(--form-checkbox-radio-card-primary-hover-border);
+    }
+
+    &:has(input:disabled:not(:checked)) {
+      --_card-bg: var(--form-checkbox-radio-card-primary-disabled-default-background);
+      --_card-text: var(--form-checkbox-radio-card-primary-disabled-default-text);
+      --_card-border: var(--form-checkbox-radio-card-primary-disabled-default-background);
+    }
+
+    &:has(input:disabled:checked) {
+      --_card-bg: var(--form-checkbox-radio-card-primary-disabled-selected-background);
+      --_card-text: var(--form-checkbox-radio-card-primary-disabled-selected-text);
+      --_card-border: var(--form-checkbox-radio-card-primary-disabled-selected-background);
+
+      input[tedi-radio] {
+        background-color: transparent;
+        border-color: var(--form-checkbox-radio-default-border-selected-inverted);
+      }
+    }
+  }
+
+  &.tedi-radio-card--secondary {
+    --_card-bg: var(--form-checkbox-radio-card-secondary-default-background);
+    --_card-text: var(--form-checkbox-radio-card-secondary-default-text);
+    --_card-border: var(--form-checkbox-radio-card-secondary-default-border);
+
+    &:has(input:checked) {
+      --_card-bg: var(--form-checkbox-radio-card-secondary-selected-background);
+      --_card-text: var(--form-checkbox-radio-card-secondary-selected-text);
+      --_card-border: var(--form-checkbox-radio-card-secondary-selected-border);
+
+      box-shadow: inset 0 0 0 1px var(--_card-border);
+    }
+
+    &:has(input:hover:not(:disabled)) {
+      --_card-bg: var(--form-checkbox-radio-card-secondary-hover-background);
+      --_card-text: var(--form-checkbox-radio-card-secondary-hover-text);
+      --_card-border: var(--form-checkbox-radio-card-secondary-hover-border);
+    }
+
+    &:has(input:disabled:not(:checked)) {
+      --_card-bg: var(--form-checkbox-radio-card-secondary-disabled-default-background);
+      --_card-text: var(--form-checkbox-radio-card-secondary-disabled-default-text);
+      --_card-border: var(--form-checkbox-radio-card-secondary-disabled-default-border);
+    }
+
+    &:has(input:disabled:checked) {
+      --_card-bg: var(--form-checkbox-radio-card-secondary-disabled-selected-background);
+      --_card-text: var(--form-checkbox-radio-card-secondary-disabled-selected-text);
+      --_card-border: var(--form-checkbox-radio-card-secondary-disabled-selected-border);
+
+      box-shadow: inset 0 0 0 1px var(--_card-border);
+    }
+  }
+}
diff --git a/tedi/components/form/radio-card/radio-card.component.spec.ts b/tedi/components/form/radio-card/radio-card.component.spec.ts
new file mode 100644
index 000000000..3ed8b68cf
--- /dev/null
+++ b/tedi/components/form/radio-card/radio-card.component.spec.ts
@@ -0,0 +1,71 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import {
+  RadioCardComponent,
+  RadioCardVariant,
+} from "./radio-card.component";
+import { RadioComponent } from "../radio/radio.component";
+
+@Component({
+  standalone: true,
+  imports: [RadioCardComponent, RadioComponent],
+  template: `
+    <label tedi-radio-card [variant]="variant" [grouped]="grouped">
+      <input tedi-radio type="radio" />
+      Text
+    </label>
+  `,
+})
+class TestHostComponent {
+  variant: RadioCardVariant = "primary";
+  grouped = false;
+}
+
+describe("RadioCardComponent", () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let labelElement: HTMLLabelElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    });
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    labelElement = fixture.nativeElement.querySelector("label");
+  });
+
+  it("should create component", () => {
+    expect(labelElement).toBeTruthy();
+    expect(labelElement.classList).toContain("tedi-radio-card");
+  });
+
+  it("should apply primary class by default", () => {
+    expect(labelElement.classList).toContain("tedi-radio-card--primary");
+    expect(labelElement.classList).not.toContain(
+      "tedi-radio-card--secondary"
+    );
+  });
+
+  it("should apply secondary class", () => {
+    fixture.componentInstance.variant = "secondary";
+    fixture.detectChanges();
+    expect(labelElement.classList).toContain("tedi-radio-card--secondary");
+    expect(labelElement.classList).not.toContain("tedi-radio-card--primary");
+  });
+
+  it("should contain a radio input", () => {
+    const input = labelElement.querySelector('input[type="radio"]');
+    expect(input).toBeTruthy();
+  });
+
+  it("should not have grouped class by default", () => {
+    expect(labelElement.classList).not.toContain("tedi-radio-card--grouped");
+  });
+
+  it("should apply grouped class", () => {
+    fixture.componentInstance.grouped = true;
+    fixture.detectChanges();
+    expect(labelElement.classList).toContain("tedi-radio-card--grouped");
+  });
+});
diff --git a/tedi/components/form/radio-card/radio-card.component.ts b/tedi/components/form/radio-card/radio-card.component.ts
new file mode 100644
index 000000000..f38009291
--- /dev/null
+++ b/tedi/components/form/radio-card/radio-card.component.ts
@@ -0,0 +1,35 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+export type RadioCardVariant = "primary" | "secondary";
+
+@Component({
+  standalone: true,
+  selector: "label[tedi-radio-card]",
+  template: "<ng-content />",
+  styleUrl: "./radio-card.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "tedi-radio-card",
+    "[class.tedi-radio-card--primary]": "variant() === 'primary'",
+    "[class.tedi-radio-card--secondary]": "variant() === 'secondary'",
+    "[class.tedi-radio-card--grouped]": "grouped()",
+  },
+})
+export class RadioCardComponent {
+  /**
+   * Visual variant of the card.
+   * @default primary
+   */
+  readonly variant = input<RadioCardVariant>("primary");
+  /**
+   * Whether the card is part of a button-group style layout.
+   * @default false
+   */
+  readonly grouped = input(false);
+}
diff --git a/tedi/components/form/radio/radio.component.scss b/tedi/components/form/radio/radio.component.scss
new file mode 100644
index 000000000..f6e728cdc
--- /dev/null
+++ b/tedi/components/form/radio/radio.component.scss
@@ -0,0 +1,87 @@
+@use "@tedi-design-system/core/bootstrap-utility/breakpoints";
+
+input[tedi-radio][type="radio"] {
+  --_radio-dot-size: calc(var(--form-checkbox-radio-size-responsive) * 0.67);
+
+  position: relative;
+  width: var(--form-checkbox-radio-size-responsive);
+  height: var(--form-checkbox-radio-size-responsive);
+  padding: 0;
+  margin: 0;
+  vertical-align: middle;
+  appearance: none;
+  cursor: pointer;
+  background-color: var(--form-checkbox-radio-default-background-default);
+  border: 1px solid var(--form-checkbox-radio-default-border-default);
+  border-radius: var(--form-checkbox-radio-indicator-radius-radio);
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--_radio-dot-size);
+    height: var(--_radio-dot-size);
+    content: "";
+    background: transparent;
+    border-radius: var(--form-checkbox-radio-indicator-radius-radio);
+    transform: translate(-50%, -50%);
+    transition: background-color 150ms ease;
+  }
+
+  &:not(:disabled):hover {
+    border-color: var(--form-checkbox-radio-default-border-hover);
+    box-shadow: 0 0 0 1px var(--form-checkbox-radio-default-border-hover);
+  }
+
+  &:not(:disabled):active {
+    background-color: var(--form-checkbox-radio-default-background-active);
+    border-color: var(--form-checkbox-radio-default-border-active);
+    box-shadow: none;
+  }
+
+  &:not(:checked):disabled {
+    cursor: not-allowed;
+    background-color: var(--form-general-background-disabled);
+    border-color: var(--form-general-border-disabled);
+  }
+
+  &:checked {
+    border-color: var(--form-checkbox-radio-default-border-selected);
+
+    &::before {
+      background: var(--form-checkbox-radio-default-background-selected);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      border-color: var(--form-checkbox-radio-default-border-selected-disabled);
+
+      &::before {
+        background: var(--form-checkbox-radio-default-background-selected-disabled);
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-offset: 2px;
+  }
+
+  &:not(:checked, :disabled).tedi-radio--invalid,
+  &:user-invalid,
+  &.ng-invalid.ng-touched {
+    border-color: var(--form-general-feedback-error-border);
+
+    &:hover {
+      border-color: var(--form-checkbox-radio-default-border-hover);
+    }
+  }
+
+  &.tedi-radio--large {
+    --_radio-dot-size: calc(var(--form-checkbox-radio-size-large) * 0.67);
+
+    width: var(--form-checkbox-radio-size-large);
+    height: var(--form-checkbox-radio-size-large);
+  }
+}
diff --git a/tedi/components/form/radio/radio.component.spec.ts b/tedi/components/form/radio/radio.component.spec.ts
new file mode 100644
index 000000000..10e3ccbc1
--- /dev/null
+++ b/tedi/components/form/radio/radio.component.spec.ts
@@ -0,0 +1,41 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { RadioComponent } from "./radio.component";
+
+describe("RadioComponent", () => {
+  let fixture: ComponentFixture<RadioComponent>;
+  let element: HTMLInputElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RadioComponent],
+    });
+
+    fixture = TestBed.createComponent(RadioComponent);
+    element = fixture.nativeElement;
+    fixture.detectChanges();
+  });
+
+  it("should create component", () => {
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it("should not have large class by default", () => {
+    expect(element.classList).not.toContain("tedi-radio--large");
+  });
+
+  it("should apply large class", () => {
+    fixture.componentRef.setInput("size", "large");
+    fixture.detectChanges();
+    expect(element.classList).toContain("tedi-radio--large");
+  });
+
+  it("should not have invalid class by default", () => {
+    expect(element.classList).not.toContain("tedi-radio--invalid");
+  });
+
+  it("should apply invalid class", () => {
+    fixture.componentRef.setInput("invalid", true);
+    fixture.detectChanges();
+    expect(element.classList).toContain("tedi-radio--invalid");
+  });
+});
diff --git a/tedi/components/form/radio/radio.component.ts b/tedi/components/form/radio/radio.component.ts
new file mode 100644
index 000000000..6dc6a60db
--- /dev/null
+++ b/tedi/components/form/radio/radio.component.ts
@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+
+export type RadioSize = "default" | "large";
+
+@Component({
+  standalone: true,
+  selector: "input[type=radio][tedi-radio]",
+  template: "",
+  styleUrl: "./radio.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[class.tedi-radio--large]": "size() === 'large'",
+    "[class.tedi-radio--invalid]": "invalid()",
+  },
+})
+export class RadioComponent {
+  /**
+   * Size of the radio.
+   * @default default
+   */
+  readonly size = input<RadioSize>("default");
+  /**
+   * Is radio invalid?
+   * @default false
+   */
+  readonly invalid = input(false);
+}
diff --git a/tedi/components/form/radio/radio.stories.ts b/tedi/components/form/radio/radio.stories.ts
new file mode 100644
index 000000000..2a85eb99f
--- /dev/null
+++ b/tedi/components/form/radio/radio.stories.ts
@@ -0,0 +1,781 @@
+import {
+  argsToTemplate,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from "@storybook/angular";
+import { RadioComponent } from "./radio.component";
+import { RadioCardComponent } from "../radio-card/radio-card.component";
+import { RowComponent } from "../../helpers/grid/row/row.component";
+import { ColComponent } from "../../helpers/grid/col/col.component";
+import { TextComponent } from "../../base/text/text.component";
+import { LabelComponent } from "../label/label.component";
+import { IconComponent } from "../../base/icon/icon.component";
+import { TooltipComponent } from "../../overlay/tooltip/tooltip.component";
+import { TooltipTriggerComponent } from "../../overlay/tooltip/tooltip-trigger/tooltip-trigger.component";
+import { TooltipContentComponent } from "../../overlay/tooltip/tooltip-content/tooltip-content.component";
+import { InfoButtonComponent } from "../../buttons/info-button/info-button.component";
+import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
+
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.41.64?node-id=6149-138013&m=dev" target="_blank">Figma ↗</a><br />
+ * <a href="https://www.tedi.ee/1ee8444b7/p/93e423-radio" target="_blank">Zeroheight ↗</a>
+ */
+export default {
+  title: "TEDI-Ready/Components/Form/Choicegroup/Radio",
+  component: RadioComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        RadioComponent,
+        RadioCardComponent,
+        RowComponent,
+        ColComponent,
+        TextComponent,
+        LabelComponent,
+        IconComponent,
+        TooltipComponent,
+        TooltipTriggerComponent,
+        TooltipContentComponent,
+        InfoButtonComponent,
+        FeedbackTextComponent,
+      ],
+    }),
+  ],
+  argTypes: {
+    size: {
+      control: "radio",
+      options: ["default", "large"],
+      description: "Size of the radio.",
+      table: {
+        type: {
+          summary: "RadioSize",
+          detail: "default \nlarge",
+        },
+        defaultValue: {
+          summary: "default",
+        },
+      },
+    },
+    invalid: {
+      control: "boolean",
+      description: "Is radio invalid?",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "Is radio disabled?",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+  },
+} as Meta<RadioComponent>;
+
+export const Default: StoryObj<RadioComponent & { disabled: boolean }> = {
+  args: {
+    size: "default",
+    invalid: false,
+    disabled: false,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <input tedi-radio type="radio" ${argsToTemplate(args)} />
+    `,
+  }),
+};
+
+/**
+ * Default size is used on desktop, large size is applied automatically on mobile screen sizes.
+ * Use in tables where the radio has no text. **Otherwise, prefer using default size.**
+ */
+export const Size: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="2" [gapY]="3">
+        <div>Default</div>
+        <input tedi-radio type="radio" name="size-demo" />
+        <div>Large</div>
+        <input tedi-radio type="radio" name="size-demo" size="large" />
+      </tedi-row>
+    `,
+  }),
+};
+
+export const Vertical: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <p tedi-text color="secondary">Label</p>
+      <tedi-row [cols]="1" [gapY]="1">
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="vertical-demo" />
+          Text
+        </label>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="vertical-demo" />
+          Text
+        </label>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="vertical-demo" checked />
+          Text
+        </label>
+      </tedi-row>
+    `,
+  }),
+};
+
+export const Horizontal: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <p tedi-text color="secondary">Label</p>
+      <div style="display: flex; align-items: center; gap: 12px;">
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="horizontal-demo" />
+          Text
+        </label>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="horizontal-demo" />
+          Text
+        </label>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="horizontal-demo" checked />
+          Text
+        </label>
+      </div>
+    `,
+  }),
+};
+
+export const Separate: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="1" [gapY]="4">
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="separate-demo" />
+          Text
+        </label>
+        <div style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio id="radio-required" type="radio" name="separate-required" />
+          <label tedi-label for="radio-required" color="primary" [required]="true">
+            Text
+          </label>
+        </div>
+        <div style="display: inline-flex; align-items: center; gap: 4px;">
+          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+            <input tedi-radio type="radio" name="separate-tooltip" />
+            Text
+          </label>
+          <tedi-tooltip>
+            <tedi-tooltip-trigger>
+              <button tedi-info-button></button>
+            </tedi-tooltip-trigger>
+            <tedi-tooltip-content>
+              Tooltip text
+            </tedi-tooltip-content>
+          </tedi-tooltip>
+        </div>
+        <div style="display: inline-flex; gap: 8px;">
+          <div>
+            <input tedi-radio id="radio-with-desc" type="radio" name="separate-desc" />
+          </div>
+          <div>
+            <label tedi-label for="radio-with-desc" color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              Text
+            </label>
+            <p tedi-text color="secondary">
+              Description
+            </p>
+          </div>
+        </div>
+      </tedi-row>
+    `,
+  }),
+};
+
+export const Group: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="2" [gapY]="3">
+        <div>
+          <p tedi-text color="secondary">Label</p>
+          <tedi-row [cols]="1" [gapY]="1">
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-hint" />
+              Text
+            </label>
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-hint" />
+              Text
+            </label>
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-hint" />
+              Text
+            </label>
+          </tedi-row>
+          <tedi-feedback-text text="Hint text" />
+        </div>
+        <div>
+          <p tedi-text color="secondary">Label</p>
+          <tedi-row [cols]="1" [gapY]="1">
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-error" />
+              Text
+            </label>
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-error" />
+              Text
+            </label>
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-error" />
+              Text
+            </label>
+          </tedi-row>
+          <tedi-feedback-text text="Feedback text" type="error" />
+        </div>
+        <div>
+          <p tedi-text color="secondary">Label</p>
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-h-hint" />
+              Text
+            </label>
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-h-hint" />
+              Text
+            </label>
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-h-hint" />
+              Text
+            </label>
+          </div>
+          <tedi-feedback-text text="Hint text" />
+        </div>
+        <div>
+          <p tedi-text color="secondary">Label</p>
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-h-error" />
+              Text
+            </label>
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-h-error" />
+              Text
+            </label>
+            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+              <input tedi-radio type="radio" name="group-h-error" />
+              Text
+            </label>
+          </div>
+          <tedi-feedback-text text="Feedback text" type="error" />
+        </div>
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * All visual states of the radio component.
+ */
+export const States: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="2" [gapY]="3">
+        <div>Default</div>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="state-default" />
+          Text
+        </label>
+
+        <div>Selected</div>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="state-selected" checked />
+          Text
+        </label>
+
+        <div>Error</div>
+        <div>
+          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+            <input tedi-radio type="radio" name="state-error" [invalid]="true" />
+            Text
+          </label>
+          <tedi-feedback-text text="Feedback text" type="error" />
+        </div>
+
+        <div>Disabled</div>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="state-disabled" disabled />
+          Text
+        </label>
+
+        <div>Disabled selected</div>
+        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <input tedi-radio type="radio" name="state-disabled-selected" checked disabled />
+          Text
+        </label>
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * Radio cards with primary and secondary variants side by side. Primary uses a filled background when selected, secondary uses an outline border.
+ */
+export const RadioCards: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="2" [gapY]="3">
+        <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+        <tedi-col>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-primary" checked />
+              Text
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-primary" />
+              Text
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-primary" />
+              Text
+            </label>
+          </div>
+        </tedi-col>
+        <tedi-col>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-secondary" checked />
+              Text
+            </label>
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-secondary" />
+              Text
+            </label>
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-secondary" />
+              Text
+            </label>
+          </div>
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * Radio cards in a grouped layout, joined like a button group with shared borders and no gap.
+ */
+export const RadioCardsGrouped: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="2" [gapY]="3">
+        <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+        <tedi-col>
+          <div style="display: inline-flex;">
+            <label tedi-radio-card variant="primary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-primary" />
+              Text
+            </label>
+            <label tedi-radio-card variant="primary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-primary" />
+              Text
+            </label>
+            <label tedi-radio-card variant="primary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-primary" checked />
+              Text
+            </label>
+            <label tedi-radio-card variant="primary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-primary" />
+              Text
+            </label>
+          </div>
+        </tedi-col>
+        <tedi-col>
+          <div style="display: inline-flex;">
+            <label tedi-radio-card variant="secondary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-secondary" />
+              Text
+            </label>
+            <label tedi-radio-card variant="secondary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-secondary" checked />
+              Text
+            </label>
+            <label tedi-radio-card variant="secondary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-secondary" />
+              Text
+            </label>
+            <label tedi-radio-card variant="secondary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-secondary" />
+              Text
+            </label>
+          </div>
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * Radio cards with a description below the label text.
+ */
+export const RadioCardsWithDescription: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="2" [gapY]="3">
+        <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+        <tedi-col>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-desc-primary" checked />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-desc-primary" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-desc-primary" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </tedi-col>
+        <tedi-col>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-desc-secondary" checked />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-desc-secondary" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-desc-secondary" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * Grouped radio cards with description text.
+ */
+export const RadioCardsGroupedWithDescription: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="2" [gapY]="3">
+        <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+        <tedi-col>
+          <div style="display: inline-flex;">
+            <label tedi-radio-card variant="primary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-desc-primary" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="primary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-desc-primary" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="primary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-desc-primary" checked />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </tedi-col>
+        <tedi-col>
+          <div style="display: inline-flex;">
+            <label tedi-radio-card variant="secondary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-desc-secondary" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="secondary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-desc-secondary" checked />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="secondary" [grouped]="true">
+              <input tedi-radio type="radio" name="card-group-desc-secondary" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * All visual states of the radio card component with primary and secondary variants side by side.
+ */
+export const RadioCardStates: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="3" [gapY]="3" alignItems="center">
+        <tedi-col><p tedi-text modifiers="bold">State</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+
+        <tedi-col>Default</tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-state-p-default" />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-state-s-default" />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col>Hover</tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="primary"
+            style="--_card-bg: var(--form-checkbox-radio-card-primary-hover-background); --_card-text: var(--form-checkbox-radio-card-primary-hover-text); --_card-border: var(--form-checkbox-radio-card-primary-hover-border);">
+            <input tedi-radio type="radio" name="card-state-p-hover" />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="secondary"
+            style="--_card-bg: var(--form-checkbox-radio-card-secondary-hover-background); --_card-text: var(--form-checkbox-radio-card-secondary-hover-text); --_card-border: var(--form-checkbox-radio-card-secondary-hover-border);">
+            <input tedi-radio type="radio" name="card-state-s-hover" />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col>Selected</tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-state-p-selected" checked />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-state-s-selected" checked />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col>Focus</tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="primary"
+            style="outline: 2px solid var(--form-input-border-active); outline-offset: 1px;">
+            <input tedi-radio type="radio" name="card-state-p-focus" />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="secondary"
+            style="outline: 2px solid var(--form-input-border-active); outline-offset: 1px;">
+            <input tedi-radio type="radio" name="card-state-s-focus" />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col>Disabled</tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-state-p-disabled" disabled />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-state-s-disabled" disabled />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col>Disabled selected</tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-state-p-disabled-selected" checked disabled />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-state-s-disabled-selected" checked disabled />
+            Text
+          </label>
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * Radio cards with icons before the label text.
+ */
+export const RadioCardsWithIcons: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-row [cols]="2" [gapY]="3">
+        <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+        <tedi-col>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-icon-primary" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              Text
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-icon-primary" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              Text
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-icon-primary" />
+              <tedi-icon name="home" [size]="18" />
+              Text
+            </label>
+          </div>
+        </tedi-col>
+        <tedi-col>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-icon-secondary" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              Text
+            </label>
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-icon-secondary" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              Text
+            </label>
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-icon-secondary" />
+              <tedi-icon name="home" [size]="18" />
+              Text
+            </label>
+          </div>
+        </tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Primary with description</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Secondary with description</p></tedi-col>
+        <tedi-col>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-icon-desc-primary" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-icon-desc-primary" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="card-icon-desc-primary" />
+              <tedi-icon name="home" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </tedi-col>
+        <tedi-col>
+          <div style="display: flex; gap: 8px;">
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-icon-desc-secondary" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-icon-desc-secondary" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+            <label tedi-radio-card variant="secondary">
+              <input tedi-radio type="radio" name="card-icon-desc-secondary" />
+              <tedi-icon name="home" [size]="18" />
+              <span style="display: flex; flex-direction: column;">
+                Text
+                <span tedi-text modifiers="small">Description</span>
+              </span>
+            </label>
+          </div>
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};

From 4505c0c8929c493fbcf148173409e6b1b1eeb9cf Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Fri, 27 Mar 2026 15:03:05 +0200
Subject: [PATCH 05/18] feat(radio, checkbox): marked community radio and
 checkbox deprecated #7

---
 .../checkbox-card-group/checkbox-card-group.component.ts   | 7 +++++--
 .../checkbox/checkbox-group/checkbox-group.component.ts    | 3 +++
 .../form/checkbox/checkbox/checkbox.component.ts           | 7 +++++--
 .../radio/radio-card-group/radio-card-group.component.ts   | 4 ++++
 .../form/radio/radio-group/radio-group.component.ts        | 7 +++++--
 community/components/form/radio/radio.stories.ts           | 5 +++++
 community/components/form/radio/radio/radio.component.ts   | 3 +++
 7 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/community/components/form/checkbox/checkbox-card-group/checkbox-card-group.component.ts b/community/components/form/checkbox/checkbox-card-group/checkbox-card-group.component.ts
index 43e00097c..52d0566e4 100644
--- a/community/components/form/checkbox/checkbox-card-group/checkbox-card-group.component.ts
+++ b/community/components/form/checkbox/checkbox-card-group/checkbox-card-group.component.ts
@@ -15,6 +15,9 @@ import { LabelComponent, FeedbackTextComponent } from "@tedi-design-system/angul
 import { CheckboxGroupComponent } from "../checkbox-group/checkbox-group.component";
 import { CheckboxComponent } from "../checkbox/checkbox.component";
 
+/**
+ * @deprecated Use Checkbox with CheckboxCard label from TEDI-ready instead. This component will be removed from future versions.
+ */
 @Component({
   standalone: true,
   selector: "tedi-checkbox-card-group",
@@ -64,8 +67,8 @@ export class CheckboxCardGroupComponent
   );
   private _controlDisabled = signal<boolean>(false);
 
-  private _onChange: (val: string[]) => void = () => {};
-  private _onTouched: (val: boolean) => void = () => {};
+  private _onChange: (val: string[]) => void = () => { };
+  private _onTouched: (val: boolean) => void = () => { };
 
   override groupDisabled = computed(() => {
     return this.disabled() || this._controlDisabled();
diff --git a/community/components/form/checkbox/checkbox-group/checkbox-group.component.ts b/community/components/form/checkbox/checkbox-group/checkbox-group.component.ts
index cd95588e7..8450cbdef 100644
--- a/community/components/form/checkbox/checkbox-group/checkbox-group.component.ts
+++ b/community/components/form/checkbox/checkbox-group/checkbox-group.component.ts
@@ -13,6 +13,9 @@ import {
 } from "@tedi-design-system/angular/tedi";
 import { generateUUID } from "@tedi-design-system/angular/tedi";
 
+/**
+ * @deprecated Use Checkbox from TEDI-ready instead. This component will be removed from future versions.
+ */
 @Component({
   standalone: true,
   selector: "tedi-checkbox-group",
diff --git a/community/components/form/checkbox/checkbox/checkbox.component.ts b/community/components/form/checkbox/checkbox/checkbox.component.ts
index 877c71fe1..ada2e7a50 100644
--- a/community/components/form/checkbox/checkbox/checkbox.component.ts
+++ b/community/components/form/checkbox/checkbox/checkbox.component.ts
@@ -23,6 +23,9 @@ import { generateUUID } from "@tedi-design-system/angular/tedi";
 
 export type CheckboxSize = "default" | "large";
 
+/**
+ * @deprecated Use Checkbox from TEDI-ready instead. This component will be removed from future versions.
+ */
 @Component({
   standalone: true,
   selector: "tedi-checkbox",
@@ -84,8 +87,8 @@ export class CheckboxComponent implements ControlValueAccessor, OnInit {
     optional: true,
   });
 
-  private _onChange: (val: boolean) => void = () => {};
-  _onTouched: () => void = () => {};
+  private _onChange: (val: boolean) => void = () => { };
+  _onTouched: () => void = () => { };
 
   feedbackTextId = computed(() => {
     if (this.feedbackText()) {
diff --git a/community/components/form/radio/radio-card-group/radio-card-group.component.ts b/community/components/form/radio/radio-card-group/radio-card-group.component.ts
index 93c882790..7abc016c1 100644
--- a/community/components/form/radio/radio-card-group/radio-card-group.component.ts
+++ b/community/components/form/radio/radio-card-group/radio-card-group.component.ts
@@ -9,6 +9,10 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { ChoiceGroupDirective } from "../../choicegroup/choicegroup.directive";
 import { LabelComponent, FeedbackTextComponent } from "@tedi-design-system/angular/tedi";
 import { RadioGroupComponent } from "../radio-group/radio-group.component";
+
+/**
+ * @deprecated Use Radio with RadioCard label from TEDI-ready instead. This component will be removed from future versions.
+ */
 @Component({
   standalone: true,
   selector: "tedi-radio-card-group",
diff --git a/community/components/form/radio/radio-group/radio-group.component.ts b/community/components/form/radio/radio-group/radio-group.component.ts
index 82819c9af..e3750c014 100644
--- a/community/components/form/radio/radio-group/radio-group.component.ts
+++ b/community/components/form/radio/radio-group/radio-group.component.ts
@@ -14,6 +14,9 @@ import { ComponentInputs, LabelComponent, FeedbackTextComponent } from "@tedi-de
 
 export type RadioGroupSize = "default" | "large";
 
+/**
+ * @deprecated Use Radio from TEDI-ready instead. This component will be removed from future versions.
+ */
 @Component({
   selector: "tedi-radio-group",
   standalone: true,
@@ -87,8 +90,8 @@ export class RadioGroupComponent implements ControlValueAccessor {
   });
   groupValue = this._value.asReadonly();
 
-  private _onChange: (val: RadioValue) => void = () => {};
-  private _onTouched: (val: boolean) => void = () => {};
+  private _onChange: (val: RadioValue) => void = () => { };
+  private _onTouched: (val: boolean) => void = () => { };
 
   writeValue(value: RadioValue | null): void {
     this._value.set(value);
diff --git a/community/components/form/radio/radio.stories.ts b/community/components/form/radio/radio.stories.ts
index 9400daefc..495d5f87b 100644
--- a/community/components/form/radio/radio.stories.ts
+++ b/community/components/form/radio/radio.stories.ts
@@ -17,6 +17,11 @@ export default {
   subcomponents: {
     RadioComponent,
   },
+  parameters: {
+    status: {
+      type: ["existsInTediReady"],
+    },
+  },
   args: {
     size: "default",
     direction: "column",
diff --git a/community/components/form/radio/radio/radio.component.ts b/community/components/form/radio/radio/radio.component.ts
index d282c85fc..1072e056b 100644
--- a/community/components/form/radio/radio/radio.component.ts
+++ b/community/components/form/radio/radio/radio.component.ts
@@ -19,6 +19,9 @@ import { generateUUID } from "@tedi-design-system/angular/tedi";
 
 export type RadioValue = string;
 
+/**
+ * @deprecated Use Radio from TEDI-ready instead. This component will be removed from future versions.
+ */
 @Component({
   selector: "tedi-radio",
   imports: [FeedbackTextComponent],

From ef1d2ec78ceda123e243da3c09ecdd27a2d45629 Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Thu, 2 Apr 2026 16:55:07 +0300
Subject: [PATCH 06/18] feat(checkbox): changes from design review #222

---
 .../checkbox-card-group.component.scss        |   5 +
 .../checkbox-card-group.component.spec.ts     |  50 ++
 .../checkbox-card-group.component.ts          |  18 +
 .../checkbox-card.component.html              |   4 +
 .../checkbox-card.component.scss              |  15 +-
 .../checkbox-card.component.spec.ts           |  24 +-
 .../checkbox-card/checkbox-card.component.ts  |   2 +-
 .../checkbox-group.component.html             |   9 +
 .../checkbox-group.component.scss             |  23 +
 .../checkbox-group.component.spec.ts          | 104 +++
 .../checkbox-group.component.ts               |  33 +
 .../form/checkbox/checkbox.component.scss     |   5 +
 .../form/checkbox/checkbox.stories.ts         | 617 +++++++++---------
 tedi/components/form/index.ts                 |   2 +
 14 files changed, 603 insertions(+), 308 deletions(-)
 create mode 100644 tedi/components/form/checkbox-card-group/checkbox-card-group.component.scss
 create mode 100644 tedi/components/form/checkbox-card-group/checkbox-card-group.component.spec.ts
 create mode 100644 tedi/components/form/checkbox-card-group/checkbox-card-group.component.ts
 create mode 100644 tedi/components/form/checkbox-card/checkbox-card.component.html
 create mode 100644 tedi/components/form/checkbox-group/checkbox-group.component.html
 create mode 100644 tedi/components/form/checkbox-group/checkbox-group.component.scss
 create mode 100644 tedi/components/form/checkbox-group/checkbox-group.component.spec.ts
 create mode 100644 tedi/components/form/checkbox-group/checkbox-group.component.ts

diff --git a/tedi/components/form/checkbox-card-group/checkbox-card-group.component.scss b/tedi/components/form/checkbox-card-group/checkbox-card-group.component.scss
new file mode 100644
index 000000000..84cc5c9e8
--- /dev/null
+++ b/tedi/components/form/checkbox-card-group/checkbox-card-group.component.scss
@@ -0,0 +1,5 @@
+.tedi-checkbox-card-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--form-checkbox-radio-card-gutter);
+}
diff --git a/tedi/components/form/checkbox-card-group/checkbox-card-group.component.spec.ts b/tedi/components/form/checkbox-card-group/checkbox-card-group.component.spec.ts
new file mode 100644
index 000000000..63f8b6996
--- /dev/null
+++ b/tedi/components/form/checkbox-card-group/checkbox-card-group.component.spec.ts
@@ -0,0 +1,50 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { CheckboxCardGroupComponent } from "./checkbox-card-group.component";
+import { CheckboxCardComponent } from "../checkbox-card/checkbox-card.component";
+import { CheckboxComponent } from "../checkbox/checkbox.component";
+
+@Component({
+  standalone: true,
+  imports: [CheckboxCardGroupComponent, CheckboxCardComponent, CheckboxComponent],
+  template: `
+    <tedi-checkbox-card-group>
+      <label tedi-checkbox-card variant="primary">
+        <input tedi-checkbox type="checkbox" />
+        Option 1
+      </label>
+      <label tedi-checkbox-card variant="primary">
+        <input tedi-checkbox type="checkbox" />
+        Option 2
+      </label>
+    </tedi-checkbox-card-group>
+  `,
+})
+class TestHostComponent {}
+
+describe("CheckboxCardGroupComponent", () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let groupElement: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    });
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    groupElement = fixture.nativeElement.querySelector(
+      "tedi-checkbox-card-group"
+    );
+  });
+
+  it("should create component", () => {
+    expect(groupElement).toBeTruthy();
+    expect(groupElement.classList).toContain("tedi-checkbox-card-group");
+  });
+
+  it("should project card content", () => {
+    const cards = groupElement.querySelectorAll("label[tedi-checkbox-card]");
+    expect(cards.length).toBe(2);
+  });
+});
diff --git a/tedi/components/form/checkbox-card-group/checkbox-card-group.component.ts b/tedi/components/form/checkbox-card-group/checkbox-card-group.component.ts
new file mode 100644
index 000000000..3cbea865b
--- /dev/null
+++ b/tedi/components/form/checkbox-card-group/checkbox-card-group.component.ts
@@ -0,0 +1,18 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "tedi-checkbox-card-group",
+  template: "<ng-content />",
+  styleUrl: "./checkbox-card-group.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "tedi-checkbox-card-group",
+  },
+})
+export class CheckboxCardGroupComponent {}
diff --git a/tedi/components/form/checkbox-card/checkbox-card.component.html b/tedi/components/form/checkbox-card/checkbox-card.component.html
new file mode 100644
index 000000000..b09ab35fe
--- /dev/null
+++ b/tedi/components/form/checkbox-card/checkbox-card.component.html
@@ -0,0 +1,4 @@
+<div class="tedi-checkbox-card__content">
+  <ng-content />
+</div>
+<ng-content select="tedi-feedback-text" />
diff --git a/tedi/components/form/checkbox-card/checkbox-card.component.scss b/tedi/components/form/checkbox-card/checkbox-card.component.scss
index 1c646efd7..34e048591 100644
--- a/tedi/components/form/checkbox-card/checkbox-card.component.scss
+++ b/tedi/components/form/checkbox-card/checkbox-card.component.scss
@@ -4,8 +4,9 @@ label[tedi-checkbox-card] {
   --_card-border: transparent;
 
   display: inline-flex;
-  gap: var(--form-checkbox-radio-card-inner-spacing);
+  flex-direction: column;
   align-items: flex-start;
+  min-height: var(--form-input-height);
   padding: var(--form-checkbox-radio-card-checkbox-padding-y) var(--form-checkbox-radio-card-checkbox-padding-x);
   font-family: var(--family-default);
   font-size: var(--body-regular-size);
@@ -24,7 +25,17 @@ label[tedi-checkbox-card] {
   input[tedi-checkbox],
   tedi-icon {
     flex-shrink: 0;
-    margin-top: calc(var(--form-checkbox-radio-card-checkbox-indicator-padding-y) - var(--form-checkbox-radio-card-checkbox-padding-y));
+  }
+
+  .tedi-checkbox-card__content {
+    display: flex;
+    gap: var(--form-checkbox-radio-card-inner-spacing);
+    align-items: center;
+  }
+
+  > .tedi-feedback-text {
+    padding-left: calc(var(--form-checkbox-radio-size-responsive) + var(--form-checkbox-radio-card-inner-spacing));
+    color: inherit;
   }
 
   input[tedi-checkbox] {
diff --git a/tedi/components/form/checkbox-card/checkbox-card.component.spec.ts b/tedi/components/form/checkbox-card/checkbox-card.component.spec.ts
index 8dd7829a5..4320d15fd 100644
--- a/tedi/components/form/checkbox-card/checkbox-card.component.spec.ts
+++ b/tedi/components/form/checkbox-card/checkbox-card.component.spec.ts
@@ -5,19 +5,24 @@ import {
   CheckboxCardVariant,
 } from "./checkbox-card.component";
 import { CheckboxComponent } from "../checkbox/checkbox.component";
+import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
 
 @Component({
   standalone: true,
-  imports: [CheckboxCardComponent, CheckboxComponent],
+  imports: [CheckboxCardComponent, CheckboxComponent, FeedbackTextComponent],
   template: `
     <label tedi-checkbox-card [variant]="variant">
       <input tedi-checkbox type="checkbox" />
       Text
+      @if (showDescription) {
+        <tedi-feedback-text text="Description" />
+      }
     </label>
   `,
 })
 class TestHostComponent {
   variant: CheckboxCardVariant = "primary";
+  showDescription = false;
 }
 
 describe("CheckboxCardComponent", () => {
@@ -57,4 +62,21 @@ describe("CheckboxCardComponent", () => {
     const input = labelElement.querySelector('input[type="checkbox"]');
     expect(input).toBeTruthy();
   });
+
+  it("should project content into content wrapper", () => {
+    const content = labelElement.querySelector(
+      ".tedi-checkbox-card__content"
+    );
+    expect(content).toBeTruthy();
+    const input = content?.querySelector('input[type="checkbox"]');
+    expect(input).toBeTruthy();
+  });
+
+  it("should project feedback text as description", () => {
+    fixture.componentInstance.showDescription = true;
+    fixture.detectChanges();
+    const feedbackText = labelElement.querySelector("tedi-feedback-text");
+    expect(feedbackText).toBeTruthy();
+    expect(feedbackText?.parentElement).toBe(labelElement);
+  });
 });
diff --git a/tedi/components/form/checkbox-card/checkbox-card.component.ts b/tedi/components/form/checkbox-card/checkbox-card.component.ts
index 077636779..6aac99124 100644
--- a/tedi/components/form/checkbox-card/checkbox-card.component.ts
+++ b/tedi/components/form/checkbox-card/checkbox-card.component.ts
@@ -10,7 +10,7 @@ export type CheckboxCardVariant = "primary" | "secondary";
 @Component({
   standalone: true,
   selector: "label[tedi-checkbox-card]",
-  template: "<ng-content />",
+  templateUrl: "./checkbox-card.component.html",
   styleUrl: "./checkbox-card.component.scss",
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/tedi/components/form/checkbox-group/checkbox-group.component.html b/tedi/components/form/checkbox-group/checkbox-group.component.html
new file mode 100644
index 000000000..c4ef9e35c
--- /dev/null
+++ b/tedi/components/form/checkbox-group/checkbox-group.component.html
@@ -0,0 +1,9 @@
+@if (label()) {
+  <p class="tedi-checkbox-group__label" tedi-text color="secondary">{{ label() }}</p>
+}
+<div class="tedi-checkbox-group__checks" [class.tedi-checkbox-group__checks--vertical]="direction() === 'vertical'">
+  <ng-content />
+</div>
+<div class="tedi-checkbox-group__subtexts">
+  <ng-content select="tedi-feedback-text" />
+</div>
diff --git a/tedi/components/form/checkbox-group/checkbox-group.component.scss b/tedi/components/form/checkbox-group/checkbox-group.component.scss
new file mode 100644
index 000000000..4c61d2fa8
--- /dev/null
+++ b/tedi/components/form/checkbox-group/checkbox-group.component.scss
@@ -0,0 +1,23 @@
+.tedi-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-checkbox-radio-label-gutter-y);
+
+  &__checks {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--form-checkbox-radio-gutter-y) var(--form-checkbox-radio-gutter-x);
+
+    &--vertical {
+      flex-direction: column;
+    }
+  }
+
+  &__subtexts {
+    padding-top: var(--form-field-inner-spacing-sm);
+
+    &:empty {
+      display: none;
+    }
+  }
+}
diff --git a/tedi/components/form/checkbox-group/checkbox-group.component.spec.ts b/tedi/components/form/checkbox-group/checkbox-group.component.spec.ts
new file mode 100644
index 000000000..5b74de949
--- /dev/null
+++ b/tedi/components/form/checkbox-group/checkbox-group.component.spec.ts
@@ -0,0 +1,104 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import {
+  CheckboxGroupComponent,
+  CheckboxGroupDirection,
+} from "./checkbox-group.component";
+import { CheckboxComponent } from "../checkbox/checkbox.component";
+import { LabelComponent } from "../label/label.component";
+import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
+
+@Component({
+  standalone: true,
+  imports: [
+    CheckboxGroupComponent,
+    CheckboxComponent,
+    LabelComponent,
+    FeedbackTextComponent,
+  ],
+  template: `
+    <tedi-checkbox-group [label]="label" [direction]="direction">
+      <label tedi-label color="primary" class="flex align-items-center gap-2">
+        <input tedi-checkbox type="checkbox" />
+        Option 1
+      </label>
+      <label tedi-label color="primary" class="flex align-items-center gap-2">
+        <input tedi-checkbox type="checkbox" />
+        Option 2
+      </label>
+      @if (showFeedback) {
+        <tedi-feedback-text text="Hint text" />
+      }
+    </tedi-checkbox-group>
+  `,
+})
+class TestHostComponent {
+  label?: string;
+  direction: CheckboxGroupDirection = "horizontal";
+  showFeedback = false;
+}
+
+describe("CheckboxGroupComponent", () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let groupElement: HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    });
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    groupElement = fixture.nativeElement.querySelector("tedi-checkbox-group");
+  });
+
+  it("should create component", () => {
+    expect(groupElement).toBeTruthy();
+    expect(groupElement.classList).toContain("tedi-checkbox-group");
+  });
+
+  it("should not render label when not provided", () => {
+    const label = groupElement.querySelector(".tedi-checkbox-group__label");
+    expect(label).toBeFalsy();
+  });
+
+  it("should render label when provided", () => {
+    fixture.componentInstance.label = "Group Label";
+    fixture.detectChanges();
+    const label = groupElement.querySelector(".tedi-checkbox-group__label");
+    expect(label).toBeTruthy();
+    expect(label?.textContent?.trim()).toBe("Group Label");
+  });
+
+  it("should use horizontal direction by default", () => {
+    const checks = groupElement.querySelector(".tedi-checkbox-group__checks");
+    expect(checks?.classList).not.toContain(
+      "tedi-checkbox-group__checks--vertical"
+    );
+  });
+
+  it("should apply vertical direction class", () => {
+    fixture.componentInstance.direction = "vertical";
+    fixture.detectChanges();
+    const checks = groupElement.querySelector(".tedi-checkbox-group__checks");
+    expect(checks?.classList).toContain(
+      "tedi-checkbox-group__checks--vertical"
+    );
+  });
+
+  it("should project checkbox content into checks container", () => {
+    const checks = groupElement.querySelector(".tedi-checkbox-group__checks");
+    const inputs = checks?.querySelectorAll('input[type="checkbox"]');
+    expect(inputs?.length).toBe(2);
+  });
+
+  it("should project feedback text into subtexts container", () => {
+    fixture.componentInstance.showFeedback = true;
+    fixture.detectChanges();
+    const subtexts = groupElement.querySelector(
+      ".tedi-checkbox-group__subtexts"
+    );
+    const feedbackText = subtexts?.querySelector("tedi-feedback-text");
+    expect(feedbackText).toBeTruthy();
+  });
+});
diff --git a/tedi/components/form/checkbox-group/checkbox-group.component.ts b/tedi/components/form/checkbox-group/checkbox-group.component.ts
new file mode 100644
index 000000000..c399d501d
--- /dev/null
+++ b/tedi/components/form/checkbox-group/checkbox-group.component.ts
@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  ViewEncapsulation,
+} from "@angular/core";
+import { TextComponent } from "../../base/text/text.component";
+
+export type CheckboxGroupDirection = "horizontal" | "vertical";
+
+@Component({
+  standalone: true,
+  imports: [TextComponent],
+  selector: "tedi-checkbox-group",
+  templateUrl: "./checkbox-group.component.html",
+  styleUrl: "./checkbox-group.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "tedi-checkbox-group",
+  },
+})
+export class CheckboxGroupComponent {
+  /**
+   * Label text displayed above the checkbox group.
+   */
+  readonly label = input<string>();
+  /**
+   * Layout direction of the checkboxes.
+   * @default horizontal
+   */
+  readonly direction = input<CheckboxGroupDirection>("horizontal");
+}
diff --git a/tedi/components/form/checkbox/checkbox.component.scss b/tedi/components/form/checkbox/checkbox.component.scss
index 099c1ac07..0fc473f0a 100644
--- a/tedi/components/form/checkbox/checkbox.component.scss
+++ b/tedi/components/form/checkbox/checkbox.component.scss
@@ -98,3 +98,8 @@ input[tedi-checkbox][type="checkbox"] {
     height: var(--form-checkbox-radio-size-large);
   }
 }
+
+label:has(input[tedi-checkbox]) + tedi-feedback-text {
+  padding-left: var(--form-checkbox-radio-size-responsive);
+  margin-left: var(--form-checkbox-radio-inner-spacing);
+}
diff --git a/tedi/components/form/checkbox/checkbox.stories.ts b/tedi/components/form/checkbox/checkbox.stories.ts
index 172b4d99c..4a95d9e94 100644
--- a/tedi/components/form/checkbox/checkbox.stories.ts
+++ b/tedi/components/form/checkbox/checkbox.stories.ts
@@ -6,6 +6,8 @@ import {
 } from "@storybook/angular";
 import { CheckboxComponent } from "./checkbox.component";
 import { CheckboxCardComponent } from "../checkbox-card/checkbox-card.component";
+import { CheckboxGroupComponent } from "../checkbox-group/checkbox-group.component";
+import { CheckboxCardGroupComponent } from "../checkbox-card-group/checkbox-card-group.component";
 import { RowComponent } from "../../helpers/grid/row/row.component";
 import { ColComponent } from "../../helpers/grid/col/col.component";
 import { TextComponent } from "../../base/text/text.component";
@@ -26,13 +28,15 @@ type StoryCheckboxComponent = CheckboxComponent & {
  * <a href="https://www.tedi.ee/1ee8444b7/p/796203-checkbox" target="_blank">Zeroheight ↗</a>
  */
 export default {
-  title: "TEDI-Ready/Components/Form/Choicegroup/Checkbox",
+  title: "TEDI-Ready/Components/Form/Checkbox",
   component: CheckboxComponent,
   decorators: [
     moduleMetadata({
       imports: [
         CheckboxComponent,
         CheckboxCardComponent,
+        CheckboxGroupComponent,
+        CheckboxCardGroupComponent,
         RowComponent,
         ColComponent,
         TextComponent,
@@ -91,20 +95,23 @@ export default {
 } as Meta<StoryCheckboxComponent>;
 
 export const Default: StoryObj<StoryCheckboxComponent & { disabled: boolean }> =
-  {
-    args: {
-      size: "default",
-      invalid: false,
-      disabled: false,
-      indeterminate: false,
-    },
-    render: (args) => ({
-      props: args,
-      template: `
-      <input tedi-checkbox type="checkbox" ${argsToTemplate(args)} />
+{
+  args: {
+    size: "default",
+    invalid: false,
+    disabled: false,
+    indeterminate: false,
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <label tedi-label color="primary" class="flex align-items-center gap-2">
+        <input tedi-checkbox type="checkbox" ${argsToTemplate(args)} />
+        Text
+      </label>
     `,
-    }),
-  };
+  }),
+};
 
 /**
  * Default size is used on desktop, large size is applied automatically on mobile screen sizes.
@@ -128,21 +135,20 @@ export const Vertical: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <p tedi-text color="secondary">Label</p>
-      <tedi-row [cols]="1" [gapY]="1">
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+      <tedi-checkbox-group label="Label" direction="vertical">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
           Text
         </label>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
           Text
         </label>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" />
           Text
         </label>
-      </tedi-row>
+      </tedi-checkbox-group>
     `,
   }),
 };
@@ -151,21 +157,20 @@ export const Horizontal: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <p tedi-text color="secondary">Label</p>
-      <div style="display: flex; align-items: center; gap: 12px;">
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+      <tedi-checkbox-group label="Label">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
           Text
         </label>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
           Text
         </label>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" />
           Text
         </label>
-      </div>
+      </tedi-checkbox-group>
     `,
   }),
 };
@@ -203,33 +208,34 @@ export const VerticalTree: StoryObj<CheckboxComponent> = {
     return {
       props: args,
       template: `
-        <p tedi-text color="secondary">Label</p>
-        <label tedi-label id="parentCB" color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-          <input tedi-checkbox type="checkbox" />
-          Text
-        </label>
-        <tedi-row id="childrenCB" [cols]="1" [gapY]="1" style="padding-left: 32px;">
-          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-            <input tedi-checkbox type="checkbox" checked />
-            Text
-          </label>
-          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-            <input tedi-checkbox type="checkbox" checked />
-            Text
-          </label>
-          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <tedi-checkbox-group label="Label" direction="vertical">
+          <label tedi-label id="parentCB" color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
             Text
           </label>
-          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-            <input tedi-checkbox type="checkbox" />
-            Text
-          </label>
-          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-            <input tedi-checkbox type="checkbox" />
-            Text
-          </label>
-        </tedi-row>
+          <tedi-checkbox-group id="childrenCB" direction="vertical" style="padding-left: 32px;">
+            <label tedi-label color="primary" class="flex align-items-center gap-2">
+              <input tedi-checkbox type="checkbox" checked />
+              Text
+            </label>
+            <label tedi-label color="primary" class="flex align-items-center gap-2">
+              <input tedi-checkbox type="checkbox" checked />
+              Text
+            </label>
+            <label tedi-label color="primary" class="flex align-items-center gap-2">
+              <input tedi-checkbox type="checkbox" />
+              Text
+            </label>
+            <label tedi-label color="primary" class="flex align-items-center gap-2">
+              <input tedi-checkbox type="checkbox" />
+              Text
+            </label>
+            <label tedi-label color="primary" class="flex align-items-center gap-2">
+              <input tedi-checkbox type="checkbox" />
+              Text
+            </label>
+          </tedi-checkbox-group>
+        </tedi-checkbox-group>
       `,
     };
   },
@@ -240,23 +246,31 @@ export const Separate: StoryObj<CheckboxComponent> = {
     props: args,
     template: `
       <tedi-row [cols]="1" [gapY]="4">
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-          <input tedi-checkbox type="checkbox" />
-          Text
-        </label>
-        <div style="display: inline-flex; align-items: center; gap: 8px;">
-          <input tedi-checkbox id="checkbox-required" type="checkbox" />
-          <label tedi-label for="checkbox-required" color="primary" [required]="true">
+        <div>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
             Text
           </label>
+          <tedi-feedback-text text="Hint text" />
         </div>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <div>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" [invalid]="true" />
+            Text
+          </label>
+          <tedi-feedback-text text="Feedback text" type="error" />
+        </div>
+        <label tedi-label color="primary" [required]="true" class="flex align-items-center gap-2">
+          <input tedi-checkbox type="checkbox" />
+          Text
+        </label>
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" />
           <tedi-icon name="stethoscope" [size]="16" />
           Text
         </label>
-        <div style="display: inline-flex; align-items: center; gap: 4px;">
-          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <div class="flex align-items-center gap-1">
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
             Text
           </label>
@@ -269,18 +283,12 @@ export const Separate: StoryObj<CheckboxComponent> = {
             </tedi-tooltip-content>
           </tedi-tooltip>
         </div>
-        <div style="display: inline-flex; gap: 8px;">
-          <div>
-            <input tedi-checkbox id="checkbox-with-desc" type="checkbox" />
-          </div>
-          <div>
-            <label tedi-label for="checkbox-with-desc" color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              Text
-            </label>
-            <p tedi-text color="secondary">
-              Description
-            </p>
-          </div>
+        <div>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+          <tedi-feedback-text text="Description" />
         </div>
       </tedi-row>
     `,
@@ -292,78 +300,66 @@ export const Group: StoryObj<CheckboxComponent> = {
     props: args,
     template: `
       <tedi-row [cols]="2" [gapY]="3">
-        <div>
-          <p tedi-text color="secondary">Label</p>
-          <tedi-row [cols]="1" [gapY]="1">
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-          </tedi-row>
+        <tedi-checkbox-group label="Label" direction="vertical">
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
           <tedi-feedback-text text="Hint text" />
-        </div>
-        <div>
-          <p tedi-text color="secondary">Label</p>
-          <tedi-row [cols]="1" [gapY]="1">
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-          </tedi-row>
+        </tedi-checkbox-group>
+        <tedi-checkbox-group label="Label" direction="vertical">
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
           <tedi-feedback-text text="Feedback text" type="error" />
-        </div>
-        <div>
-          <p tedi-text color="secondary">Label</p>
-          <div style="display: flex; align-items: center; gap: 12px;">
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-          </div>
+        </tedi-checkbox-group>
+        <tedi-checkbox-group label="Label">
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
           <tedi-feedback-text text="Hint text" />
-        </div>
-        <div>
-          <p tedi-text color="secondary">Label</p>
-          <div style="display: flex; align-items: center; gap: 12px;">
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-            <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
-              <input tedi-checkbox type="checkbox" />
-              Text
-            </label>
-          </div>
+        </tedi-checkbox-group>
+        <tedi-checkbox-group label="Label">
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
           <tedi-feedback-text text="Feedback text" type="error" />
-        </div>
+        </tedi-checkbox-group>
       </tedi-row>
     `,
   }),
@@ -373,25 +369,43 @@ export const Group: StoryObj<CheckboxComponent> = {
  * All visual states of the checkbox component.
  */
 export const States: StoryObj<CheckboxComponent> = {
+  parameters: {
+    pseudo: {
+      hover: "#Hover",
+      active: "#Active",
+    },
+  },
   render: (args) => ({
     props: args,
     template: `
       <tedi-row [cols]="2" [gapY]="3">
         <div>Default</div>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" />
           Text
         </label>
 
+        <div>Hover</div>
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
+          <input tedi-checkbox type="checkbox" id="Hover" />
+          Text
+        </label>
+
         <div>Selected</div>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
           Text
         </label>
 
+        <div>Active</div>
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
+          <input tedi-checkbox type="checkbox" checked id="Active" />
+          Text
+        </label>
+
         <div>Error</div>
         <div>
-          <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+          <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" [invalid]="true" />
             Text
           </label>
@@ -399,19 +413,19 @@ export const States: StoryObj<CheckboxComponent> = {
         </div>
 
         <div>Disabled</div>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" disabled />
           Text
         </label>
 
         <div>Disabled selected</div>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked disabled />
           Text
         </label>
 
         <div>Indeterminate</div>
-        <label tedi-label color="primary" style="display: inline-flex; align-items: center; gap: 8px;">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" [indeterminate]="true" />
           Text
         </label>
@@ -427,10 +441,10 @@ export const CheckboxCards: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <div style="display: flex; flex-direction: column; gap: 24px;">
+      <div class="flex flex-column gap-4">
         <div>
           <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
-          <div style="display: flex; gap: 8px;">
+          <tedi-checkbox-card-group>
             <label tedi-checkbox-card variant="primary">
               <input tedi-checkbox type="checkbox" checked />
               Text
@@ -443,11 +457,11 @@ export const CheckboxCards: StoryObj<CheckboxComponent> = {
               <input tedi-checkbox type="checkbox" />
               Text
             </label>
-          </div>
+          </tedi-checkbox-card-group>
         </div>
         <div>
           <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary</p>
-          <div style="display: flex; gap: 8px;">
+          <tedi-checkbox-card-group>
             <label tedi-checkbox-card variant="secondary">
               <input tedi-checkbox type="checkbox" checked />
               Text
@@ -460,7 +474,7 @@ export const CheckboxCards: StoryObj<CheckboxComponent> = {
               <input tedi-checkbox type="checkbox" />
               Text
             </label>
-          </div>
+          </tedi-checkbox-card-group>
         </div>
       </div>
     `,
@@ -474,58 +488,145 @@ export const CheckboxCardsWithDescription: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <div style="display: flex; flex-direction: column; gap: 24px;">
+      <div class="flex flex-column gap-4">
         <div>
           <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
-          <div style="display: flex; gap: 8px;">
+          <tedi-checkbox-card-group>
             <label tedi-checkbox-card variant="primary">
               <input tedi-checkbox type="checkbox" checked />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
+              Text
+              <tedi-feedback-text text="Description" />
             </label>
             <label tedi-checkbox-card variant="primary">
               <input tedi-checkbox type="checkbox" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
+              Text
+              <tedi-feedback-text text="Description" />
             </label>
             <label tedi-checkbox-card variant="primary">
               <input tedi-checkbox type="checkbox" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
+              Text
+              <tedi-feedback-text text="Description" />
             </label>
-          </div>
+          </tedi-checkbox-card-group>
         </div>
         <div>
           <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary</p>
-          <div style="display: flex; gap: 8px;">
+          <tedi-checkbox-card-group>
             <label tedi-checkbox-card variant="secondary">
               <input tedi-checkbox type="checkbox" checked />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
+              Text
+              <tedi-feedback-text text="Description" />
             </label>
             <label tedi-checkbox-card variant="secondary">
               <input tedi-checkbox type="checkbox" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
+              Text
+              <tedi-feedback-text text="Description" />
             </label>
             <label tedi-checkbox-card variant="secondary">
               <input tedi-checkbox type="checkbox" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
+              Text
+              <tedi-feedback-text text="Description" />
             </label>
-          </div>
+          </tedi-checkbox-card-group>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Checkbox cards with icons before the label text.
+ */
+export const CheckboxCardsWithIcons: StoryObj<CheckboxComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div class="flex flex-column gap-4">
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
+          <tedi-checkbox-card-group>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="home" [size]="18" />
+              Text
+            </label>
+          </tedi-checkbox-card-group>
+        </div>
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary</p>
+          <tedi-checkbox-card-group>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              Text
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="home" [size]="18" />
+              Text
+            </label>
+          </tedi-checkbox-card-group>
+        </div>
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary with description</p>
+          <tedi-checkbox-card-group>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              Text
+              <tedi-feedback-text text="Description" />
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              Text
+              <tedi-feedback-text text="Description" />
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="home" [size]="18" />
+              Text
+              <tedi-feedback-text text="Description" />
+            </label>
+          </tedi-checkbox-card-group>
+        </div>
+        <div>
+          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary with description</p>
+          <tedi-checkbox-card-group>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" checked />
+              <tedi-icon name="apartment" [size]="18" />
+              Text
+              <tedi-feedback-text text="Description" />
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="stethoscope" [size]="18" />
+              Text
+              <tedi-feedback-text text="Description" />
+            </label>
+            <label tedi-checkbox-card variant="secondary">
+              <input tedi-checkbox type="checkbox" />
+              <tedi-icon name="home" [size]="18" />
+              Text
+              <tedi-feedback-text text="Description" />
+            </label>
+          </tedi-checkbox-card-group>
         </div>
       </div>
     `,
@@ -536,10 +637,17 @@ export const CheckboxCardsWithDescription: StoryObj<CheckboxComponent> = {
  * All visual states of the checkbox card component for both primary and secondary variants.
  */
 export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
+  parameters: {
+    pseudo: {
+      hover: ["#PrimaryHover", "#SecondaryHover"],
+      active: ["#PrimaryActive", "#SecondaryActive"],
+      focusVisible: ["#PrimaryFocus", "#SecondaryFocus"],
+    },
+  },
   render: (args) => ({
     props: args,
     template: `
-      <div style="display: flex; flex-direction: column; gap: 24px;">
+      <div class="flex flex-column gap-4">
         <div>
           <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
           <tedi-row [cols]="2" [gapY]="3">
@@ -553,9 +661,8 @@ export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
 
             <tedi-col>Hover</tedi-col>
             <tedi-col>
-              <label tedi-checkbox-card variant="primary"
-                style="--_card-bg: var(--form-checkbox-radio-card-primary-hover-background); --_card-text: var(--form-checkbox-radio-card-primary-hover-text); --_card-border: var(--form-checkbox-radio-card-primary-hover-border);">
-                <input tedi-checkbox type="checkbox" />
+              <label tedi-checkbox-card variant="primary">
+                <input tedi-checkbox type="checkbox" id="PrimaryHover" />
                 Text
               </label>
             </tedi-col>
@@ -568,11 +675,18 @@ export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
               </label>
             </tedi-col>
 
+            <tedi-col>Active</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="primary">
+                <input tedi-checkbox type="checkbox" checked id="PrimaryActive" />
+                Text
+              </label>
+            </tedi-col>
+
             <tedi-col>Focus</tedi-col>
             <tedi-col>
-              <label tedi-checkbox-card variant="primary"
-                style="outline: 2px solid var(--form-input-border-active); outline-offset: 1px;">
-                <input tedi-checkbox type="checkbox" />
+              <label tedi-checkbox-card variant="primary">
+                <input tedi-checkbox type="checkbox" id="PrimaryFocus" />
                 Text
               </label>
             </tedi-col>
@@ -607,9 +721,8 @@ export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
 
             <tedi-col>Hover</tedi-col>
             <tedi-col>
-              <label tedi-checkbox-card variant="secondary"
-                style="--_card-bg: var(--form-checkbox-radio-card-secondary-hover-background); --_card-text: var(--form-checkbox-radio-card-secondary-hover-text); --_card-border: var(--form-checkbox-radio-card-secondary-hover-border);">
-                <input tedi-checkbox type="checkbox" />
+              <label tedi-checkbox-card variant="secondary">
+                <input tedi-checkbox type="checkbox" id="SecondaryHover" />
                 Text
               </label>
             </tedi-col>
@@ -622,11 +735,18 @@ export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
               </label>
             </tedi-col>
 
+            <tedi-col>Active</tedi-col>
+            <tedi-col>
+              <label tedi-checkbox-card variant="secondary">
+                <input tedi-checkbox type="checkbox" checked id="SecondaryActive" />
+                Text
+              </label>
+            </tedi-col>
+
             <tedi-col>Focus</tedi-col>
             <tedi-col>
-              <label tedi-checkbox-card variant="secondary"
-                style="outline: 2px solid var(--form-input-border-active); outline-offset: 1px;">
-                <input tedi-checkbox type="checkbox" />
+              <label tedi-checkbox-card variant="secondary">
+                <input tedi-checkbox type="checkbox" id="SecondaryFocus" />
                 Text
               </label>
             </tedi-col>
@@ -652,114 +772,3 @@ export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
     `,
   }),
 };
-
-/**
- * Checkbox cards with icons before the label text.
- */
-export const CheckboxCardsWithIcons: StoryObj<CheckboxComponent> = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 24px;">
-        <div>
-          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
-          <div style="display: flex; gap: 8px;">
-            <label tedi-checkbox-card variant="primary">
-              <input tedi-checkbox type="checkbox" checked />
-              <tedi-icon name="apartment" [size]="18" />
-              Text
-            </label>
-            <label tedi-checkbox-card variant="primary">
-              <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="stethoscope" [size]="18" />
-              Text
-            </label>
-            <label tedi-checkbox-card variant="primary">
-              <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="home" [size]="18" />
-              Text
-            </label>
-          </div>
-        </div>
-        <div>
-          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary</p>
-          <div style="display: flex; gap: 8px;">
-            <label tedi-checkbox-card variant="secondary">
-              <input tedi-checkbox type="checkbox" checked />
-              <tedi-icon name="apartment" [size]="18" />
-              Text
-            </label>
-            <label tedi-checkbox-card variant="secondary">
-              <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="stethoscope" [size]="18" />
-              Text
-            </label>
-            <label tedi-checkbox-card variant="secondary">
-              <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="home" [size]="18" />
-              Text
-            </label>
-          </div>
-        </div>
-        <div>
-          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary with description</p>
-          <div style="display: flex; gap: 8px;">
-            <label tedi-checkbox-card variant="primary">
-              <input tedi-checkbox type="checkbox" checked />
-              <tedi-icon name="apartment" [size]="18" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
-            </label>
-            <label tedi-checkbox-card variant="primary">
-              <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="stethoscope" [size]="18" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
-            </label>
-            <label tedi-checkbox-card variant="primary">
-              <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="home" [size]="18" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
-            </label>
-          </div>
-        </div>
-        <div>
-          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary with description</p>
-          <div style="display: flex; gap: 8px;">
-            <label tedi-checkbox-card variant="secondary">
-              <input tedi-checkbox type="checkbox" checked />
-              <tedi-icon name="apartment" [size]="18" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
-            </label>
-            <label tedi-checkbox-card variant="secondary">
-              <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="stethoscope" [size]="18" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
-            </label>
-            <label tedi-checkbox-card variant="secondary">
-              <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="home" [size]="18" />
-              <span style="display: flex; flex-direction: column;">
-                Text
-                <span tedi-text modifiers="small">Description</span>
-              </span>
-            </label>
-          </div>
-        </div>
-      </div>
-    `,
-  }),
-};
diff --git a/tedi/components/form/index.ts b/tedi/components/form/index.ts
index 49eef9ab7..0b2a1ccf8 100644
--- a/tedi/components/form/index.ts
+++ b/tedi/components/form/index.ts
@@ -1,5 +1,7 @@
 export * from "./checkbox/checkbox.component";
 export * from "./checkbox-card/checkbox-card.component";
+export * from "./checkbox-group/checkbox-group.component";
+export * from "./checkbox-card-group/checkbox-card-group.component";
 export * from "./date-picker/date-picker.component";
 export * from "./feedback-text/feedback-text.component";
 export * from "./label/label.component";

From beb3fe332e0d4c4ea49e95154736f090d096bccc Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Thu, 2 Apr 2026 17:23:33 +0300
Subject: [PATCH 07/18] feat(checkbox): fixed story layout, added correct
 height #222

---
 .../checkbox-card.component.scss              |   6 +-
 .../form/checkbox/checkbox.stories.ts         | 241 ++++++++----------
 2 files changed, 114 insertions(+), 133 deletions(-)

diff --git a/tedi/components/form/checkbox-card/checkbox-card.component.scss b/tedi/components/form/checkbox-card/checkbox-card.component.scss
index 34e048591..a011b369b 100644
--- a/tedi/components/form/checkbox-card/checkbox-card.component.scss
+++ b/tedi/components/form/checkbox-card/checkbox-card.component.scss
@@ -6,8 +6,8 @@ label[tedi-checkbox-card] {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
-  min-height: var(--form-input-height);
-  padding: var(--form-checkbox-radio-card-checkbox-padding-y) var(--form-checkbox-radio-card-checkbox-padding-x);
+  min-height: var(--form-field-height);
+  padding: calc(var(--form-checkbox-radio-card-checkbox-padding-y) - var(--borders-01)) var(--form-checkbox-radio-card-checkbox-padding-x);
   font-family: var(--family-default);
   font-size: var(--body-regular-size);
   line-height: var(--body-regular-line-height);
@@ -33,7 +33,7 @@ label[tedi-checkbox-card] {
     align-items: center;
   }
 
-  > .tedi-feedback-text {
+  >.tedi-feedback-text {
     padding-left: calc(var(--form-checkbox-radio-size-responsive) + var(--form-checkbox-radio-card-inner-spacing));
     color: inherit;
   }
diff --git a/tedi/components/form/checkbox/checkbox.stories.ts b/tedi/components/form/checkbox/checkbox.stories.ts
index 4a95d9e94..795886d61 100644
--- a/tedi/components/form/checkbox/checkbox.stories.ts
+++ b/tedi/components/form/checkbox/checkbox.stories.ts
@@ -379,31 +379,31 @@ export const States: StoryObj<CheckboxComponent> = {
     props: args,
     template: `
       <tedi-row [cols]="2" [gapY]="3">
-        <div>Default</div>
+        <strong>Default</strong>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" />
           Text
         </label>
 
-        <div>Hover</div>
+        <strong>Hover</strong>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" id="Hover" />
           Text
         </label>
 
-        <div>Selected</div>
+        <strong>Selected</strong>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
           Text
         </label>
 
-        <div>Active</div>
+        <strong>Active</strong>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked id="Active" />
           Text
         </label>
 
-        <div>Error</div>
+        <strong>Error</strong>
         <div>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" [invalid]="true" />
@@ -412,19 +412,19 @@ export const States: StoryObj<CheckboxComponent> = {
           <tedi-feedback-text text="Feedback text" type="error" />
         </div>
 
-        <div>Disabled</div>
+        <strong>Disabled</strong>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" disabled />
           Text
         </label>
 
-        <div>Disabled selected</div>
+        <strong>Disabled selected</strong>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked disabled />
           Text
         </label>
 
-        <div>Indeterminate</div>
+        <strong>Indeterminate</strong>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" [indeterminate]="true" />
           Text
@@ -647,128 +647,109 @@ export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="flex flex-column gap-4">
-        <div>
-          <p tedi-text color="secondary" style="margin-bottom: 8px;">Primary</p>
-          <tedi-row [cols]="2" [gapY]="3">
-            <tedi-col>Default</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="primary">
-                <input tedi-checkbox type="checkbox" />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Hover</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="primary">
-                <input tedi-checkbox type="checkbox" id="PrimaryHover" />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Selected</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="primary">
-                <input tedi-checkbox type="checkbox" checked />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Active</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="primary">
-                <input tedi-checkbox type="checkbox" checked id="PrimaryActive" />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Focus</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="primary">
-                <input tedi-checkbox type="checkbox" id="PrimaryFocus" />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Disabled</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="primary">
-                <input tedi-checkbox type="checkbox" disabled />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Disabled selected</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="primary">
-                <input tedi-checkbox type="checkbox" checked disabled />
-                Text
-              </label>
-            </tedi-col>
-          </tedi-row>
-        </div>
-        <div>
-          <p tedi-text color="secondary" style="margin-bottom: 8px;">Secondary</p>
-          <tedi-row [cols]="2" [gapY]="3">
-            <tedi-col>Default</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="secondary">
-                <input tedi-checkbox type="checkbox" />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Hover</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="secondary">
-                <input tedi-checkbox type="checkbox" id="SecondaryHover" />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Selected</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="secondary">
-                <input tedi-checkbox type="checkbox" checked />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Active</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="secondary">
-                <input tedi-checkbox type="checkbox" checked id="SecondaryActive" />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Focus</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="secondary">
-                <input tedi-checkbox type="checkbox" id="SecondaryFocus" />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Disabled</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="secondary">
-                <input tedi-checkbox type="checkbox" disabled />
-                Text
-              </label>
-            </tedi-col>
-
-            <tedi-col>Disabled selected</tedi-col>
-            <tedi-col>
-              <label tedi-checkbox-card variant="secondary">
-                <input tedi-checkbox type="checkbox" checked disabled />
-                Text
-              </label>
-            </tedi-col>
-          </tedi-row>
-        </div>
-      </div>
+      <tedi-row [cols]="3" [gapY]="3">
+        <tedi-col></tedi-col>
+        <tedi-col><strong>Primary</strong></tedi-col>
+        <tedi-col><strong>Secondary</strong></tedi-col>
+
+        <tedi-col><strong>Default</strong></tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col><strong>Hover</strong></tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" id="PrimaryHover" />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" id="SecondaryHover" />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col><strong>Selected</strong></tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" checked />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" checked />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col><strong>Active</strong></tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" checked id="PrimaryActive" />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" checked id="SecondaryActive" />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col><strong>Focus</strong></tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" id="PrimaryFocus" />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" id="SecondaryFocus" />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col><strong>Disabled</strong></tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" disabled />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" disabled />
+            Text
+          </label>
+        </tedi-col>
+
+        <tedi-col><strong>Disabled selected</strong></tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" checked disabled />
+            Text
+          </label>
+        </tedi-col>
+        <tedi-col>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" checked disabled />
+            Text
+          </label>
+        </tedi-col>
+      </tedi-row>
     `,
   }),
 };

From 3b92e3c5a47c080039f1dc922aee1204b8edb3fb Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Tue, 7 Apr 2026 10:28:05 +0300
Subject: [PATCH 08/18] feat(filter,status-indicator): new filter component,
 status-indicator #329

---
 .../contributing/references/best-practices.md |   39 +-
 CLAUDE.md                                     |    1 +
 skills/tedi-angular/references/components.md  |   84 +-
 .../form/date-picker/date-picker.stories.ts   |   16 +-
 .../form/filter/filter-content.directive.ts   |    7 +
 .../form/filter/filter-group.component.scss   |   32 +
 .../form/filter/filter-group.component.ts     |   18 +
 .../form/filter/filter.component.html         |  209 +++
 .../form/filter/filter.component.scss         |  205 +++
 .../form/filter/filter.component.spec.ts      | 1416 +++++++++++++++++
 .../form/filter/filter.component.ts           |  466 ++++++
 tedi/components/form/filter/filter.stories.ts |  622 ++++++++
 tedi/components/form/filter/index.ts          |    8 +
 tedi/components/form/index.ts                 |    4 +
 .../dropdown-item-value.component.html        |    2 +
 .../dropdown-trigger.directive.ts             |    4 +-
 tedi/components/tags/index.ts                 |    1 +
 .../status-badge/status-badge.component.html  |    9 +
 .../status-badge/status-badge.component.scss  |   29 -
 .../status-badge.component.spec.ts            |    6 +-
 .../status-badge/status-badge.component.ts    |   10 +-
 .../components/tags/status-indicator/index.ts |    1 +
 .../status-indicator.component.scss           |   34 +
 .../status-indicator.component.spec.ts        |   73 +
 .../status-indicator.component.ts             |   56 +
 .../status-indicator.stories.ts               |  125 ++
 26 files changed, 3427 insertions(+), 50 deletions(-)
 create mode 100644 tedi/components/form/filter/filter-content.directive.ts
 create mode 100644 tedi/components/form/filter/filter-group.component.scss
 create mode 100644 tedi/components/form/filter/filter-group.component.ts
 create mode 100644 tedi/components/form/filter/filter.component.html
 create mode 100644 tedi/components/form/filter/filter.component.scss
 create mode 100644 tedi/components/form/filter/filter.component.spec.ts
 create mode 100644 tedi/components/form/filter/filter.component.ts
 create mode 100644 tedi/components/form/filter/filter.stories.ts
 create mode 100644 tedi/components/form/filter/index.ts
 create mode 100644 tedi/components/tags/status-indicator/index.ts
 create mode 100644 tedi/components/tags/status-indicator/status-indicator.component.scss
 create mode 100644 tedi/components/tags/status-indicator/status-indicator.component.spec.ts
 create mode 100644 tedi/components/tags/status-indicator/status-indicator.component.ts
 create mode 100644 tedi/components/tags/status-indicator/status-indicator.stories.ts

diff --git a/.claude/skills/contributing/references/best-practices.md b/.claude/skills/contributing/references/best-practices.md
index fd0311ed9..d6767e0cc 100644
--- a/.claude/skills/contributing/references/best-practices.md
+++ b/.claude/skills/contributing/references/best-practices.md
@@ -123,6 +123,32 @@ tedi-modal-header { padding: var(--token); }
 cdk-dialog-container { outline: none; }
 ```
 
+### Icon Color Inheritance Inside Parent Components
+
+When a `tedi-icon` is placed inside an interactive component whose text color changes on hover/active/selected states, the icon should:
+- **Default state:** respect the user's `color` input (e.g., `color="danger"` shows danger)
+- **State changes (hover, selected, active):** inherit the parent's text color
+
+**For component-owned icons** (in the component's own template), use `color="inherit"` so they always follow the parent:
+```html
+<tedi-icon name="check" [size]="18" color="inherit" />
+```
+
+**For projected/consumer icons** (via `ng-content`), the consumer controls the `color` input. The parent component must override icon color only on state changes via CSS:
+```scss
+.tedi-my-component__button:hover .tedi-icon {
+  color: inherit;
+}
+
+.tedi-my-component--selected .tedi-icon {
+  color: inherit;
+}
+```
+
+This lets the consumer's chosen color (e.g., `color="brand"`) apply in the default state, while ensuring the icon follows the parent's text color on hover/selected/active. The selector `.tedi-my-component__button:hover .tedi-icon` (specificity 0,2,0+pseudo) beats `.tedi-icon--color-primary` (0,1,0).
+
+**Every component that contains icons and changes text color on state must include these overrides.**
+
 ### Example
 ```scss
 .tedi-button {
@@ -246,11 +272,22 @@ export const Default: StoryObj<ComponentNameComponent> = {
 export const WithReactiveForms: StoryObj<ComponentNameComponent> = {
   render: () => ({
     props: { control: new FormControl('') },
-    template: `<tedi-my-control [formControl]="control" />`,
+    template: `
+      <tedi-my-control [formControl]="control" />
+      <tedi-alert type="info" [showClose]="false">
+        <pre tedi-text modifiers="small" style="margin: 0;">{{ {
+  value: control.value,
+  touched: control.touched,
+  dirty: control.dirty
+} | json }}</pre>
+      </tedi-alert>
+    `,
   }),
 };
 ```
 
+> **Note:** Always display reactive form state using a `<tedi-alert type="info">` with a `<pre tedi-text modifiers="small">` block and the `json` pipe. This provides a consistent, scannable debug output across all form component stories. Import `AlertComponent` and `TextComponent` in the story's `moduleMetadata`.
+
 ### Story Coverage
 Every story file must include:
 - **Default** — component with default props
diff --git a/CLAUDE.md b/CLAUDE.md
index c65289b86..bff4905b6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -118,6 +118,7 @@ Path aliases:
 - Forget to provide `TediTranslationService` mock and `TEDI_TRANSLATION_DEFAULT_TOKEN` in tests
 - Use `fakeAsync`/`tick` without cleaning up in `afterEach`
 - Use `community/` components as reference for coding patterns or style — they are community-contributed and not always reviewed
+- Forget to add `.parent__button:hover .tedi-icon { color: inherit; }` (and similar for selected/active states) in components that contain icons and change text color on state — without this, the icon's color modifier class wins over the parent's color. Use `color="inherit"` for component-owned icons; for projected icons, the CSS override ensures the consumer's color applies in default state but inherits on hover/selected
 - Style Angular element selectors directly (e.g., `tedi-modal-header { ... }`) — add a CSS class to the host and style the class instead. Exception: third-party elements you can't add classes to (e.g., `cdk-dialog-container`)
 
 ## Common Test Setup
diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index cc3b86e8c..0ae5ff23c 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -347,6 +347,65 @@ Implements `ControlValueAccessor`. Value type is `T` (single) or `T[]` (multisel
 </tedi-select>
 ```
 
+### Filter
+**Selector:** `tedi-filter`
+**Model:** `selected: boolean`, `value: string`, `values: string[]`
+**Inputs:**
+- `text: string = ""` — filter label text
+- `variant: FilterVariant = "primary"` — "primary" or "secondary"
+- `size: FilterSize = "default"` — "default" or "large"
+- `multiselect: boolean = false` — multiselect dropdown mode
+- `options: FilterOption[] = []` — dropdown options `{ label, value, disabled? }`
+- `searchable: boolean = false` — show search field in dropdown
+- `showSelectAll: boolean = false` — show "Select all" in multiselect
+- `showClear: boolean = false` — show clear action in dropdown
+- `selectAllLabel: string = "Vali kõik"`
+- `clearLabel: string = "Tühjenda valik"`
+- `appendTo: string = ""` — append dropdown to selector (e.g., "body")
+**Outputs:**
+- `cleared: void` — emitted when clear button is clicked in custom content mode
+**Slots:**
+- `[tediFilterPrepend]` — content before the label (icon, status badge, indicator). Hidden when filter is selected (check icon takes its place).
+- `[tediFilterContent]` — custom dropdown content (replaces options)
+
+Implements `ControlValueAccessor`. Value type depends on mode: `boolean` (toggle), `string` (single-select), `string[]` (multiselect).
+
+```html
+<!-- Boolean toggle -->
+<tedi-filter text="Active" variant="secondary" [formControl]="activeControl" />
+
+<!-- Single-select dropdown -->
+<tedi-filter text="Service" [options]="options" [(value)]="value" [showClear]="true" appendTo="body" />
+
+<!-- Multiselect dropdown -->
+<tedi-filter text="Hospital" [multiselect]="true" [options]="options" [(values)]="values"
+  [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
+
+<!-- With prepend content -->
+<tedi-filter text="Submitted" variant="secondary" size="large">
+  <tedi-status-badge tediFilterPrepend text="5" color="brand" />
+</tedi-filter>
+
+<!-- Custom dropdown content -->
+<tedi-filter [text]="selectedLabel" [selected]="!!selectedValue" [showClear]="true" (cleared)="clear()">
+  <div tediFilterContent>
+    <!-- custom content here -->
+  </div>
+</tedi-filter>
+```
+
+### FilterGroup
+**Selector:** `tedi-filter-group`
+Wrapper that joins filters into a connected button group with collapsed borders and shared border-radius.
+
+```html
+<tedi-filter-group>
+  <tedi-filter text="All" variant="secondary" [selected]="true" />
+  <tedi-filter text="Active" variant="secondary" />
+  <tedi-filter text="Closed" variant="secondary" />
+</tedi-filter-group>
+```
+
 ### FormField
 **Selector:** `tedi-form-field`
 **Inputs:**
@@ -715,14 +774,35 @@ The `[(open)]` binding approach is deprecated. Use `ModalService.open()` for new
 - `color: StatusBadgeColor = "neutral"`
 - `variant: StatusBadgeVariant = "filled"`
 - `size: StatusBadgeSize = "default"`
-- `status: StatusBadgeStatus`
+- `status: StatusBadgeStatus` — renders a `tedi-status-indicator` in top-right position
 - `icon: string = ""`
 - `class: string` — custom CSS class
 - `title: string` — tooltip/abbreviation title
 - `role: string` — ARIA role
 
 ```html
-<tedi-status-badge text="Active" color="success" status="positive" />
+<tedi-status-badge text="Active" color="success" status="success" />
+```
+
+### StatusIndicator
+**Selector:** `tedi-status-indicator`
+**Inputs:**
+- `type: StatusIndicatorType = "success"` — "success", "danger", "warning", "inactive"
+- `size: StatusIndicatorSize = "sm"` — "sm" or "lg"
+- `hasBorder: boolean = false` — white border ring
+- `position: StatusIndicatorPosition = "default"` — "default" (inline) or "top-right" (absolute)
+
+Standalone colored dot indicator. Used internally by `StatusBadge` and can be used standalone (e.g., as a prepend in filters).
+
+```html
+<tedi-status-indicator type="danger" />
+<tedi-status-indicator type="success" size="lg" [hasBorder]="true" />
+
+<!-- Absolute positioned on parent -->
+<span style="position: relative">
+  Lugemata teated
+  <tedi-status-indicator type="danger" position="top-right" />
+</span>
 ```
 
 ---
diff --git a/tedi/components/form/date-picker/date-picker.stories.ts b/tedi/components/form/date-picker/date-picker.stories.ts
index a14fde226..2d8909863 100644
--- a/tedi/components/form/date-picker/date-picker.stories.ts
+++ b/tedi/components/form/date-picker/date-picker.stories.ts
@@ -6,6 +6,8 @@ import {
 } from "@storybook/angular";
 import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import { DatePickerComponent } from "./date-picker.component";
+import { AlertComponent } from "../../notifications/alert/alert.component";
+import { TextComponent } from "../../base/text/text.component";
 
 /**
  * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.23.39?node-id=9938-87564&m=dev" target="_blank">Figma ↗</a><br>
@@ -22,7 +24,7 @@ export default {
   },
   decorators: [
     moduleMetadata({
-      imports: [DatePickerComponent, ReactiveFormsModule],
+      imports: [DatePickerComponent, ReactiveFormsModule, AlertComponent, TextComponent],
     }),
   ],
   argTypes: {
@@ -246,11 +248,13 @@ export const WithReactiveForms: StoryObj<DatePickerComponent> = {
             inputPlaceholder="Select a date..."
           />
 
-          <div>
-            <div>Value: {{ dateControl.value ?? 'null' }}</div>
-            <div>Touched: {{ dateControl.touched }}</div>
-            <div>Dirty: {{ dateControl.dirty }}</div>
-          </div>
+          <tedi-alert type="info" [showClose]="false">
+            <pre tedi-text modifiers="small" style="margin: 0;">{{ {
+  value: dateControl.value,
+  touched: dateControl.touched,
+  dirty: dateControl.dirty
+} | json }}</pre>
+          </tedi-alert>
         </div>
       `,
     };
diff --git a/tedi/components/form/filter/filter-content.directive.ts b/tedi/components/form/filter/filter-content.directive.ts
new file mode 100644
index 000000000..f8f27cb93
--- /dev/null
+++ b/tedi/components/form/filter/filter-content.directive.ts
@@ -0,0 +1,7 @@
+import { Directive } from "@angular/core";
+
+@Directive({
+  selector: "[tediFilterContent]",
+  standalone: true,
+})
+export class FilterContentDirective {}
diff --git a/tedi/components/form/filter/filter-group.component.scss b/tedi/components/form/filter/filter-group.component.scss
new file mode 100644
index 000000000..c6c1fb73a
--- /dev/null
+++ b/tedi/components/form/filter/filter-group.component.scss
@@ -0,0 +1,32 @@
+.tedi-filter-group {
+  display: inline-flex;
+
+  .tedi-filter__button {
+    border-radius: 0;
+  }
+
+  .tedi-filter + .tedi-filter .tedi-filter__button {
+    margin-left: calc(-1 * var(--borders-01));
+  }
+
+  .tedi-filter--selected {
+    z-index: 1;
+  }
+
+  .tedi-filter--selected + .tedi-filter .tedi-filter__button,
+  .tedi-filter + .tedi-filter--selected .tedi-filter__button {
+    margin-left: calc(-1 * var(--general-selected-border-width));
+  }
+
+  .tedi-filter:first-child .tedi-filter__button {
+    border-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius);
+  }
+
+  .tedi-filter:last-child .tedi-filter__button {
+    border-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0;
+  }
+
+  .tedi-filter:only-child .tedi-filter__button {
+    border-radius: var(--form-checkbox-radio-card-radius);
+  }
+}
diff --git a/tedi/components/form/filter/filter-group.component.ts b/tedi/components/form/filter/filter-group.component.ts
new file mode 100644
index 000000000..f3536948e
--- /dev/null
+++ b/tedi/components/form/filter/filter-group.component.ts
@@ -0,0 +1,18 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from "@angular/core";
+
+@Component({
+  selector: "tedi-filter-group",
+  standalone: true,
+  template: `<ng-content />`,
+  styleUrl: "./filter-group.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "tedi-filter-group",
+  },
+})
+export class FilterGroupComponent {}
diff --git a/tedi/components/form/filter/filter.component.html b/tedi/components/form/filter/filter.component.html
new file mode 100644
index 000000000..a0b317d98
--- /dev/null
+++ b/tedi/components/form/filter/filter.component.html
@@ -0,0 +1,209 @@
+@if (hasDropdown()) {
+  <tedi-dropdown #dropdown [appendTo]="appendTo()" position="bottom-start">
+    <button
+      #triggerBtn
+      tedi-dropdown-trigger
+      ariaHaspopup="dialog"
+      class="tedi-filter__button"
+      type="button"
+      [disabled]="disabled()"
+      (click)="focusDropdownContent()"
+      (keydown.arrowDown)="focusDropdownContent(true)"
+      (keydown.arrowUp)="focusDropdownContent(true)"
+    >
+      <ng-container *ngTemplateOutlet="buttonContent" />
+    </button>
+    <tedi-dropdown-content>
+      <div
+        #dropdownPanel
+        class="tedi-filter-dropdown"
+        [class.tedi-filter-dropdown--custom]="hasCustomContent()"
+        role="dialog"
+        [attr.aria-label]="text()"
+        (keydown)="handleDropdownKeydown($event)"
+      >
+        @if (hasCustomContent()) {
+          <div class="tedi-filter-dropdown__custom-content">
+            <ng-content select="[tediFilterContent]" />
+          </div>
+          @if (showClear()) {
+            <tedi-separator />
+            <button
+              type="button"
+              class="tedi-filter-dropdown__clear"
+              (click)="onCustomClear()"
+            >
+              <tedi-icon name="refresh" [size]="18" color="brand" />
+              <span>{{ clearLabel() }}</span>
+            </button>
+          }
+        } @else if (isSingleSelect()) {
+          @if (searchable()) {
+            <ng-container *ngTemplateOutlet="searchField" />
+          }
+
+          <div
+            #optionsList
+            class="tedi-filter-dropdown__options"
+            role="listbox"
+            [attr.aria-label]="text()"
+            [attr.aria-activedescendant]="activeDescendantId()"
+            tabindex="0"
+            (focus)="onOptionsFocus()"
+            (blur)="onOptionsBlur()"
+            (keydown)="onOptionsKeydown($event)"
+          >
+            @for (option of filteredOptions(); track option.value; let i = $index) {
+              <div
+                class="tedi-filter-dropdown__item"
+                [class.tedi-filter-dropdown__item--disabled]="option.disabled"
+                [class.tedi-filter-dropdown__item--focused]="activeOptionIndex() === i"
+                role="option"
+                [attr.aria-selected]="isOptionSelected(option.value)"
+                [attr.aria-disabled]="option.disabled || null"
+                [id]="getOptionId(option.value)"
+                (click)="!option.disabled && selectOption(option.value)"
+              >
+                <tedi-dropdown-item-value
+                  [selected]="isOptionSelected(option.value)"
+                  [disabled]="!!option.disabled"
+                >
+                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>
+                </tedi-dropdown-item-value>
+              </div>
+            }
+          </div>
+
+          @if (showClear()) {
+            <tedi-separator />
+            <button
+              type="button"
+              class="tedi-filter-dropdown__clear"
+              (click)="clearSingleSelection()"
+            >
+              <tedi-icon name="refresh" [size]="18" color="brand" />
+              <span>{{ clearLabel() }}</span>
+            </button>
+          }
+        } @else {
+          @if (searchable()) {
+            <ng-container *ngTemplateOutlet="searchField" />
+          }
+
+          @if (showSelectAll()) {
+            <div
+              class="tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all"
+              role="checkbox"
+              [attr.aria-checked]="allFilteredSelected() ? 'true' : someFilteredSelected() ? 'mixed' : 'false'"
+              (click)="toggleSelectAll()"
+              (keydown.enter)="toggleSelectAll()"
+              (keydown.space)="$event.preventDefault(); toggleSelectAll()"
+              tabindex="0"
+            >
+              <tedi-dropdown-item-value
+                type="checkbox"
+                [selected]="allFilteredSelected()"
+                [indeterminate]="someFilteredSelected()"
+              >
+                <tedi-dropdown-item-value-label>{{ selectAllLabel() }}</tedi-dropdown-item-value-label>
+              </tedi-dropdown-item-value>
+            </div>
+            <tedi-separator />
+          }
+
+          <div
+            #optionsList
+            class="tedi-filter-dropdown__options"
+            role="listbox"
+            aria-multiselectable="true"
+            [attr.aria-label]="text()"
+            [attr.aria-activedescendant]="activeDescendantId()"
+            tabindex="0"
+            (focus)="onOptionsFocus()"
+            (blur)="onOptionsBlur()"
+            (keydown)="onOptionsKeydown($event)"
+          >
+            @for (option of filteredOptions(); track option.value; let i = $index) {
+              <div
+                class="tedi-filter-dropdown__item"
+                [class.tedi-filter-dropdown__item--disabled]="option.disabled"
+                [class.tedi-filter-dropdown__item--focused]="activeOptionIndex() === i"
+                role="option"
+                [attr.aria-selected]="isOptionSelected(option.value)"
+                [attr.aria-disabled]="option.disabled || null"
+                [id]="getOptionId(option.value)"
+                (click)="!option.disabled && toggleOption(option.value)"
+              >
+                <tedi-dropdown-item-value
+                  type="checkbox"
+                  [selected]="isOptionSelected(option.value)"
+                  [disabled]="!!option.disabled"
+                >
+                  <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>
+                </tedi-dropdown-item-value>
+              </div>
+            }
+          </div>
+
+          @if (showClear()) {
+            <tedi-separator />
+            <button
+              type="button"
+              class="tedi-filter-dropdown__clear"
+              (click)="clearSelection()"
+            >
+              <tedi-icon name="refresh" [size]="18" color="brand" />
+              <span>{{ clearLabel() }}</span>
+            </button>
+          }
+        }
+      </div>
+    </tedi-dropdown-content>
+  </tedi-dropdown>
+} @else {
+  <button
+    class="tedi-filter__button"
+    type="button"
+    [disabled]="disabled()"
+    [attr.aria-pressed]="isSelected()"
+    (click)="toggle()"
+  >
+    <ng-container *ngTemplateOutlet="buttonContent" />
+  </button>
+}
+
+<ng-template #buttonContent>
+  <div class="tedi-filter__prepend" [class.tedi-filter__prepend--hidden]="isSelected()">
+    <ng-content select="[tediFilterPrepend]" />
+  </div>
+
+  @if (!hasDropdown() && isSelected()) {
+    <tedi-icon class="tedi-filter__icon" name="check" [size]="iconSize()" color="inherit" />
+  }
+
+  <span class="tedi-filter__text">{{ displayText() }}</span>
+
+  @if (multiselect() && isSelected() && selectedCount() > 0) {
+    <tedi-status-badge class="tedi-filter__count" [text]="'' + selectedCount()" color="brand" />
+  }
+
+  @if (hasDropdown()) {
+    <tedi-icon class="tedi-filter__icon" name="arrow_drop_down" variant="filled" [size]="iconSize()" color="inherit" />
+  }
+</ng-template>
+
+<ng-template #searchField>
+  <div class="tedi-filter-dropdown__search">
+    <tedi-form-field icon="search">
+      <input
+        tedi-text-field
+        type="text"
+        role="searchbox"
+        [attr.aria-label]="text()"
+        [value]="searchTerm()"
+        (input)="onSearchInput($event)"
+      />
+    </tedi-form-field>
+  </div>
+  <tedi-separator />
+</ng-template>
diff --git a/tedi/components/form/filter/filter.component.scss b/tedi/components/form/filter/filter.component.scss
new file mode 100644
index 000000000..1fcf5bc7b
--- /dev/null
+++ b/tedi/components/form/filter/filter.component.scss
@@ -0,0 +1,205 @@
+.tedi-filter {
+  --_filter-bg: transparent;
+  --_filter-text: inherit;
+  --_filter-border: transparent;
+  --_filter-border-width: var(--borders-01);
+  --_filter-padding-x: var(--filter-default-padding-x);
+  --_filter-inner-spacing: var(--filter-default-inner-spacing);
+  --_filter-radius: var(--form-checkbox-radio-card-radius);
+
+  display: inline-flex;
+
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    max-width: 384px;
+    padding: 0 var(--_filter-padding-x);
+    font-family: var(--family-default);
+    font-size: var(--body-regular-size);
+    font-weight: var(--body-regular-weight);
+    line-height: var(--body-regular-line-height);
+    color: var(--_filter-text);
+    cursor: pointer;
+    background-color: var(--_filter-bg);
+    border: var(--_filter-border-width) solid var(--_filter-border);
+    border-radius: var(--_filter-radius);
+
+    &:focus-visible {
+      outline: 2px solid var(--form-input-border-active);
+      outline-offset: 1px;
+    }
+  }
+
+  &__button:hover .tedi-icon {
+    color: inherit;
+  }
+
+  &--selected .tedi-icon {
+    color: inherit;
+  }
+
+  &__text {
+    padding: calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--_filter-inner-spacing);
+    white-space: nowrap;
+  }
+
+  &__icon {
+    padding: 0 var(--_filter-inner-spacing);
+  }
+
+  &__prepend {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--_filter-inner-spacing);
+
+    &:empty,
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &__count {
+    padding-left: var(--layout-grid-gutters-04);
+  }
+
+  &--primary {
+    --_filter-bg: var(--filter-primary-default-background);
+    --_filter-text: var(--filter-primary-default-text);
+    --_filter-border: var(--filter-primary-default-border);
+
+    .tedi-filter__button:hover {
+      --_filter-bg: var(--filter-primary-hover-background);
+      --_filter-text: var(--filter-primary-hover-text);
+      --_filter-border: var(--filter-primary-hover-border);
+    }
+
+    &.tedi-filter--selected {
+      --_filter-bg: var(--filter-primary-selected-background);
+      --_filter-text: var(--filter-primary-selected-text);
+      --_filter-border: var(--filter-primary-selected-border);
+
+      .tedi-filter__button:hover {
+        --_filter-bg: var(--filter-primary-hover-background);
+        --_filter-text: var(--filter-primary-hover-text);
+        --_filter-border: var(--filter-primary-hover-border);
+      }
+    }
+  }
+
+  &--secondary {
+    --_filter-bg: var(--filter-secondary-default-background);
+    --_filter-text: var(--filter-secondary-default-text);
+    --_filter-border: var(--filter-secondary-default-border);
+
+    .tedi-filter__button:hover {
+      --_filter-bg: var(--filter-secondary-hover-background);
+      --_filter-text: var(--filter-secondary-hover-text);
+      --_filter-border: var(--filter-secondary-hover-border);
+    }
+
+    &.tedi-filter--selected {
+      --_filter-bg: var(--filter-secondary-selected-background);
+      --_filter-text: var(--filter-secondary-selected-text);
+      --_filter-border: var(--filter-secondary-selected-border);
+      --_filter-border-width: var(--general-selected-border-width);
+    }
+  }
+
+  &--large {
+    --_filter-padding-x: var(--filter-lg-padding-x);
+    --_filter-inner-spacing: var(--filter-lg-inner-spacing);
+
+    .tedi-filter__text {
+      padding-top: calc(var(--filter-lg-padding-y) - var(--_filter-border-width));
+      padding-bottom: calc(var(--filter-lg-padding-y) - var(--_filter-border-width));
+    }
+  }
+
+}
+
+.tedi-filter-dropdown {
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  max-height: 360px;
+  overflow: hidden;
+  background: var(--dropdown-item-default-background);
+
+  &--custom {
+    min-width: auto;
+    max-height: none;
+  }
+
+  &__custom-content {
+    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+  }
+
+  &__search {
+    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+  }
+
+  &__options {
+    flex: 1;
+    overflow-y: auto;
+    outline: none;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 40px;
+    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+    color: var(--dropdown-item-default-text);
+    cursor: pointer;
+    background: var(--dropdown-item-default-background);
+
+    &:hover:not(&--disabled) {
+      color: var(--dropdown-item-hover-text);
+      background: var(--dropdown-item-hover-background);
+    }
+
+    &:focus-visible {
+      outline: var(--borders-02) solid var(--form-input-border-active);
+      outline-offset: calc(-1 * var(--borders-02));
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+    }
+
+    &--focused {
+      outline: var(--borders-02) solid var(--form-input-border-active);
+      outline-offset: calc(-1 * var(--borders-02));
+    }
+
+    &--select-all {
+      font-weight: var(--body-semi-bold-weight);
+    }
+  }
+
+  &__clear {
+    display: flex;
+    gap: var(--dropdown-item-inner-spacing);
+    align-items: center;
+    width: 100%;
+    min-height: 48px;
+    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
+    font-family: var(--family-default);
+    font-size: var(--body-regular-size);
+    line-height: var(--body-regular-line-height);
+    color: var(--tedi-primary-500);
+    cursor: pointer;
+    background: var(--dropdown-item-default-background);
+    border: 0;
+
+    &:hover {
+      background: var(--dropdown-item-hover-background);
+    }
+
+    &:focus-visible {
+      outline: var(--borders-02) solid var(--tedi-primary-500);
+      outline-offset: calc(-1 * var(--borders-02));
+    }
+  }
+}
diff --git a/tedi/components/form/filter/filter.component.spec.ts b/tedi/components/form/filter/filter.component.spec.ts
new file mode 100644
index 000000000..e8046cfee
--- /dev/null
+++ b/tedi/components/form/filter/filter.component.spec.ts
@@ -0,0 +1,1416 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { Component } from "@angular/core";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { FilterComponent, FilterOption } from "./filter.component";
+import { FilterContentDirective } from "./filter-content.directive";
+import { IconComponent } from "../../base/icon/icon.component";
+
+@Component({
+  standalone: true,
+  imports: [FilterComponent, IconComponent],
+  template: `
+    <tedi-filter [text]="'With icon'">
+      <tedi-icon tediFilterPrepend name="filter_alt" [size]="18" />
+    </tedi-filter>
+  `,
+})
+class FilterWithIconHostComponent {}
+
+@Component({
+  standalone: true,
+  imports: [FilterComponent, ReactiveFormsModule],
+  template: `<tedi-filter text="Single" [formControl]="control" />`,
+})
+class SingleSelectHostComponent {
+  control = new FormControl<boolean>(false);
+}
+
+@Component({
+  standalone: true,
+  imports: [FilterComponent, ReactiveFormsModule],
+  template: `
+    <tedi-filter
+      text="Multi"
+      [multiselect]="true"
+      [options]="options"
+      [formControl]="control"
+    />
+  `,
+})
+class MultiselectHostComponent {
+  options: FilterOption[] = [
+    { label: "Option A", value: "a" },
+    { label: "Option B", value: "b" },
+    { label: "Option C", value: "c" },
+  ];
+  control = new FormControl<string[]>([]);
+}
+
+@Component({
+  standalone: true,
+  imports: [FilterComponent, FilterContentDirective],
+  template: `
+    <tedi-filter text="Aeg alates" [selected]="selected">
+      <div tediFilterContent class="custom-datepicker">
+        <p>Custom datepicker content</p>
+      </div>
+    </tedi-filter>
+  `,
+})
+class FilterWithCustomContentHostComponent {
+  selected = false;
+}
+
+@Component({
+  standalone: true,
+  imports: [FilterComponent, ReactiveFormsModule],
+  template: `
+    <tedi-filter
+      text="Teenus"
+      [options]="options"
+      [formControl]="control"
+    />
+  `,
+})
+class SingleSelectHostComponent2 {
+  options: FilterOption[] = [
+    { label: "Option A", value: "a" },
+    { label: "Option B", value: "b" },
+    { label: "Option C", value: "c" },
+  ];
+  control = new FormControl<string>("");
+}
+
+const TEST_OPTIONS: FilterOption[] = [
+  { label: "Option A", value: "a" },
+  { label: "Option B", value: "b" },
+  { label: "Option C", value: "c" },
+  { label: "Disabled", value: "d", disabled: true },
+];
+
+describe("FilterComponent", () => {
+  let fixture: ComponentFixture<FilterComponent>;
+  let component: FilterComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FilterComponent],
+    });
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should render text label", () => {
+    fixture.componentRef.setInput("text", "Teenused");
+    fixture.detectChanges();
+
+    const textEl = fixture.debugElement.query(By.css(".tedi-filter__text"));
+    expect(textEl.nativeElement.textContent).toBe("Teenused");
+  });
+
+  it("should have tedi-filter host class", () => {
+    expect(
+      fixture.debugElement.nativeElement.classList.contains("tedi-filter"),
+    ).toBe(true);
+  });
+
+  it("should apply primary variant class by default", () => {
+    expect(
+      fixture.debugElement.nativeElement.classList.contains(
+        "tedi-filter--primary",
+      ),
+    ).toBe(true);
+  });
+
+  it("should apply secondary variant class", () => {
+    fixture.componentRef.setInput("variant", "secondary");
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.nativeElement.classList.contains(
+        "tedi-filter--secondary",
+      ),
+    ).toBe(true);
+  });
+
+  it("should apply large size class", () => {
+    fixture.componentRef.setInput("size", "large");
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.nativeElement.classList.contains(
+        "tedi-filter--large",
+      ),
+    ).toBe(true);
+  });
+
+  it("should not have large class by default", () => {
+    expect(
+      fixture.debugElement.nativeElement.classList.contains(
+        "tedi-filter--large",
+      ),
+    ).toBe(false);
+  });
+
+  describe("single-select mode", () => {
+    it("should toggle selected state on click", () => {
+      const button = fixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+
+      expect(component.selected()).toBe(false);
+
+      button.nativeElement.click();
+      fixture.detectChanges();
+
+      expect(component.selected()).toBe(true);
+
+      button.nativeElement.click();
+      fixture.detectChanges();
+
+      expect(component.selected()).toBe(false);
+    });
+
+    it("should apply selected class when selected", () => {
+      fixture.componentRef.setInput("selected", true);
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.nativeElement.classList.contains(
+          "tedi-filter--selected",
+        ),
+      ).toBe(true);
+    });
+
+    it("should set aria-pressed attribute", () => {
+      const button = fixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+
+      expect(button.nativeElement.getAttribute("aria-pressed")).toBe("false");
+
+      fixture.componentRef.setInput("selected", true);
+      fixture.detectChanges();
+
+      expect(button.nativeElement.getAttribute("aria-pressed")).toBe("true");
+    });
+
+    it("should show check icon when selected", () => {
+      fixture.componentRef.setInput("selected", true);
+      fixture.detectChanges();
+
+      const icon = fixture.debugElement.query(
+        By.css("tedi-icon[name='check']"),
+      );
+      expect(icon).toBeTruthy();
+    });
+
+    it("should not show check icon when not selected", () => {
+      const icon = fixture.debugElement.query(
+        By.css("tedi-icon[name='check']"),
+      );
+      expect(icon).toBeNull();
+    });
+
+    it("should not have aria-expanded in single-select mode", () => {
+      const button = fixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+      expect(button.nativeElement.getAttribute("aria-expanded")).toBeNull();
+    });
+  });
+
+  describe("multiselect mode", () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput("multiselect", true);
+      fixture.componentRef.setInput("options", TEST_OPTIONS);
+      fixture.detectChanges();
+    });
+
+    it("should show dropdown arrow", () => {
+      const icon = fixture.debugElement.query(
+        By.css("tedi-icon[name='arrow_drop_down']"),
+      );
+      expect(icon).toBeTruthy();
+    });
+
+    it("should not show dropdown arrow in boolean mode", () => {
+      fixture.componentRef.setInput("multiselect", false);
+      fixture.componentRef.setInput("options", []);
+      fixture.detectChanges();
+
+      const icon = fixture.debugElement.query(
+        By.css("tedi-icon[name='arrow_drop_down']"),
+      );
+      expect(icon).toBeNull();
+    });
+
+    it("should not show check icon in multiselect mode", () => {
+      fixture.componentRef.setInput("values", ["a"]);
+      fixture.detectChanges();
+
+      const icon = fixture.debugElement.query(
+        By.css("tedi-icon[name='check']"),
+      );
+      expect(icon).toBeNull();
+    });
+
+    it("should set aria-expanded on button", () => {
+      const button = fixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+      expect(button.nativeElement.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    it("should set aria-haspopup on button", () => {
+      const button = fixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+      expect(button.nativeElement.getAttribute("aria-haspopup")).toBe(
+        "dialog",
+      );
+    });
+
+    it("should show selected class when values are present", () => {
+      fixture.componentRef.setInput("values", ["a", "b"]);
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.nativeElement.classList.contains(
+          "tedi-filter--selected",
+        ),
+      ).toBe(true);
+    });
+
+    it("should show count badge when values are selected", () => {
+      fixture.componentRef.setInput("values", ["a", "b"]);
+      fixture.detectChanges();
+
+      const badge = fixture.debugElement.query(By.css("tedi-status-badge"));
+      expect(badge).toBeTruthy();
+    });
+
+    it("should not show count badge when no values are selected", () => {
+      const badge = fixture.debugElement.query(By.css("tedi-status-badge"));
+      expect(badge).toBeNull();
+    });
+
+    it("should toggle option selection", () => {
+      component.toggleOption("a");
+      expect(component.values()).toEqual(["a"]);
+
+      component.toggleOption("b");
+      expect(component.values()).toEqual(["a", "b"]);
+
+      component.toggleOption("a");
+      expect(component.values()).toEqual(["b"]);
+    });
+
+    it("should clear all selections", () => {
+      fixture.componentRef.setInput("values", ["a", "b"]);
+      fixture.detectChanges();
+
+      component.clearSelection();
+      expect(component.values()).toEqual([]);
+    });
+
+    it("should filter options by search term", () => {
+      component.searchTerm.set("option a");
+      expect(component.filteredOptions().length).toBe(1);
+      expect(component.filteredOptions()[0].value).toBe("a");
+    });
+
+    it("should toggle select all", () => {
+      component.toggleSelectAll();
+      expect(component.values()).toEqual(["a", "b", "c"]);
+    });
+
+    it("should deselect all when all are selected", () => {
+      fixture.componentRef.setInput("values", ["a", "b", "c"]);
+      fixture.detectChanges();
+
+      component.toggleSelectAll();
+      expect(component.values()).toEqual([]);
+    });
+
+    it("should compute allFilteredSelected correctly", () => {
+      expect(component.allFilteredSelected()).toBe(false);
+
+      fixture.componentRef.setInput("values", ["a", "b", "c"]);
+      fixture.detectChanges();
+
+      expect(component.allFilteredSelected()).toBe(true);
+    });
+
+    it("should compute someFilteredSelected correctly", () => {
+      expect(component.someFilteredSelected()).toBe(false);
+
+      fixture.componentRef.setInput("values", ["a"]);
+      fixture.detectChanges();
+
+      expect(component.someFilteredSelected()).toBe(true);
+    });
+
+    it("should not include disabled options in select all", () => {
+      component.toggleSelectAll();
+      expect(component.values()).not.toContain("d");
+    });
+
+    it("should select all only for filtered options when search is active", () => {
+      component.searchTerm.set("Option A");
+      component.toggleSelectAll();
+      expect(component.values()).toEqual(["a"]);
+    });
+
+    it("should preserve non-filtered selections when toggling select all with search", () => {
+      fixture.componentRef.setInput("values", ["b"]);
+      fixture.detectChanges();
+
+      component.searchTerm.set("Option A");
+      component.toggleSelectAll();
+      expect(component.values()).toContain("a");
+      expect(component.values()).toContain("b");
+    });
+  });
+
+  describe("multiselect dropdown content", () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput("multiselect", true);
+      fixture.componentRef.setInput("options", TEST_OPTIONS);
+      fixture.componentRef.setInput("showSelectAll", true);
+      fixture.componentRef.setInput("showClear", true);
+      fixture.componentRef.setInput("searchable", true);
+      fixture.detectChanges();
+    });
+
+    it("should render dropdown-item-value for each option", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
+      );
+      expect(items.length).toBe(TEST_OPTIONS.length);
+    });
+
+    it("should render dropdown-item-value with checkbox type", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
+      );
+      items.forEach((item) => {
+        expect(item.componentInstance.type()).toBe("checkbox");
+      });
+    });
+
+    it("should render dropdown-item-value-label for each option", () => {
+      const labels = fixture.debugElement.queryAll(
+        By.css(
+          ".tedi-filter-dropdown__options tedi-dropdown-item-value-label",
+        ),
+      );
+      expect(labels.length).toBe(TEST_OPTIONS.length);
+      expect(labels[0].nativeElement.textContent.trim()).toBe("Option A");
+    });
+
+    it("should pass selected state to dropdown-item-value", () => {
+      fixture.componentRef.setInput("values", ["a"]);
+      fixture.detectChanges();
+
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
+      );
+      expect(items[0].componentInstance.selected()).toBe(true);
+      expect(items[1].componentInstance.selected()).toBe(false);
+    });
+
+    it("should pass disabled state to dropdown-item-value", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
+      );
+      expect(items[3].componentInstance.disabled()).toBe(true);
+      expect(items[0].componentInstance.disabled()).toBe(false);
+    });
+
+    it("should render select-all with dropdown-item-value checkbox type", () => {
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all tedi-dropdown-item-value"),
+      );
+      expect(selectAll).toBeTruthy();
+      expect(selectAll.componentInstance.type()).toBe("checkbox");
+    });
+
+    it("should pass indeterminate state to select-all dropdown-item-value", () => {
+      fixture.componentRef.setInput("values", ["a"]);
+      fixture.detectChanges();
+
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all tedi-dropdown-item-value"),
+      );
+      expect(selectAll.componentInstance.indeterminate()).toBe(true);
+      expect(selectAll.componentInstance.selected()).toBe(false);
+    });
+
+    it("should pass selected state to select-all when all selected", () => {
+      fixture.componentRef.setInput("values", ["a", "b", "c"]);
+      fixture.detectChanges();
+
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all tedi-dropdown-item-value"),
+      );
+      expect(selectAll.componentInstance.selected()).toBe(true);
+      expect(selectAll.componentInstance.indeterminate()).toBe(false);
+    });
+
+    it("should render search input when searchable", () => {
+      const search = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__search input"),
+      );
+      expect(search).toBeTruthy();
+    });
+
+    it("should render clear button when showClear", () => {
+      const clear = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__clear"),
+      );
+      expect(clear).toBeTruthy();
+    });
+
+    it("should not render search input when not searchable", () => {
+      fixture.componentRef.setInput("searchable", false);
+      fixture.detectChanges();
+
+      const search = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__search"),
+      );
+      expect(search).toBeNull();
+    });
+
+    it("should not render clear button when showClear is false", () => {
+      fixture.componentRef.setInput("showClear", false);
+      fixture.detectChanges();
+
+      const clear = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__clear"),
+      );
+      expect(clear).toBeNull();
+    });
+
+    it("should not render select-all when showSelectAll is false", () => {
+      fixture.componentRef.setInput("showSelectAll", false);
+      fixture.detectChanges();
+
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all"),
+      );
+      expect(selectAll).toBeNull();
+    });
+
+    it("should toggle option on item click", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options .tedi-filter-dropdown__item"),
+      );
+      items[0].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(component.values()).toEqual(["a"]);
+    });
+
+    it("should not toggle disabled option on click", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options .tedi-filter-dropdown__item"),
+      );
+      items[3].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(component.values()).toEqual([]);
+    });
+
+    it("should toggle select all on select-all click", () => {
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all"),
+      );
+      selectAll.nativeElement.click();
+      fixture.detectChanges();
+
+      expect(component.values()).toEqual(["a", "b", "c"]);
+    });
+
+    it("should clear selection on clear button click", () => {
+      fixture.componentRef.setInput("values", ["a", "b"]);
+      fixture.detectChanges();
+
+      const clear = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__clear"),
+      );
+      clear.nativeElement.click();
+      fixture.detectChanges();
+
+      expect(component.values()).toEqual([]);
+    });
+  });
+
+  describe("accessibility", () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput("multiselect", true);
+      fixture.componentRef.setInput("options", TEST_OPTIONS);
+      fixture.componentRef.setInput("showSelectAll", true);
+      fixture.componentRef.setInput("showClear", true);
+      fixture.componentRef.setInput("searchable", true);
+      fixture.componentRef.setInput("text", "Raviasutus");
+      fixture.detectChanges();
+    });
+
+    it("should have role=dialog on dropdown panel", () => {
+      const panel = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown"),
+      );
+      expect(panel.nativeElement.getAttribute("role")).toBe("dialog");
+    });
+
+    it("should have aria-label on dropdown panel matching text", () => {
+      const panel = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown"),
+      );
+      expect(panel.nativeElement.getAttribute("aria-label")).toBe(
+        "Raviasutus",
+      );
+    });
+
+    it("should have role=listbox on options container", () => {
+      const options = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__options"),
+      );
+      expect(options.nativeElement.getAttribute("role")).toBe("listbox");
+    });
+
+    it("should have aria-multiselectable on options container", () => {
+      const options = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__options"),
+      );
+      expect(options.nativeElement.getAttribute("aria-multiselectable")).toBe(
+        "true",
+      );
+    });
+
+    it("should have aria-label on options container matching text", () => {
+      const options = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__options"),
+      );
+      expect(options.nativeElement.getAttribute("aria-label")).toBe(
+        "Raviasutus",
+      );
+    });
+
+    it("should have role=option on each option item", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options .tedi-filter-dropdown__item"),
+      );
+      items.forEach((item) => {
+        expect(item.nativeElement.getAttribute("role")).toBe("option");
+      });
+    });
+
+    it("should set aria-selected on options", () => {
+      fixture.componentRef.setInput("values", ["a"]);
+      fixture.detectChanges();
+
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options [role='option']"),
+      );
+      expect(items[0].nativeElement.getAttribute("aria-selected")).toBe(
+        "true",
+      );
+      expect(items[1].nativeElement.getAttribute("aria-selected")).toBe(
+        "false",
+      );
+    });
+
+    it("should set aria-disabled on disabled options", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options [role='option']"),
+      );
+      expect(items[3].nativeElement.getAttribute("aria-disabled")).toBe(
+        "true",
+      );
+      expect(items[0].nativeElement.getAttribute("aria-disabled")).toBeNull();
+    });
+
+    it("should have unique IDs on option items", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options [role='option']"),
+      );
+      const ids = items.map((item) => item.nativeElement.id);
+
+      expect(ids.every((id: string) => id.length > 0)).toBe(true);
+      expect(new Set(ids).size).toBe(ids.length);
+    });
+
+    it("should have role=checkbox on select-all", () => {
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all"),
+      );
+      expect(selectAll.nativeElement.getAttribute("role")).toBe("checkbox");
+    });
+
+    it("should set aria-checked=false on select-all when none selected", () => {
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all"),
+      );
+      expect(selectAll.nativeElement.getAttribute("aria-checked")).toBe(
+        "false",
+      );
+    });
+
+    it("should set aria-checked=mixed on select-all when some selected", () => {
+      fixture.componentRef.setInput("values", ["a"]);
+      fixture.detectChanges();
+
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all"),
+      );
+      expect(selectAll.nativeElement.getAttribute("aria-checked")).toBe(
+        "mixed",
+      );
+    });
+
+    it("should set aria-checked=true on select-all when all selected", () => {
+      fixture.componentRef.setInput("values", ["a", "b", "c"]);
+      fixture.detectChanges();
+
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all"),
+      );
+      expect(selectAll.nativeElement.getAttribute("aria-checked")).toBe(
+        "true",
+      );
+    });
+
+    it("should have role=searchbox on search input", () => {
+      const search = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__search input"),
+      );
+      expect(search.nativeElement.getAttribute("role")).toBe("searchbox");
+    });
+
+    it("should have aria-label on search input", () => {
+      const search = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__search input"),
+      );
+      expect(search.nativeElement.getAttribute("aria-label")).toBe(
+        "Raviasutus",
+      );
+    });
+
+    it("should not have aria-activedescendant when no option is focused", () => {
+      const options = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__options"),
+      );
+      expect(
+        options.nativeElement.getAttribute("aria-activedescendant"),
+      ).toBeNull();
+    });
+
+    it("should set aria-activedescendant when option is focused", () => {
+      component.onOptionsFocus();
+      fixture.detectChanges();
+
+      const options = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__options"),
+      );
+      const firstOptionId = component.getOptionId("a");
+      expect(
+        options.nativeElement.getAttribute("aria-activedescendant"),
+      ).toBe(firstOptionId);
+    });
+
+    it("should clear aria-activedescendant on options blur", () => {
+      component.onOptionsFocus();
+      fixture.detectChanges();
+      component.onOptionsBlur();
+      fixture.detectChanges();
+
+      const options = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__options"),
+      );
+      expect(
+        options.nativeElement.getAttribute("aria-activedescendant"),
+      ).toBeNull();
+    });
+
+    it("should have tabindex=0 on select-all", () => {
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all"),
+      );
+      expect(selectAll.nativeElement.getAttribute("tabindex")).toBe("0");
+    });
+
+    it("should have tabindex=0 on options listbox", () => {
+      const options = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__options"),
+      );
+      expect(options.nativeElement.getAttribute("tabindex")).toBe("0");
+    });
+
+    it("should not have tabbable checkbox inputs inside dropdown-item-value", () => {
+      const checkboxes = fixture.debugElement.queryAll(
+        By.css(
+          ".tedi-filter-dropdown__options input[type='checkbox']",
+        ),
+      );
+      checkboxes.forEach((cb) => {
+        expect(cb.nativeElement.getAttribute("tabindex")).toBe("-1");
+      });
+    });
+  });
+
+  describe("keyboard navigation", () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput("multiselect", true);
+      fixture.componentRef.setInput("options", TEST_OPTIONS);
+      fixture.detectChanges();
+    });
+
+    it("should set active option index to first enabled option on focus", () => {
+      expect(component.activeOptionIndex()).toBe(-1);
+      component.onOptionsFocus();
+      expect(component.activeOptionIndex()).toBe(0);
+    });
+
+    it("should reset active option index on blur", () => {
+      component.onOptionsFocus();
+      expect(component.activeOptionIndex()).toBe(0);
+
+      component.onOptionsBlur();
+      expect(component.activeOptionIndex()).toBe(-1);
+    });
+
+    it("should move to next option on ArrowDown", () => {
+      component.onOptionsFocus();
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowDown" }),
+      );
+      expect(component.activeOptionIndex()).toBe(1);
+    });
+
+    it("should move to previous option on ArrowUp", () => {
+      component.onOptionsFocus();
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowDown" }),
+      );
+      expect(component.activeOptionIndex()).toBe(1);
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowUp" }),
+      );
+      expect(component.activeOptionIndex()).toBe(0);
+    });
+
+    it("should skip disabled options on ArrowDown", () => {
+      component.onOptionsFocus();
+
+      // Move to index 2 (Option C)
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowDown" }),
+      );
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowDown" }),
+      );
+      expect(component.activeOptionIndex()).toBe(2);
+
+      // Next would be index 3 (disabled), should stay at 2
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowDown" }),
+      );
+      expect(component.activeOptionIndex()).toBe(2);
+    });
+
+    it("should not move above first option on ArrowUp", () => {
+      component.onOptionsFocus();
+      expect(component.activeOptionIndex()).toBe(0);
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowUp" }),
+      );
+      expect(component.activeOptionIndex()).toBe(0);
+    });
+
+    it("should move to first enabled option on Home", () => {
+      component.onOptionsFocus();
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowDown" }),
+      );
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowDown" }),
+      );
+      expect(component.activeOptionIndex()).toBe(2);
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "Home" }),
+      );
+      expect(component.activeOptionIndex()).toBe(0);
+    });
+
+    it("should move to last enabled option on End", () => {
+      component.onOptionsFocus();
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "End" }),
+      );
+      expect(component.activeOptionIndex()).toBe(2);
+    });
+
+    it("should toggle focused option on Enter", () => {
+      component.onOptionsFocus();
+      expect(component.values()).toEqual([]);
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "Enter" }),
+      );
+      expect(component.values()).toEqual(["a"]);
+    });
+
+    it("should toggle focused option on Space", () => {
+      component.onOptionsFocus();
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: " " }),
+      );
+      expect(component.values()).toEqual(["a"]);
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: " " }),
+      );
+      expect(component.values()).toEqual([]);
+    });
+
+    it("should not toggle disabled option on Enter", () => {
+      // Manually set active index to disabled option
+      component["activeOptionIndex"].set(3);
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "Enter" }),
+      );
+      expect(component.values()).toEqual([]);
+    });
+
+    it("should apply focused class to active option", () => {
+      component.onOptionsFocus();
+      fixture.detectChanges();
+
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options .tedi-filter-dropdown__item"),
+      );
+      expect(
+        items[0].nativeElement.classList.contains(
+          "tedi-filter-dropdown__item--focused",
+        ),
+      ).toBe(true);
+      expect(
+        items[1].nativeElement.classList.contains(
+          "tedi-filter-dropdown__item--focused",
+        ),
+      ).toBe(false);
+    });
+
+    it("should move focused class on arrow navigation", () => {
+      component.onOptionsFocus();
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowDown" }),
+      );
+      fixture.detectChanges();
+
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options .tedi-filter-dropdown__item"),
+      );
+      expect(
+        items[0].nativeElement.classList.contains(
+          "tedi-filter-dropdown__item--focused",
+        ),
+      ).toBe(false);
+      expect(
+        items[1].nativeElement.classList.contains(
+          "tedi-filter-dropdown__item--focused",
+        ),
+      ).toBe(true);
+    });
+
+    it("should remove focused class on blur", () => {
+      component.onOptionsFocus();
+      fixture.detectChanges();
+
+      component.onOptionsBlur();
+      fixture.detectChanges();
+
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options .tedi-filter-dropdown__item"),
+      );
+      items.forEach((item) => {
+        expect(
+          item.nativeElement.classList.contains(
+            "tedi-filter-dropdown__item--focused",
+          ),
+        ).toBe(false);
+      });
+    });
+
+    it("should update aria-activedescendant on navigation", () => {
+      component.onOptionsFocus();
+      fixture.detectChanges();
+
+      const optionsEl = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__options"),
+      );
+      expect(
+        optionsEl.nativeElement.getAttribute("aria-activedescendant"),
+      ).toBe(component.getOptionId("a"));
+
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "ArrowDown" }),
+      );
+      fixture.detectChanges();
+
+      expect(
+        optionsEl.nativeElement.getAttribute("aria-activedescendant"),
+      ).toBe(component.getOptionId("b"));
+    });
+
+    it("should handle select-all Enter keydown", () => {
+      fixture.componentRef.setInput("showSelectAll", true);
+      fixture.detectChanges();
+
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all"),
+      );
+      selectAll.triggerEventHandler("keydown.enter", {});
+      fixture.detectChanges();
+
+      expect(component.values()).toEqual(["a", "b", "c"]);
+    });
+
+    it("should handle select-all Space keydown", () => {
+      fixture.componentRef.setInput("showSelectAll", true);
+      fixture.detectChanges();
+
+      const selectAll = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__item--select-all"),
+      );
+      selectAll.triggerEventHandler("keydown.space", {
+        preventDefault: () => {},
+      });
+      fixture.detectChanges();
+
+      expect(component.values()).toEqual(["a", "b", "c"]);
+    });
+  });
+
+
+  it("should project content via tediFilterPrepend slot", () => {
+    const hostFixture = TestBed.createComponent(FilterWithIconHostComponent);
+    hostFixture.detectChanges();
+
+    const projectedIcon = hostFixture.debugElement.query(
+      By.css("[tediFilterPrepend]"),
+    );
+    expect(projectedIcon).toBeTruthy();
+  });
+
+  it("should have button with type=button", () => {
+    const button = fixture.debugElement.query(By.css(".tedi-filter__button"));
+    expect(button.nativeElement.getAttribute("type")).toBe("button");
+  });
+
+  it("should use icon size 18 for default size", () => {
+    expect(component.iconSize()).toBe(18);
+  });
+
+  it("should use icon size 24 for large size", () => {
+    fixture.componentRef.setInput("size", "large");
+    fixture.detectChanges();
+
+    expect(component.iconSize()).toBe(24);
+  });
+
+  describe("reactive forms - single select", () => {
+    let hostFixture: ComponentFixture<SingleSelectHostComponent>;
+    let host: SingleSelectHostComponent;
+
+    beforeEach(() => {
+      hostFixture = TestBed.createComponent(SingleSelectHostComponent);
+      host = hostFixture.componentInstance;
+      hostFixture.detectChanges();
+    });
+
+    it("should write value from form control", () => {
+      host.control.setValue(true);
+      hostFixture.detectChanges();
+
+      const hostEl = hostFixture.debugElement.query(
+        By.directive(FilterComponent),
+      );
+      expect(
+        hostEl.nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+    });
+
+    it("should update form control on toggle", () => {
+      const button = hostFixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+      button.nativeElement.click();
+      hostFixture.detectChanges();
+
+      expect(host.control.value).toBe(true);
+    });
+
+    it("should mark form control as touched on toggle", () => {
+      expect(host.control.touched).toBe(false);
+
+      const button = hostFixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+      button.nativeElement.click();
+      hostFixture.detectChanges();
+
+      expect(host.control.touched).toBe(true);
+    });
+  });
+
+  describe("reactive forms - multiselect", () => {
+    let hostFixture: ComponentFixture<MultiselectHostComponent>;
+    let host: MultiselectHostComponent;
+    let filterComponent: FilterComponent;
+
+    beforeEach(() => {
+      hostFixture = TestBed.createComponent(MultiselectHostComponent);
+      host = hostFixture.componentInstance;
+      hostFixture.detectChanges();
+      filterComponent = hostFixture.debugElement.query(
+        By.directive(FilterComponent),
+      ).componentInstance;
+    });
+
+    it("should write value from form control", () => {
+      host.control.setValue(["a", "b"]);
+      hostFixture.detectChanges();
+
+      expect(filterComponent.values()).toEqual(["a", "b"]);
+    });
+
+    it("should update form control on option toggle", () => {
+      filterComponent.toggleOption("a");
+      hostFixture.detectChanges();
+
+      expect(host.control.value).toEqual(["a"]);
+    });
+
+    it("should update form control on clear", () => {
+      host.control.setValue(["a", "b"]);
+      hostFixture.detectChanges();
+
+      filterComponent.clearSelection();
+      hostFixture.detectChanges();
+
+      expect(host.control.value).toEqual([]);
+    });
+
+    it("should update form control on select all", () => {
+      filterComponent.toggleSelectAll();
+      hostFixture.detectChanges();
+
+      expect(host.control.value).toEqual(["a", "b", "c"]);
+    });
+
+    it("should mark form control as touched on interaction", () => {
+      expect(host.control.touched).toBe(false);
+
+      filterComponent.toggleOption("a");
+      hostFixture.detectChanges();
+
+      expect(host.control.touched).toBe(true);
+    });
+  });
+
+  describe("single-select mode", () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput("options", TEST_OPTIONS);
+      fixture.detectChanges();
+    });
+
+    it("should show dropdown arrow", () => {
+      const icon = fixture.debugElement.query(
+        By.css("tedi-icon[name='arrow_drop_down']"),
+      );
+      expect(icon).toBeTruthy();
+    });
+
+    it("should not show check icon", () => {
+      fixture.componentRef.setInput("value", "a");
+      fixture.detectChanges();
+
+      const icon = fixture.debugElement.query(
+        By.css("tedi-icon[name='check']"),
+      );
+      expect(icon).toBeNull();
+    });
+
+    it("should not show count badge", () => {
+      fixture.componentRef.setInput("value", "a");
+      fixture.detectChanges();
+
+      const badge = fixture.debugElement.query(By.css("tedi-status-badge"));
+      expect(badge).toBeNull();
+    });
+
+    it("should render default type dropdown-item-value", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options tedi-dropdown-item-value"),
+      );
+      expect(items.length).toBe(TEST_OPTIONS.length);
+      items.forEach((item) => {
+        expect(item.componentInstance.type()).toBe("default");
+      });
+    });
+
+    it("should not have aria-multiselectable on listbox", () => {
+      const options = fixture.debugElement.query(
+        By.css(".tedi-filter-dropdown__options"),
+      );
+      expect(
+        options.nativeElement.getAttribute("aria-multiselectable"),
+      ).toBeNull();
+    });
+
+    it("should select option via selectOption", () => {
+      component.selectOption("a");
+      expect(component.value()).toBe("a");
+    });
+
+    it("should deselect option when selecting same value", () => {
+      component.selectOption("a");
+      expect(component.value()).toBe("a");
+
+      component.selectOption("a");
+      expect(component.value()).toBe("");
+    });
+
+    it("should replace selection when selecting different value", () => {
+      component.selectOption("a");
+      component.selectOption("b");
+      expect(component.value()).toBe("b");
+    });
+
+    it("should show selected class when value is set", () => {
+      fixture.componentRef.setInput("value", "a");
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.nativeElement.classList.contains(
+          "tedi-filter--selected",
+        ),
+      ).toBe(true);
+    });
+
+    it("should not show selected class when value is empty", () => {
+      expect(
+        fixture.debugElement.nativeElement.classList.contains(
+          "tedi-filter--selected",
+        ),
+      ).toBe(false);
+    });
+
+    it("should mark option as selected via aria-selected", () => {
+      fixture.componentRef.setInput("value", "a");
+      fixture.detectChanges();
+
+      const items = fixture.debugElement.queryAll(
+        By.css("[role='option']"),
+      );
+      expect(items[0].nativeElement.getAttribute("aria-selected")).toBe(
+        "true",
+      );
+      expect(items[1].nativeElement.getAttribute("aria-selected")).toBe(
+        "false",
+      );
+    });
+
+    it("should clear single selection", () => {
+      fixture.componentRef.setInput("value", "a");
+      fixture.detectChanges();
+
+      component.clearSingleSelection();
+      expect(component.value()).toBe("");
+    });
+
+    it("should select option on item click", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options .tedi-filter-dropdown__item"),
+      );
+      items[0].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(component.value()).toBe("a");
+    });
+
+    it("should not select disabled option on click", () => {
+      const items = fixture.debugElement.queryAll(
+        By.css(".tedi-filter-dropdown__options .tedi-filter-dropdown__item"),
+      );
+      items[3].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(component.value()).toBe("");
+    });
+
+    it("should select option on Enter keydown", () => {
+      component.onOptionsFocus();
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: "Enter" }),
+      );
+      expect(component.value()).toBe("a");
+    });
+
+    it("should select option on Space keydown", () => {
+      component.onOptionsFocus();
+      component.onOptionsKeydown(
+        new KeyboardEvent("keydown", { key: " " }),
+      );
+      expect(component.value()).toBe("a");
+    });
+
+    it("should filter options by search term", () => {
+      component.searchTerm.set("option a");
+      expect(component.filteredOptions().length).toBe(1);
+    });
+  });
+
+  describe("reactive forms - single-select with options", () => {
+    let hostFixture: ComponentFixture<SingleSelectHostComponent2>;
+    let host: SingleSelectHostComponent2;
+    let filterComponent: FilterComponent;
+
+    beforeEach(() => {
+      hostFixture = TestBed.createComponent(SingleSelectHostComponent2);
+      host = hostFixture.componentInstance;
+      hostFixture.detectChanges();
+      filterComponent = hostFixture.debugElement.query(
+        By.directive(FilterComponent),
+      ).componentInstance;
+    });
+
+    it("should write value from form control", () => {
+      host.control.setValue("a");
+      hostFixture.detectChanges();
+
+      expect(filterComponent.value()).toBe("a");
+    });
+
+    it("should update form control on option select", () => {
+      filterComponent.selectOption("b");
+      hostFixture.detectChanges();
+
+      expect(host.control.value).toBe("b");
+    });
+
+    it("should update form control on clear", () => {
+      host.control.setValue("a");
+      hostFixture.detectChanges();
+
+      filterComponent.clearSingleSelection();
+      hostFixture.detectChanges();
+
+      expect(host.control.value).toBe("");
+    });
+
+    it("should mark form control as touched on interaction", () => {
+      expect(host.control.touched).toBe(false);
+
+      filterComponent.selectOption("a");
+      hostFixture.detectChanges();
+
+      expect(host.control.touched).toBe(true);
+    });
+  });
+
+  describe("custom dropdown content", () => {
+    let hostFixture: ComponentFixture<FilterWithCustomContentHostComponent>;
+    let host: FilterWithCustomContentHostComponent;
+
+    beforeEach(() => {
+      hostFixture = TestBed.createComponent(
+        FilterWithCustomContentHostComponent,
+      );
+      host = hostFixture.componentInstance;
+      hostFixture.detectChanges();
+    });
+
+    it("should render custom content in dropdown", () => {
+      const customContent = hostFixture.debugElement.query(
+        By.css(".custom-datepicker"),
+      );
+      expect(customContent).toBeTruthy();
+      expect(customContent.nativeElement.textContent).toContain(
+        "Custom datepicker content",
+      );
+    });
+
+    it("should show dropdown arrow icon", () => {
+      const icon = hostFixture.debugElement.query(
+        By.css("tedi-icon[name='arrow_drop_down']"),
+      );
+      expect(icon).toBeTruthy();
+    });
+
+    it("should not show check icon when not selected", () => {
+      const icon = hostFixture.debugElement.query(
+        By.css("tedi-icon[name='check']"),
+      );
+      expect(icon).toBeNull();
+    });
+
+    it("should not render multiselect checkboxes", () => {
+      const checkboxes = hostFixture.debugElement.queryAll(
+        By.css("tedi-dropdown-item-value"),
+      );
+      expect(checkboxes.length).toBe(0);
+    });
+
+    it("should not show count badge", () => {
+      const badge = hostFixture.debugElement.query(
+        By.css("tedi-status-badge"),
+      );
+      expect(badge).toBeNull();
+    });
+
+    it("should apply selected class when selected input is true", () => {
+      host.selected = true;
+      hostFixture.detectChanges();
+
+      const filterEl = hostFixture.debugElement.query(
+        By.directive(FilterComponent),
+      );
+      expect(
+        filterEl.nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+    });
+
+    it("should apply custom modifier class on dropdown panel", () => {
+      const panel = hostFixture.debugElement.query(
+        By.css(".tedi-filter-dropdown--custom"),
+      );
+      expect(panel).toBeTruthy();
+    });
+
+    it("should have aria-haspopup on button", () => {
+      const button = hostFixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+      expect(
+        button.nativeElement.hasAttribute("aria-haspopup"),
+      ).toBe(true);
+    });
+  });
+});
diff --git a/tedi/components/form/filter/filter.component.ts b/tedi/components/form/filter/filter.component.ts
new file mode 100644
index 000000000..2a6667f8a
--- /dev/null
+++ b/tedi/components/form/filter/filter.component.ts
@@ -0,0 +1,466 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewEncapsulation,
+  computed,
+  contentChild,
+  forwardRef,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+} from "@angular/core";
+import { _IdGenerator } from "@angular/cdk/a11y";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { NgTemplateOutlet } from "@angular/common";
+import { IconComponent } from "../../base/icon/icon.component";
+import { StatusBadgeComponent } from "../../tags/status-badge/status-badge.component";
+import { SeparatorComponent } from "../../helpers/separator/separator.component";
+import { DropdownComponent } from "../../overlay/dropdown/dropdown.component";
+import { DropdownTriggerDirective } from "../../overlay/dropdown/dropdown-trigger/dropdown-trigger.directive";
+import { DropdownContentComponent } from "../../overlay/dropdown/dropdown-content/dropdown-content.component";
+import { DropdownItemValueComponent } from "../../overlay/dropdown/dropdown-item-value/dropdown-item-value.component";
+import { DropdownItemValueLabelComponent } from "../../overlay/dropdown/dropdown-item-value/dropdown-item-value-label.component";
+import { FormFieldComponent } from "../form-field/form-field.component";
+import { TextFieldComponent } from "../text-field/text-field.component";
+import { FilterContentDirective } from "./filter-content.directive";
+
+export type FilterVariant = "primary" | "secondary";
+export type FilterSize = "default" | "large";
+
+export interface FilterOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+@Component({
+  selector: "tedi-filter",
+  standalone: true,
+  imports: [
+    NgTemplateOutlet,
+    IconComponent,
+    StatusBadgeComponent,
+    SeparatorComponent,
+    DropdownComponent,
+    DropdownTriggerDirective,
+    DropdownContentComponent,
+    DropdownItemValueComponent,
+    DropdownItemValueLabelComponent,
+    FormFieldComponent,
+    TextFieldComponent,
+    FilterContentDirective,
+  ],
+  templateUrl: "./filter.component.html",
+  styleUrl: "./filter.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FilterComponent),
+      multi: true,
+    },
+  ],
+  host: {
+    class: "tedi-filter",
+    "[class.tedi-filter--primary]": "variant() === 'primary'",
+    "[class.tedi-filter--secondary]": "variant() === 'secondary'",
+    "[class.tedi-filter--large]": "size() === 'large'",
+    "[class.tedi-filter--selected]": "isSelected()",
+    "[class.tedi-filter--disabled]": "disabled()",
+  },
+})
+export class FilterComponent implements ControlValueAccessor {
+  /**
+   * Filter label text.
+   */
+  readonly text = input<string>("");
+  /**
+   * Visual variant of the filter.
+   * @default primary
+   */
+  readonly variant = input<FilterVariant>("primary");
+  /**
+   * Size of the filter.
+   * @default default
+   */
+  readonly size = input<FilterSize>("default");
+  /**
+   * Whether the filter is selected (boolean mode).
+   * @default false
+   */
+  readonly selected = model<boolean>(false);
+  /**
+   * Multi-select mode renders checkboxes and allows multiple selections.
+   * When false and options are provided, single-select mode is used.
+   * @default false
+   */
+  readonly multiselect = input<boolean>(false);
+  /**
+   * Options for the dropdown (single-select or multiselect).
+   */
+  readonly options = input<FilterOption[]>([]);
+  /**
+   * Selected value in single-select mode. Two-way bound.
+   */
+  readonly value = model<string>("");
+  /**
+   * Selected values in multiselect mode. Two-way bound.
+   */
+  readonly values = model<string[]>([]);
+  /**
+   * Show search field in the dropdown.
+   * @default false
+   */
+  readonly searchable = input<boolean>(false);
+  /**
+   * Show "Select all" option in the dropdown.
+   * @default false
+   */
+  readonly showSelectAll = input<boolean>(false);
+  /**
+   * Show "Clear selection" action in the dropdown.
+   * @default false
+   */
+  readonly showClear = input<boolean>(false);
+  /**
+   * Label for "Select all" option.
+   * @default Vali kõik
+   */
+  readonly selectAllLabel = input<string>("Vali kõik");
+  /**
+   * Label for "Clear selection" action.
+   * @default Tühjenda valik
+   */
+  readonly clearLabel = input<string>("Tühjenda valik");
+  /**
+   * Emitted when the clear button is clicked in a custom content dropdown.
+   */
+  readonly cleared = output<void>();
+  /**
+   * Append dropdown to given selector.
+   * Use 'body' to append at the end of DOM or empty string to append next to trigger.
+   * @default ""
+   */
+  readonly appendTo = input("");
+
+  readonly dropdown = viewChild<DropdownComponent>("dropdown");
+  private readonly dropdownPanel =
+    viewChild<ElementRef<HTMLElement>>("dropdownPanel");
+  private readonly optionsList =
+    viewChild<ElementRef<HTMLElement>>("optionsList");
+  private readonly triggerBtn =
+    viewChild<ElementRef<HTMLButtonElement>>("triggerBtn");
+
+  private readonly customContent = contentChild(FilterContentDirective);
+  readonly hasCustomContent = computed(() => !!this.customContent());
+  readonly hasOptions = computed(() => this.options().length > 0);
+  readonly isSingleSelect = computed(
+    () => this.hasOptions() && !this.multiselect(),
+  );
+  readonly hasDropdown = computed(
+    () => this.hasOptions() || this.hasCustomContent(),
+  );
+
+  private readonly idGenerator = inject(_IdGenerator);
+  private readonly baseId = this.idGenerator.getId("tedi-filter");
+
+  readonly disabled = signal(false);
+  readonly searchTerm = signal("");
+  readonly activeOptionIndex = signal<number>(-1);
+
+  readonly activeDescendantId = computed(() => {
+    const idx = this.activeOptionIndex();
+    if (idx === -1) return null;
+    const option = this.filteredOptions()[idx];
+    return option ? this.getOptionId(option.value) : null;
+  });
+
+  readonly iconSize = computed(() => (this.size() === "large" ? 24 : 18));
+
+  readonly isSelected = computed(() => {
+    if (this.multiselect()) {
+      return this.values().length > 0;
+    }
+    if (this.isSingleSelect()) {
+      return this.value() !== "";
+    }
+    return this.selected();
+  });
+
+  readonly selectedCount = computed(() => this.values().length);
+
+  readonly selectedLabel = computed(() => {
+    const val = this.value();
+    if (!val) return null;
+    return this.options().find((opt) => opt.value === val)?.label ?? null;
+  });
+
+  readonly displayText = computed(() => {
+    if (this.isSingleSelect()) {
+      return this.selectedLabel() ?? this.text();
+    }
+    return this.text();
+  });
+
+  readonly filteredOptions = computed(() => {
+    const term = this.searchTerm().toLowerCase();
+    if (!term) return this.options();
+    return this.options().filter((opt) =>
+      opt.label.toLowerCase().includes(term),
+    );
+  });
+
+  readonly allFilteredSelected = computed(() => {
+    const filtered = this.filteredOptions().filter((opt) => !opt.disabled);
+    if (filtered.length === 0) return false;
+    const vals = this.values();
+    return filtered.every((opt) => vals.includes(opt.value));
+  });
+
+  readonly someFilteredSelected = computed(() => {
+    const filtered = this.filteredOptions().filter((opt) => !opt.disabled);
+    const vals = this.values();
+    const selectedCount = filtered.filter((opt) =>
+      vals.includes(opt.value),
+    ).length;
+    return selectedCount > 0 && selectedCount < filtered.length;
+  });
+
+  private onChange: (value: boolean | string | string[]) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  writeValue(value: boolean | string | string[]): void {
+    if (this.multiselect()) {
+      this.values.set(Array.isArray(value) ? value : []);
+    } else if (this.isSingleSelect()) {
+      this.value.set(typeof value === "string" ? value : "");
+    } else {
+      this.selected.set(!!value);
+    }
+  }
+
+  registerOnChange(fn: (value: boolean | string | string[]) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  toggle(): void {
+    const newValue = !this.selected();
+    this.selected.set(newValue);
+    this.onChange(newValue);
+    this.onTouched();
+  }
+
+  getOptionId(value: string): string {
+    return `${this.baseId}-option-${value}`;
+  }
+
+  isOptionSelected(value: string): boolean {
+    if (this.isSingleSelect()) {
+      return this.value() === value;
+    }
+    return this.values().includes(value);
+  }
+
+  selectOption(value: string): void {
+    const newValue = this.value() === value ? "" : value;
+    this.value.set(newValue);
+    this.onChange(newValue);
+    this.onTouched();
+    this.dropdown()?.hideDropdown();
+    this.triggerBtn()?.nativeElement.focus();
+  }
+
+  toggleOption(value: string): void {
+    const current = this.values();
+    const newValues = current.includes(value)
+      ? current.filter((v) => v !== value)
+      : [...current, value];
+    this.values.set(newValues);
+    this.onChange(newValues);
+    this.onTouched();
+  }
+
+  toggleSelectAll(): void {
+    const filtered = this.filteredOptions().filter((opt) => !opt.disabled);
+    let newValues: string[];
+    if (this.allFilteredSelected()) {
+      const filteredValues = new Set(filtered.map((opt) => opt.value));
+      newValues = this.values().filter((v) => !filteredValues.has(v));
+    } else {
+      const current = new Set(this.values());
+      filtered.forEach((opt) => current.add(opt.value));
+      newValues = [...current];
+    }
+    this.values.set(newValues);
+    this.onChange(newValues);
+    this.onTouched();
+  }
+
+  clearSelection(): void {
+    this.values.set([]);
+    this.onChange([]);
+    this.onTouched();
+  }
+
+  clearSingleSelection(): void {
+    this.value.set("");
+    this.onChange("");
+    this.onTouched();
+  }
+
+  onCustomClear(): void {
+    this.cleared.emit();
+  }
+
+  onSearchInput(event: Event): void {
+    this.searchTerm.set((event.target as HTMLInputElement).value);
+  }
+
+  focusDropdownContent(keyboard = false): void {
+    setTimeout(() => {
+      if (!this.dropdown()?.floatUiComponent().state) return;
+      const focusable = this.getTabStops();
+      focusable[0]?.focus();
+      if (!keyboard) {
+        this.activeOptionIndex.set(-1);
+      }
+    });
+  }
+
+  handleDropdownKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        this.dropdown()?.hideDropdown();
+        this.triggerBtn()?.nativeElement.focus();
+        break;
+
+      case "Tab":
+        this.handleTabKey(event);
+        break;
+    }
+  }
+
+  onOptionsFocus(): void {
+    if (this.activeOptionIndex() === -1) {
+      this.activeOptionIndex.set(this.findNextEnabledIndex(-1, 1));
+    }
+  }
+
+  onOptionsBlur(): void {
+    this.activeOptionIndex.set(-1);
+  }
+
+  onOptionsKeydown(event: KeyboardEvent): void {
+    const options = this.filteredOptions();
+
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const next = this.findNextEnabledIndex(
+          this.activeOptionIndex(),
+          1,
+        );
+        if (next !== -1) this.setActiveOption(next);
+        break;
+      }
+
+      case "ArrowUp": {
+        event.preventDefault();
+        const prev = this.findNextEnabledIndex(
+          this.activeOptionIndex(),
+          -1,
+        );
+        if (prev !== -1) this.setActiveOption(prev);
+        break;
+      }
+
+      case "Home":
+        event.preventDefault();
+        this.setActiveOption(this.findNextEnabledIndex(-1, 1));
+        break;
+
+      case "End":
+        event.preventDefault();
+        this.setActiveOption(
+          this.findNextEnabledIndex(options.length, -1),
+        );
+        break;
+
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        const idx = this.activeOptionIndex();
+        const option = options[idx];
+        if (option && !option.disabled) {
+          if (this.isSingleSelect()) {
+            this.selectOption(option.value);
+          } else {
+            this.toggleOption(option.value);
+          }
+        }
+        break;
+      }
+    }
+  }
+
+  private handleTabKey(event: KeyboardEvent): void {
+    const tabStops = this.getTabStops();
+    if (!tabStops.length) return;
+
+    const currentIndex = tabStops.indexOf(
+      document.activeElement as HTMLElement,
+    );
+
+    if (event.shiftKey && currentIndex <= 0) {
+      event.preventDefault();
+      tabStops[tabStops.length - 1].focus();
+    } else if (!event.shiftKey && currentIndex === tabStops.length - 1) {
+      event.preventDefault();
+      tabStops[0].focus();
+    }
+  }
+
+  private findNextEnabledIndex(from: number, direction: 1 | -1): number {
+    const options = this.filteredOptions();
+    let index = from + direction;
+    while (index >= 0 && index < options.length) {
+      if (!options[index].disabled) return index;
+      index += direction;
+    }
+    return -1;
+  }
+
+  private setActiveOption(index: number): void {
+    this.activeOptionIndex.set(index);
+    const container = this.optionsList()?.nativeElement;
+    if (!container || index === -1) return;
+    const items = container.querySelectorAll<HTMLElement>(
+      ".tedi-filter-dropdown__item",
+    );
+    items[index]?.scrollIntoView({ block: "nearest" });
+  }
+
+  private getTabStops(): HTMLElement[] {
+    const panel = this.dropdownPanel()?.nativeElement;
+    if (!panel) return [];
+    return Array.from(
+      panel.querySelectorAll<HTMLElement>(
+        'input:not([disabled]):not([tabindex="-1"]), button:not([disabled]), [role="option"][tabindex="0"], [role="listbox"][tabindex="0"]',
+      ),
+    );
+  }
+}
diff --git a/tedi/components/form/filter/filter.stories.ts b/tedi/components/form/filter/filter.stories.ts
new file mode 100644
index 000000000..7a343473c
--- /dev/null
+++ b/tedi/components/form/filter/filter.stories.ts
@@ -0,0 +1,622 @@
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import {
+  AlertComponent,
+  ButtonComponent,
+  FilterComponent,
+  FilterContentDirective,
+  FilterGroupComponent,
+  RowComponent,
+  ColComponent,
+  SeparatorComponent,
+  StatusBadgeComponent,
+  StatusIndicatorComponent,
+  TagComponent,
+  TextComponent,
+} from "@tedi-design-system/angular/tedi";
+import { IconComponent } from "../../base/icon/icon.component";
+import { RadioComponent } from "../radio/radio.component";
+import { RadioGroupComponent } from "../radio-group/radio-group.component";
+import { LabelComponent } from "../label/label.component";
+
+export default {
+  title: "TEDI-Ready/Components/Form/Filter",
+  component: FilterComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        AlertComponent,
+        ButtonComponent,
+        FilterComponent,
+        FilterContentDirective,
+        FilterGroupComponent,
+        IconComponent,
+        ReactiveFormsModule,
+        RowComponent,
+        ColComponent,
+        SeparatorComponent,
+        StatusBadgeComponent,
+        StatusIndicatorComponent,
+        TagComponent,
+        TextComponent,
+        RadioComponent,
+        RadioGroupComponent,
+        LabelComponent,
+      ],
+    }),
+  ],
+  argTypes: {
+    text: {
+      description: "Filter label text",
+      control: { type: "text" },
+      table: {
+        category: "inputs",
+        type: { summary: "string" },
+        defaultValue: { summary: "''" },
+      },
+    },
+    variant: {
+      description: "Visual variant of the filter",
+      control: { type: "radio" },
+      options: ["primary", "secondary"],
+      table: {
+        category: "inputs",
+        type: { summary: "FilterVariant" },
+        defaultValue: { summary: "primary" },
+      },
+    },
+    size: {
+      description: "Size of the filter",
+      control: { type: "radio" },
+      options: ["default", "large"],
+      table: {
+        category: "inputs",
+        type: { summary: "FilterSize" },
+        defaultValue: { summary: "default" },
+      },
+    },
+    selected: {
+      description: "Whether the filter is selected (single-select mode)",
+      control: { type: "boolean" },
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    multiselect: {
+      description:
+        "Multi-select mode opens a dropdown with checkbox options",
+      control: { type: "boolean" },
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    values: {
+      description: "Selected values in multiselect mode (two-way bound)",
+      control: { type: "object" },
+      table: {
+        category: "inputs",
+        type: { summary: "string[]" },
+        defaultValue: { summary: "[]" },
+      },
+    },
+    options: {
+      description: "Options for multiselect dropdown",
+      control: { type: "object" },
+      table: {
+        category: "inputs",
+        type: { summary: "FilterOption[]" },
+        defaultValue: { summary: "[]" },
+      },
+    },
+    searchable: {
+      description: "Show search field in the dropdown",
+      control: { type: "boolean" },
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    showSelectAll: {
+      description: 'Show "Select all" option in the dropdown',
+      control: { type: "boolean" },
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    showClear: {
+      description: 'Show "Clear selection" action in the dropdown',
+      control: { type: "boolean" },
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    selectAllLabel: {
+      description: 'Label for "Select all" option',
+      control: { type: "text" },
+      table: {
+        category: "inputs",
+        type: { summary: "string" },
+        defaultValue: { summary: "Vali kõik" },
+      },
+    },
+    clearLabel: {
+      description: 'Label for "Clear selection" action',
+      control: { type: "text" },
+      table: {
+        category: "inputs",
+        type: { summary: "string" },
+        defaultValue: { summary: "Tühjenda valik" },
+      },
+    },
+    appendTo: {
+      description:
+        "Append dropdown to given selector. Use 'body' to append at end of DOM",
+      control: { type: "text" },
+      table: {
+        category: "inputs",
+        type: { summary: "string" },
+        defaultValue: { summary: "''" },
+      },
+    },
+  },
+} as Meta<FilterComponent>;
+
+export const Default: StoryObj<FilterComponent> = {
+  args: {
+    text: "Teenused",
+  },
+};
+
+export const Multiselect: StoryObj<FilterComponent> = {
+  render: () => ({
+    props: {
+      options: [
+        { label: "Fertilitas", value: "1" },
+        { label: "Ida-Tallinna Keskhaigla", value: "2" },
+        { label: "Lääne-Tallinna Keskhaigla", value: "3" },
+        { label: "Põhja-Eesti Regionaalhaigla", value: "4" },
+        { label: "Tallinna Lastehaigla", value: "5" },
+        { label: "Tartu Ülikooli Kliinikum", value: "6" },
+        { label: "Pärnu Haigla", value: "7" },
+        { label: "Kuressaare Haigla", value: "8" },
+        { label: "Rakvere Haigla", value: "9" },
+        { label: "Järvamaa Haigla", value: "10" },
+        { label: "Viljandi Haigla", value: "11" },
+        { label: "Narva Haigla", value: "12" },
+      ],
+      values: [] as string[],
+    },
+    template: `
+      <tedi-filter
+        text="Raviasutus"
+        [multiselect]="true"
+        [options]="options"
+        [(values)]="values"
+        [searchable]="true"
+        [showSelectAll]="true"
+        [showClear]="true"
+        appendTo="body"
+      />
+    `,
+  }),
+};
+
+export const SingleSelect: StoryObj<FilterComponent> = {
+  render: () => ({
+    props: {
+      options: [
+        { label: "Optometristi vastuvõtt", value: "1" },
+        { label: "Silmaarsti vastuvõtt", value: "2" },
+        { label: "Hambaarsti vastuvõtt", value: "3" },
+      ],
+      value: "",
+    },
+    template: `
+      <tedi-filter
+        text="Teenus"
+        [options]="options"
+        [(value)]="value"
+        [searchable]="true"
+        [showClear]="false"
+        appendTo="body"
+      />
+    `,
+  }),
+};
+
+export const CustomizeContent: StoryObj<FilterComponent> = {
+  render: () => ({
+    template: `
+      <div class="flex flex-column gap-2">
+        <tedi-filter-group>
+          <tedi-filter text="Unread (3)" variant="secondary" size="large">
+            <tedi-status-indicator tediFilterPrepend type="danger" />
+          </tedi-filter>
+          <tedi-filter text="All" variant="secondary" size="large" />
+        </tedi-filter-group>
+
+        <tedi-filter-group>
+          <tedi-filter text="Unread (3)" variant="secondary" size="large" [selected]="true">
+            <tedi-status-indicator tediFilterPrepend type="danger" />
+          </tedi-filter>
+          <tedi-filter text="All" variant="secondary" size="large" />
+        </tedi-filter-group>
+
+        <tedi-filter-group>
+          <tedi-filter text="Submitted" variant="secondary" size="large">
+            <tedi-status-badge tediFilterPrepend text="5" color="brand" />
+          </tedi-filter>
+          <tedi-filter text="Requires attention" variant="secondary" size="large">
+            <tedi-status-badge tediFilterPrepend text="7" color="danger" />
+          </tedi-filter>
+        </tedi-filter-group>
+
+        <tedi-filter-group>
+          <tedi-filter text="Submitted" variant="secondary" size="large" [selected]="true">
+            <tedi-status-badge tediFilterPrepend text="5" color="brand" />
+          </tedi-filter>
+          <tedi-filter text="Requires attention" variant="secondary" size="large">
+            <tedi-status-badge tediFilterPrepend text="7" color="danger" />
+          </tedi-filter>
+        </tedi-filter-group>
+      </div>
+    `,
+  }),
+};
+
+export const GroupedFilters: StoryObj<FilterComponent> = {
+  render: () => ({
+    template: `
+      <tedi-row cols="auto" [gap]="3">
+        <tedi-col>
+          <tedi-filter-group>
+            <tedi-filter text="Kõik" [selected]="true" />
+            <tedi-filter text="Aktiivsed" />
+            <tedi-filter text="Lõpetatud" />
+          </tedi-filter-group>
+        </tedi-col>
+        <tedi-col>
+          <tedi-filter-group>
+            <tedi-filter text="Kõik" variant="secondary" [selected]="true" />
+            <tedi-filter text="Aktiivsed" variant="secondary" />
+            <tedi-filter text="Lõpetatud" variant="secondary" />
+          </tedi-filter-group>
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};
+
+export const States: StoryObj<FilterComponent> = {
+  parameters: {
+    pseudo: {
+      hover: ".pseudo-hover .tedi-filter__button",
+      active: ".pseudo-active .tedi-filter__button",
+      focusVisible: ".pseudo-focus .tedi-filter__button",
+    },
+  },
+  render: () => ({
+    props: {
+      STATES: ["Default", "Hover", "Active", "Focus", "Selected"],
+      options: [
+        { label: "Optometristi vastuvõtt", value: "1" },
+        { label: "Silmaarsti vastuvõtt", value: "2" },
+        { label: "Hambaarsti vastuvõtt", value: "3" },
+      ],
+    },
+    template: `
+      <tedi-row [cols]="6" [gapY]="3" alignItems="center">
+        <tedi-col><p tedi-text modifiers="bold">State</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Primary multiselect</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Secondary multiselect</p></tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Large</p></tedi-col>
+
+        @for (state of STATES; track state) {
+          <tedi-col><p tedi-text>{{ state }}</p></tedi-col>
+          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+            <tedi-filter text="Filter" [selected]="state === 'Selected'" />
+          </tedi-col>
+          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+            <tedi-filter text="Filter" [multiselect]="true" [options]="options" [values]="state === 'Selected' ? ['1', '2'] : []" appendTo="body" />
+          </tedi-col>
+          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+            <tedi-filter text="Filter" variant="secondary" [selected]="state === 'Selected'" />
+          </tedi-col>
+          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+            <tedi-filter text="Filter" variant="secondary" [multiselect]="true" [options]="options" [values]="state === 'Selected' ? ['1', '2'] : []" appendTo="body" />
+          </tedi-col>
+          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+            <tedi-filter text="Filter" size="large" [selected]="state === 'Selected'" />
+          </tedi-col>
+        }
+      </tedi-row>
+    `,
+  }),
+};
+
+export const CustomContent: StoryObj<FilterComponent> = {
+  render: () => ({
+    props: {
+      selectedPeriod: "",
+      periods: [
+        { value: "day", label: "Päev" },
+        { value: "week", label: "Nädal" },
+        { value: "month", label: "Kuu" },
+        { value: "year", label: "Aasta" },
+      ],
+      getLabel(periods: { value: string; label: string }[], value: string): string {
+        return periods.find((p) => p.value === value)?.label ?? "Periood";
+      },
+    },
+    template: `
+      <tedi-row cols="1" [gapY]="3">
+        <tedi-col class="flex gap-2">
+          <tedi-filter
+            [text]="getLabel(periods, selectedPeriod)"
+            [selected]="!!selectedPeriod"
+            [showClear]="true"
+            (cleared)="selectedPeriod = ''"
+            appendTo="body"
+          >
+            <div tediFilterContent>
+              <tedi-radio-group label="Periood" direction="vertical">
+                @for (period of periods; track period.value) {
+                  <label tedi-label color="primary" class="flex align-items-center gap-2">
+                    <input
+                      tedi-radio
+                      type="radio"
+                      name="period"
+                      [value]="period.value"
+                      [checked]="selectedPeriod === period.value"
+                      (change)="selectedPeriod = period.value"
+                    />
+                    {{ period.label }}
+                  </label>
+                }
+              </tedi-radio-group>
+            </div>
+          </tedi-filter>
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};
+
+export const WithReactiveForms: StoryObj<FilterComponent> = {
+  render: () => {
+    const singleControl = new FormControl<boolean>(false);
+    const multiControl = new FormControl<string[]>([]);
+    const options = [
+      { label: "Optometristi vastuvõtt", value: "1" },
+      { label: "Silmaarsti vastuvõtt", value: "2" },
+      { label: "Hambaarsti vastuvõtt", value: "3" },
+    ];
+
+    return {
+      props: { singleControl, multiControl, options },
+      template: `
+        <tedi-row cols="1" [gapY]="3">
+          <tedi-col class="flex gap-2">
+            <tedi-filter
+              text="Vastuvõtud"
+              [formControl]="singleControl"
+            />
+            <tedi-filter
+              text="Teenused"
+              [multiselect]="true"
+              [options]="options"
+              [formControl]="multiControl"
+              [searchable]="true"
+              [showSelectAll]="true"
+              [showClear]="true"
+              appendTo="body"
+            />
+          </tedi-col>
+          <tedi-col>
+            <tedi-alert type="info" [showClose]="false">
+              <pre tedi-text modifiers="small">{{ {
+  single: {
+    value: singleControl.value,
+    touched: singleControl.touched,
+    dirty: singleControl.dirty
+  },
+  multi: {
+    value: multiControl.value,
+    touched: multiControl.touched,
+    dirty: multiControl.dirty
+  }
+} | json }}</pre>
+            </tedi-alert>
+          </tedi-col>
+        </tedi-row>
+      `,
+    };
+  },
+};
+
+export const Examples: StoryObj<FilterComponent> = {
+  render: () => {
+    const vastuvotudControl = new FormControl<boolean>(true);
+    const analuusidControl = new FormControl<boolean>(true);
+    const uuringudControl = new FormControl<boolean>(false);
+    const uuringControl = new FormControl<string>("");
+    const raviasutusControl = new FormControl<string[]>([
+      "ltk",
+      "perh",
+    ]);
+    const teenusControl = new FormControl<string>("");
+    const aegAlatesControl = new FormControl<string>("");
+
+    const uuringOptions = [
+      { label: "Vereanalüüs", value: "1" },
+      { label: "Röntgen", value: "2" },
+      { label: "Ultraheli", value: "3" },
+      { label: "MRT", value: "4" },
+    ];
+    const raviasutusOptions = [
+      { label: "Fertilitas", value: "fertilitas" },
+      { label: "Ida-Tallinna Keskhaigla", value: "itk" },
+      { label: "Lääne-Tallinna Keskhaigla", value: "ltk" },
+      { label: "Põhja-Eesti Regionaalhaigla", value: "perh" },
+      { label: "Tallinna Lastehaigla", value: "tlh" },
+      { label: "Tartu Ülikooli Kliinikum", value: "tuk" },
+    ];
+    const teenusOptions = [
+      { label: "Optometristi vastuvõtt", value: "1" },
+      { label: "Silmaarsti vastuvõtt", value: "2" },
+      { label: "Hambaarsti vastuvõtt", value: "3" },
+    ];
+    const aegAlatesOptions = [
+      { label: "Viimane nädal", value: "1" },
+      { label: "Viimane kuu", value: "2" },
+      { label: "Viimane aasta", value: "3" },
+    ];
+
+    return {
+      props: {
+        vastuvotudControl,
+        analuusidControl,
+        uuringudControl,
+        uuringControl,
+        raviasutusControl,
+        teenusControl,
+        aegAlatesControl,
+        uuringOptions,
+        raviasutusOptions,
+        teenusOptions,
+        aegAlatesOptions,
+        clearAll() {
+          [vastuvotudControl, analuusidControl, uuringudControl].forEach((c) => c.setValue(false));
+          [uuringControl, teenusControl, aegAlatesControl].forEach((c) => c.setValue(""));
+          raviasutusControl.setValue([]);
+        },
+        filters: [
+          { label: "Vastuvõtud", control: vastuvotudControl },
+          { label: "Analüüsid", control: analuusidControl },
+          { label: "Uuringud", control: uuringudControl },
+          { label: "Uuring", control: uuringControl, options: uuringOptions },
+          { label: "Raviasutus", control: raviasutusControl, options: raviasutusOptions },
+          { label: "Teenus", control: teenusControl, options: teenusOptions },
+          { label: "Aeg alates", control: aegAlatesControl, options: aegAlatesOptions },
+        ],
+        getTags(filters: { label: string; control: FormControl; options?: { label: string; value: string }[] }[]) {
+          const tags: { text: string; remove: () => void }[] = [];
+          for (const f of filters) {
+            const val = f.control.value;
+            if (Array.isArray(val)) {
+              for (const v of val) {
+                const optLabel = f.options?.find((o) => o.value === v)?.label ?? v;
+                tags.push({
+                  text: `${f.label}: ${optLabel}`,
+                  remove: () => f.control.setValue(val.filter((x: string) => x !== v)),
+                });
+              }
+            } else if (typeof val === "boolean" && val) {
+              tags.push({ text: f.label, remove: () => f.control.setValue(false) });
+            } else if (typeof val === "string" && val) {
+              const optLabel = f.options?.find((o) => o.value === val)?.label ?? val;
+              tags.push({
+                text: `${f.label}: ${optLabel}`,
+                remove: () => f.control.setValue(""),
+              });
+            }
+          }
+          return tags;
+        },
+      },
+      template: `
+        <tedi-row cols="1" [gapY]="3">
+          <tedi-col>
+            <h1 tedi-text="h1" color="secondary">Taotlused</h1>
+          </tedi-col>
+
+          <tedi-col class="flex gap-2 align-items-center">
+            <tedi-filter
+              text="Vastuvõtud"
+              variant="secondary"
+              [formControl]="vastuvotudControl"
+            />
+            <tedi-filter
+              text="Analüüsid"
+              variant="secondary"
+              [formControl]="analuusidControl"
+            />
+            <tedi-filter
+              text="Uuringud"
+              variant="secondary"
+              [formControl]="uuringudControl"
+            />
+
+            <tedi-separator axis="vertical" size="24px" />
+
+            <tedi-filter
+              text="Uuring"
+              variant="secondary"
+              [options]="uuringOptions"
+              [formControl]="uuringControl"
+              [showClear]="true"
+              appendTo="body"
+            />
+            <tedi-filter
+              text="Raviasutus"
+              variant="secondary"
+              [multiselect]="true"
+              [options]="raviasutusOptions"
+              [formControl]="raviasutusControl"
+              [searchable]="true"
+              [showSelectAll]="true"
+              [showClear]="true"
+              appendTo="body"
+            />
+            <tedi-filter
+              text="Teenus"
+              variant="secondary"
+              [options]="teenusOptions"
+              [formControl]="teenusControl"
+              [showClear]="true"
+              appendTo="body"
+            />
+            <tedi-filter
+              text="Aeg alates"
+              variant="secondary"
+              [options]="aegAlatesOptions"
+              [formControl]="aegAlatesControl"
+              [showClear]="true"
+              appendTo="body"
+            />
+
+            <tedi-separator axis="vertical" size="24px" />
+
+            <button tedi-button variant="neutral" size="small" class="text-nowrap" (click)="clearAll()">
+              <tedi-icon name="refresh" [size]="18" />
+              Tühjenda filtrid
+            </button>
+          </tedi-col>
+
+          @if (getTags(filters).length) {
+            <tedi-col class="flex flex-wrap gap-1">
+              @for (tag of getTags(filters); track tag.text) {
+                <tedi-tag [closable]="true" (closed)="tag.remove()">{{ tag.text }}</tedi-tag>
+              }
+            </tedi-col>
+          }
+
+          <tedi-col>
+            <p tedi-text color="tertiary">64 tulemust</p>
+          </tedi-col>
+        </tedi-row>
+      `,
+    };
+  },
+};
diff --git a/tedi/components/form/filter/index.ts b/tedi/components/form/filter/index.ts
new file mode 100644
index 000000000..b9fa61ddc
--- /dev/null
+++ b/tedi/components/form/filter/index.ts
@@ -0,0 +1,8 @@
+export {
+  FilterComponent,
+  FilterVariant,
+  FilterSize,
+  FilterOption,
+} from "./filter.component";
+export { FilterContentDirective } from "./filter-content.directive";
+export { FilterGroupComponent } from "./filter-group.component";
diff --git a/tedi/components/form/index.ts b/tedi/components/form/index.ts
index 63222aba6..2a8d8b3d5 100644
--- a/tedi/components/form/index.ts
+++ b/tedi/components/form/index.ts
@@ -15,3 +15,7 @@ export * from "./toggle/toggle.component";
 export * from "./date-picker/date-picker.component";
 export * from "./form-field/form-field.component";
 export * from "./text-field/text-field.component";
+export * from "./filter";
+export * from "./time-field";
+export * from "./time-picker";
+export * from "./rating";
diff --git a/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.html b/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.html
index b928db1b6..ff7b3b699 100644
--- a/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.html
+++ b/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.html
@@ -3,6 +3,7 @@
     type="checkbox"
     tedi-checkbox
     class="tedi-dropdown-item-value__checkbox"
+    tabindex="-1"
     [checked]="selected()"
     [indeterminate]="indeterminate()"
     [disabled]="disabled()"
@@ -12,6 +13,7 @@
   <input
     type="radio"
     class="tedi-dropdown-item-value__radio"
+    tabindex="-1"
     [checked]="selected()"
     [disabled]="disabled()"
     (click)="$event.stopPropagation()"
diff --git a/tedi/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.ts b/tedi/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.ts
index 4a60b32ea..768e94cb0 100644
--- a/tedi/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.ts
+++ b/tedi/components/overlay/dropdown/dropdown-trigger/dropdown-trigger.directive.ts
@@ -7,7 +7,7 @@ import {
 } from "@angular/core";
 import { DropdownComponent } from "../dropdown.component";
 
-export type DropdownTriggerAriaHasPopup = "menu" | "listbox" | "true";
+export type DropdownTriggerAriaHasPopup = "menu" | "listbox" | "dialog" | "true";
 
 @Directive({
   standalone: true,
@@ -16,7 +16,7 @@ export type DropdownTriggerAriaHasPopup = "menu" | "listbox" | "true";
     "[attr.id]": "dropdown.containerId() + '_trigger'",
     "[attr.aria-controls]": "dropdown.containerId()",
     "[attr.aria-expanded]": "dropdown.floatUiComponent().state",
-    "[attr.aria-haspopup]": "'menu'",
+    "[attr.aria-haspopup]": "ariaHaspopup()",
     "[attr.role]": "isButton ? null : 'button'",
     "[attr.tabindex]": "isButton ? null : '0'",
   },
diff --git a/tedi/components/tags/index.ts b/tedi/components/tags/index.ts
index 84d7f3348..fe5c89c96 100644
--- a/tedi/components/tags/index.ts
+++ b/tedi/components/tags/index.ts
@@ -1,2 +1,3 @@
 export * from "./tag/tag.component";
 export * from "./status-badge/status-badge.component";
+export * from "./status-indicator/status-indicator.component";
diff --git a/tedi/components/tags/status-badge/status-badge.component.html b/tedi/components/tags/status-badge/status-badge.component.html
index 936e89337..3bd2848f8 100644
--- a/tedi/components/tags/status-badge/status-badge.component.html
+++ b/tedi/components/tags/status-badge/status-badge.component.html
@@ -20,6 +20,15 @@
 }
 
 <ng-template #statusBadgeContent>
+  @if (status()) {
+    <tedi-status-indicator
+      [type]="status()!"
+      [size]="size() === 'large' ? 'lg' : 'sm'"
+      [hasBorder]="true"
+      position="top-right"
+    />
+  }
+
   @if (icon()) {
     <tedi-icon class="tedi-status-badge__icon" [name]="icon()" [size]="16" />
   }
diff --git a/tedi/components/tags/status-badge/status-badge.component.scss b/tedi/components/tags/status-badge/status-badge.component.scss
index 6ac56b4c7..f4ae22caa 100644
--- a/tedi/components/tags/status-badge/status-badge.component.scss
+++ b/tedi/components/tags/status-badge/status-badge.component.scss
@@ -8,7 +8,6 @@ $badge-colors: (
   "transparent"
 );
 $badge-variants: ("filled", "filled-bordered", "bordered");
-$badge-status-colors: ("inactive", "success", "danger", "warning");
 
 .tedi-status-badge {
   position: relative;
@@ -63,34 +62,6 @@ $badge-status-colors: ("inactive", "success", "danger", "warning");
     }
   }
 
-  &--status {
-    &::before {
-      position: absolute;
-      top: -0.125rem;
-      right: -0.125rem;
-      z-index: 1;
-      width: var(--status-indicator-sm);
-      height: var(--status-indicator-sm);
-      content: "";
-      background-color: var(--_status-badge--indicator-background);
-      border: 1px solid var(--status-badge-indicator-border);
-      border-radius: 50%;
-    }
-
-    &.tedi-status-badge--large::before {
-      width: var(--status-indicator-lg);
-      height: var(--status-indicator-lg);
-    }
-
-    @each $status in $badge-status-colors {
-      &-#{$status}::before {
-        --_status-badge--indicator-background: var(
-          --status-badge-indicator-#{$status}
-        );
-      }
-    }
-  }
-
   .tedi-status-badge__icon {
     color: inherit;
   }
diff --git a/tedi/components/tags/status-badge/status-badge.component.spec.ts b/tedi/components/tags/status-badge/status-badge.component.spec.ts
index 43eae2407..a0314f298 100644
--- a/tedi/components/tags/status-badge/status-badge.component.spec.ts
+++ b/tedi/components/tags/status-badge/status-badge.component.spec.ts
@@ -65,8 +65,10 @@ describe("StatusBadgeComponent", () => {
       badge?.classList.contains("tedi-status-badge--variant-filled-bordered"),
     ).toBe(true);
     expect(badge?.classList.contains("tedi-status-badge--large")).toBe(true);
-    expect(badge?.classList.contains("tedi-status-badge--status")).toBe(true);
-    expect(badge?.classList.contains("tedi-status-badge--status-success")).toBe(
+
+    const indicator = element.querySelector("tedi-status-indicator");
+    expect(indicator).not.toBeNull();
+    expect(indicator?.classList.contains("tedi-status-indicator--success")).toBe(
       true,
     );
   });
diff --git a/tedi/components/tags/status-badge/status-badge.component.ts b/tedi/components/tags/status-badge/status-badge.component.ts
index 21d66a4dc..9aeb2efe8 100644
--- a/tedi/components/tags/status-badge/status-badge.component.ts
+++ b/tedi/components/tags/status-badge/status-badge.component.ts
@@ -8,6 +8,7 @@ import {
   inject,
 } from "@angular/core";
 import { IconComponent } from "../../base/icon/icon.component";
+import { StatusIndicatorComponent } from "../status-indicator/status-indicator.component";
 import { _IdGenerator } from "@angular/cdk/a11y";
 
 export type StatusBadgeColor =
@@ -25,7 +26,7 @@ export type StatusBadgeStatus = "danger" | "success" | "warning" | "inactive";
 @Component({
   selector: "tedi-status-badge",
   standalone: true,
-  imports: [IconComponent, CommonModule, NgClass],
+  imports: [IconComponent, StatusIndicatorComponent, CommonModule, NgClass],
   templateUrl: "./status-badge.component.html",
   styleUrl: "./status-badge.component.scss",
   encapsulation: ViewEncapsulation.None,
@@ -86,13 +87,6 @@ export class StatusBadgeComponent {
       classList.push(`tedi-status-badge--variant-${this.variant()}`);
     }
 
-    if (this.status()) {
-      classList.push(
-        "tedi-status-badge--status",
-        `tedi-status-badge--status-${this.status()}`,
-      );
-    }
-
     if (this.size() === "large") {
       classList.push("tedi-status-badge--large");
     }
diff --git a/tedi/components/tags/status-indicator/index.ts b/tedi/components/tags/status-indicator/index.ts
new file mode 100644
index 000000000..06be04e85
--- /dev/null
+++ b/tedi/components/tags/status-indicator/index.ts
@@ -0,0 +1 @@
+export * from "./status-indicator.component";
diff --git a/tedi/components/tags/status-indicator/status-indicator.component.scss b/tedi/components/tags/status-indicator/status-indicator.component.scss
new file mode 100644
index 000000000..2a131358d
--- /dev/null
+++ b/tedi/components/tags/status-indicator/status-indicator.component.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);
+  }
+
+  @each $type in $indicator-types {
+    &--#{$type} {
+      background-color: var(--status-badge-indicator-#{$type});
+    }
+  }
+}
diff --git a/tedi/components/tags/status-indicator/status-indicator.component.spec.ts b/tedi/components/tags/status-indicator/status-indicator.component.spec.ts
new file mode 100644
index 000000000..87d4f301e
--- /dev/null
+++ b/tedi/components/tags/status-indicator/status-indicator.component.spec.ts
@@ -0,0 +1,73 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { StatusIndicatorComponent } from "./status-indicator.component";
+
+describe("StatusIndicatorComponent", () => {
+  let fixture: ComponentFixture<StatusIndicatorComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StatusIndicatorComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StatusIndicatorComponent);
+    element = fixture.nativeElement;
+  });
+
+  it("should create the component", () => {
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it("should have default classes", () => {
+    fixture.detectChanges();
+    expect(element.classList.contains("tedi-status-indicator")).toBe(true);
+    expect(element.classList.contains("tedi-status-indicator--success")).toBe(
+      true,
+    );
+    expect(element.classList.contains("tedi-status-indicator--sm")).toBe(true);
+  });
+
+  it("should apply type class", () => {
+    fixture.componentRef.setInput("type", "danger");
+    fixture.detectChanges();
+    expect(element.classList.contains("tedi-status-indicator--danger")).toBe(
+      true,
+    );
+    expect(element.classList.contains("tedi-status-indicator--success")).toBe(
+      false,
+    );
+  });
+
+  it("should apply size class", () => {
+    fixture.componentRef.setInput("size", "lg");
+    fixture.detectChanges();
+    expect(element.classList.contains("tedi-status-indicator--lg")).toBe(true);
+    expect(element.classList.contains("tedi-status-indicator--sm")).toBe(false);
+  });
+
+  it("should apply bordered class", () => {
+    fixture.componentRef.setInput("hasBorder", true);
+    fixture.detectChanges();
+    expect(element.classList.contains("tedi-status-indicator--bordered")).toBe(
+      true,
+    );
+  });
+
+  it("should apply top-right position class", () => {
+    fixture.componentRef.setInput("position", "top-right");
+    fixture.detectChanges();
+    expect(element.classList.contains("tedi-status-indicator--top-right")).toBe(
+      true,
+    );
+  });
+
+  it("should have aria-hidden attribute", () => {
+    fixture.detectChanges();
+    expect(element.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("should have role img attribute", () => {
+    fixture.detectChanges();
+    expect(element.getAttribute("role")).toBe("img");
+  });
+});
diff --git a/tedi/components/tags/status-indicator/status-indicator.component.ts b/tedi/components/tags/status-indicator/status-indicator.component.ts
new file mode 100644
index 000000000..fbe25f1a3
--- /dev/null
+++ b/tedi/components/tags/status-indicator/status-indicator.component.ts
@@ -0,0 +1,56 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  input,
+} from "@angular/core";
+
+export type StatusIndicatorType = "success" | "danger" | "warning" | "inactive";
+export type StatusIndicatorSize = "sm" | "lg";
+export type StatusIndicatorPosition = "default" | "top-right";
+
+@Component({
+  selector: "tedi-status-indicator",
+  standalone: true,
+  template: "",
+  styleUrl: "./status-indicator.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "tedi-status-indicator",
+    "[class.tedi-status-indicator--success]": "type() === 'success'",
+    "[class.tedi-status-indicator--danger]": "type() === 'danger'",
+    "[class.tedi-status-indicator--warning]": "type() === 'warning'",
+    "[class.tedi-status-indicator--inactive]": "type() === 'inactive'",
+    "[class.tedi-status-indicator--sm]": "size() === 'sm'",
+    "[class.tedi-status-indicator--lg]": "size() === 'lg'",
+    "[class.tedi-status-indicator--bordered]": "hasBorder()",
+    "[class.tedi-status-indicator--top-right]": "position() === 'top-right'",
+    role: "img",
+    "aria-hidden": "true",
+  },
+})
+export class StatusIndicatorComponent {
+  /**
+   * The status type, which determines the indicator color.
+   * @default success
+   */
+  readonly type = input<StatusIndicatorType>("success");
+  /**
+   * The size of the indicator.
+   * @default sm
+   */
+  readonly size = input<StatusIndicatorSize>("sm");
+  /**
+   * Whether the indicator has a white border ring.
+   * @default false
+   */
+  readonly hasBorder = input<boolean>(false);
+  /**
+   * Controls positioning of the indicator.
+   * - `'default'` — inline, no absolute positioning
+   * - `'top-right'` — absolutely positioned at the top-right corner of the parent
+   * @default default
+   */
+  readonly position = input<StatusIndicatorPosition>("default");
+}
diff --git a/tedi/components/tags/status-indicator/status-indicator.stories.ts b/tedi/components/tags/status-indicator/status-indicator.stories.ts
new file mode 100644
index 000000000..83534a64b
--- /dev/null
+++ b/tedi/components/tags/status-indicator/status-indicator.stories.ts
@@ -0,0 +1,125 @@
+import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { StatusIndicatorComponent } from "./status-indicator.component";
+import { TextComponent } from "../../base/text/text.component";
+import {
+  RowComponent,
+  ColComponent,
+} from "@tedi-design-system/angular/tedi";
+
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.45.68?node-id=2405-53326&m=dev" target="_blank">Figma ↗</a>
+ */
+export default {
+  title: "TEDI-Ready/Components/Tags/StatusIndicator",
+  component: StatusIndicatorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        StatusIndicatorComponent,
+        TextComponent,
+        RowComponent,
+        ColComponent,
+      ],
+    }),
+  ],
+  argTypes: {
+    type: {
+      description: "The status type, which determines the indicator color",
+      control: { type: "radio" },
+      options: ["success", "danger", "warning", "inactive"],
+      table: {
+        category: "inputs",
+        type: { summary: "StatusIndicatorType" },
+        defaultValue: { summary: "success" },
+      },
+    },
+    size: {
+      description: "The size of the indicator",
+      control: { type: "radio" },
+      options: ["sm", "lg"],
+      table: {
+        category: "inputs",
+        type: { summary: "StatusIndicatorSize" },
+        defaultValue: { summary: "sm" },
+      },
+    },
+    hasBorder: {
+      description: "Whether the indicator has a white border ring",
+      control: { type: "boolean" },
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    position: {
+      description: "Controls positioning of the indicator",
+      control: { type: "radio" },
+      options: ["default", "top-right"],
+      table: {
+        category: "inputs",
+        type: { summary: "StatusIndicatorPosition" },
+        defaultValue: { summary: "default" },
+      },
+    },
+  },
+} as Meta<StatusIndicatorComponent>;
+
+export const Default: StoryObj<StatusIndicatorComponent> = {
+  args: {
+    type: "success",
+    size: "sm",
+    hasBorder: false,
+  },
+};
+
+export const AllVariants: StoryObj<StatusIndicatorComponent> = {
+  render: () => ({
+    template: `
+      <tedi-row [cols]="2" [gapY]="3" alignItems="center">
+        <tedi-col><p tedi-text modifiers="bold">Small</p></tedi-col>
+        <tedi-col class="flex gap-3 align-items-center">
+          <tedi-status-indicator type="success" />
+          <tedi-status-indicator type="danger" />
+          <tedi-status-indicator type="warning" />
+          <tedi-status-indicator type="inactive" />
+        </tedi-col>
+
+        <tedi-col><p tedi-text modifiers="bold">Large</p></tedi-col>
+        <tedi-col class="flex gap-3 align-items-center">
+          <tedi-status-indicator type="success" size="lg" />
+          <tedi-status-indicator type="danger" size="lg" />
+          <tedi-status-indicator type="warning" size="lg" />
+          <tedi-status-indicator type="inactive" size="lg" />
+        </tedi-col>
+
+        <tedi-col><p tedi-text modifiers="bold">Small bordered</p></tedi-col>
+        <tedi-col class="flex gap-3 align-items-center">
+          <tedi-status-indicator type="success" [hasBorder]="true" />
+          <tedi-status-indicator type="danger" [hasBorder]="true" />
+          <tedi-status-indicator type="warning" [hasBorder]="true" />
+          <tedi-status-indicator type="inactive" [hasBorder]="true" />
+        </tedi-col>
+
+        <tedi-col><p tedi-text modifiers="bold">Large bordered</p></tedi-col>
+        <tedi-col class="flex gap-3 align-items-center">
+          <tedi-status-indicator type="success" size="lg" [hasBorder]="true" />
+          <tedi-status-indicator type="danger" size="lg" [hasBorder]="true" />
+          <tedi-status-indicator type="warning" size="lg" [hasBorder]="true" />
+          <tedi-status-indicator type="inactive" size="lg" [hasBorder]="true" />
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};
+
+export const Examples: StoryObj<StatusIndicatorComponent> = {
+  render: () => ({
+    template: `
+      <span style="position: relative">
+        Lugemata teated&nbsp;
+        <tedi-status-indicator type="danger" position="top-right" />
+      </span>
+    `,
+  }),
+};

From 716e29af097eb0ab9d2df9d7c4cb9628f9cf1c9b Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Tue, 7 Apr 2026 10:34:58 +0300
Subject: [PATCH 09/18] feat(filter): removed unlisted components from export
 #329

---
 tedi/components/form/index.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/tedi/components/form/index.ts b/tedi/components/form/index.ts
index 2a8d8b3d5..6ab0fe5e9 100644
--- a/tedi/components/form/index.ts
+++ b/tedi/components/form/index.ts
@@ -16,6 +16,3 @@ export * from "./date-picker/date-picker.component";
 export * from "./form-field/form-field.component";
 export * from "./text-field/text-field.component";
 export * from "./filter";
-export * from "./time-field";
-export * from "./time-picker";
-export * from "./rating";

From d41718c47aa0e7b3927e382b8b5c1ec02ec66feb Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Tue, 7 Apr 2026 15:06:22 +0300
Subject: [PATCH 10/18] feat(filter): code review fixes #329

---
 .../contributing/references/best-practices.md |  5 ++++
 skills/tedi-angular/references/components.md  |  2 +-
 .../form/filter/filter-group.component.scss   | 25 ++++++++++---------
 .../form/filter/filter.component.html         |  6 ++---
 .../form/filter/filter.component.spec.ts      |  6 ++---
 .../form/filter/filter.component.ts           | 19 ++++++++------
 tedi/components/tags/index.ts                 |  2 +-
 .../status-indicator.component.spec.ts        |  9 +++++--
 .../status-indicator.component.ts             | 11 ++++++--
 9 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/.claude/skills/contributing/references/best-practices.md b/.claude/skills/contributing/references/best-practices.md
index d6767e0cc..0ba0b4774 100644
--- a/.claude/skills/contributing/references/best-practices.md
+++ b/.claude/skills/contributing/references/best-practices.md
@@ -270,6 +270,11 @@ export const Default: StoryObj<ComponentNameComponent> = {
 };
 
 export const WithReactiveForms: StoryObj<ComponentNameComponent> = {
+  decorators: [
+    moduleMetadata({
+      imports: [MyControlComponent, ReactiveFormsModule, AlertComponent, TextComponent],
+    }),
+  ],
   render: () => ({
     props: { control: new FormControl('') },
     template: `
diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 0ae5ff23c..08dd8e3a0 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -365,7 +365,7 @@ Implements `ControlValueAccessor`. Value type is `T` (single) or `T[]` (multisel
 **Outputs:**
 - `cleared: void` — emitted when clear button is clicked in custom content mode
 **Slots:**
-- `[tediFilterPrepend]` — content before the label (icon, status badge, indicator). Hidden when filter is selected (check icon takes its place).
+- `[tediFilterPrepend]` — content before the label (icon, status badge, indicator). Hidden when the filter is selected. In toggle mode (no dropdown), a check icon replaces it; in dropdown modes the prepend is simply removed.
 - `[tediFilterContent]` — custom dropdown content (replaces options)
 
 Implements `ControlValueAccessor`. Value type depends on mode: `boolean` (toggle), `string` (single-select), `string[]` (multiselect).
diff --git a/tedi/components/form/filter/filter-group.component.scss b/tedi/components/form/filter/filter-group.component.scss
index c6c1fb73a..953a6e4f5 100644
--- a/tedi/components/form/filter/filter-group.component.scss
+++ b/tedi/components/form/filter/filter-group.component.scss
@@ -1,32 +1,33 @@
 .tedi-filter-group {
   display: inline-flex;
 
-  .tedi-filter__button {
-    border-radius: 0;
+  .tedi-filter {
+    --_filter-radius: 0;
   }
 
-  .tedi-filter + .tedi-filter .tedi-filter__button {
+  .tedi-filter+.tedi-filter {
     margin-left: calc(-1 * var(--borders-01));
   }
 
-  .tedi-filter--selected {
+  .tedi-filter--selected,
+  .tedi-filter:focus-within {
     z-index: 1;
   }
 
-  .tedi-filter--selected + .tedi-filter .tedi-filter__button,
-  .tedi-filter + .tedi-filter--selected .tedi-filter__button {
+  .tedi-filter--selected+.tedi-filter,
+  .tedi-filter+.tedi-filter--selected {
     margin-left: calc(-1 * var(--general-selected-border-width));
   }
 
-  .tedi-filter:first-child .tedi-filter__button {
-    border-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius);
+  .tedi-filter:first-child {
+    --_filter-radius: var(--form-checkbox-radio-card-radius) 0 0 var(--form-checkbox-radio-card-radius);
   }
 
-  .tedi-filter:last-child .tedi-filter__button {
-    border-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0;
+  .tedi-filter:last-child {
+    --_filter-radius: 0 var(--form-checkbox-radio-card-radius) var(--form-checkbox-radio-card-radius) 0;
   }
 
-  .tedi-filter:only-child .tedi-filter__button {
-    border-radius: var(--form-checkbox-radio-card-radius);
+  .tedi-filter:only-child {
+    --_filter-radius: var(--form-checkbox-radio-card-radius);
   }
 }
diff --git a/tedi/components/form/filter/filter.component.html b/tedi/components/form/filter/filter.component.html
index a0b317d98..5dea260e3 100644
--- a/tedi/components/form/filter/filter.component.html
+++ b/tedi/components/form/filter/filter.component.html
@@ -9,7 +9,7 @@
       [disabled]="disabled()"
       (click)="focusDropdownContent()"
       (keydown.arrowDown)="focusDropdownContent(true)"
-      (keydown.arrowUp)="focusDropdownContent(true)"
+      (keydown.arrowUp)="focusDropdownContent(true, true)"
     >
       <ng-container *ngTemplateOutlet="buttonContent" />
     </button>
@@ -61,7 +61,7 @@
                 role="option"
                 [attr.aria-selected]="isOptionSelected(option.value)"
                 [attr.aria-disabled]="option.disabled || null"
-                [id]="getOptionId(option.value)"
+                [id]="getOptionId(i)"
                 (click)="!option.disabled && selectOption(option.value)"
               >
                 <tedi-dropdown-item-value
@@ -131,7 +131,7 @@
                 role="option"
                 [attr.aria-selected]="isOptionSelected(option.value)"
                 [attr.aria-disabled]="option.disabled || null"
-                [id]="getOptionId(option.value)"
+                [id]="getOptionId(i)"
                 (click)="!option.disabled && toggleOption(option.value)"
               >
                 <tedi-dropdown-item-value
diff --git a/tedi/components/form/filter/filter.component.spec.ts b/tedi/components/form/filter/filter.component.spec.ts
index e8046cfee..e65299c67 100644
--- a/tedi/components/form/filter/filter.component.spec.ts
+++ b/tedi/components/form/filter/filter.component.spec.ts
@@ -720,7 +720,7 @@ describe("FilterComponent", () => {
       const options = fixture.debugElement.query(
         By.css(".tedi-filter-dropdown__options"),
       );
-      const firstOptionId = component.getOptionId("a");
+      const firstOptionId = component.getOptionId(0);
       expect(
         options.nativeElement.getAttribute("aria-activedescendant"),
       ).toBe(firstOptionId);
@@ -966,7 +966,7 @@ describe("FilterComponent", () => {
       );
       expect(
         optionsEl.nativeElement.getAttribute("aria-activedescendant"),
-      ).toBe(component.getOptionId("a"));
+      ).toBe(component.getOptionId(0));
 
       component.onOptionsKeydown(
         new KeyboardEvent("keydown", { key: "ArrowDown" }),
@@ -975,7 +975,7 @@ describe("FilterComponent", () => {
 
       expect(
         optionsEl.nativeElement.getAttribute("aria-activedescendant"),
-      ).toBe(component.getOptionId("b"));
+      ).toBe(component.getOptionId(1));
     });
 
     it("should handle select-all Enter keydown", () => {
diff --git a/tedi/components/form/filter/filter.component.ts b/tedi/components/form/filter/filter.component.ts
index 2a6667f8a..c71cab9bc 100644
--- a/tedi/components/form/filter/filter.component.ts
+++ b/tedi/components/form/filter/filter.component.ts
@@ -176,8 +176,9 @@ export class FilterComponent implements ControlValueAccessor {
   readonly activeDescendantId = computed(() => {
     const idx = this.activeOptionIndex();
     if (idx === -1) return null;
-    const option = this.filteredOptions()[idx];
-    return option ? this.getOptionId(option.value) : null;
+    return idx < this.filteredOptions().length
+      ? this.getOptionId(idx)
+      : null;
   });
 
   readonly iconSize = computed(() => (this.size() === "large" ? 24 : 18));
@@ -263,8 +264,8 @@ export class FilterComponent implements ControlValueAccessor {
     this.onTouched();
   }
 
-  getOptionId(value: string): string {
-    return `${this.baseId}-option-${value}`;
+  getOptionId(index: number): string {
+    return `${this.baseId}-option-${index}`;
   }
 
   isOptionSelected(value: string): boolean {
@@ -329,11 +330,15 @@ export class FilterComponent implements ControlValueAccessor {
     this.searchTerm.set((event.target as HTMLInputElement).value);
   }
 
-  focusDropdownContent(keyboard = false): void {
+  focusDropdownContent(keyboard = false, focusLast = false): void {
     setTimeout(() => {
       if (!this.dropdown()?.floatUiComponent().state) return;
       const focusable = this.getTabStops();
-      focusable[0]?.focus();
+      if (focusLast) {
+        focusable[focusable.length - 1]?.focus();
+      } else {
+        focusable[0]?.focus();
+      }
       if (!keyboard) {
         this.activeOptionIndex.set(-1);
       }
@@ -459,7 +464,7 @@ export class FilterComponent implements ControlValueAccessor {
     if (!panel) return [];
     return Array.from(
       panel.querySelectorAll<HTMLElement>(
-        'input:not([disabled]):not([tabindex="-1"]), button:not([disabled]), [role="option"][tabindex="0"], [role="listbox"][tabindex="0"]',
+        'input:not([disabled]):not([tabindex="-1"]), button:not([disabled]), [role="option"][tabindex="0"], [role="listbox"][tabindex="0"], [role="checkbox"][tabindex="0"]',
       ),
     );
   }
diff --git a/tedi/components/tags/index.ts b/tedi/components/tags/index.ts
index fe5c89c96..7f10ca75a 100644
--- a/tedi/components/tags/index.ts
+++ b/tedi/components/tags/index.ts
@@ -1,3 +1,3 @@
 export * from "./tag/tag.component";
 export * from "./status-badge/status-badge.component";
-export * from "./status-indicator/status-indicator.component";
+export * from "./status-indicator";
diff --git a/tedi/components/tags/status-indicator/status-indicator.component.spec.ts b/tedi/components/tags/status-indicator/status-indicator.component.spec.ts
index 87d4f301e..8c07dea38 100644
--- a/tedi/components/tags/status-indicator/status-indicator.component.spec.ts
+++ b/tedi/components/tags/status-indicator/status-indicator.component.spec.ts
@@ -61,13 +61,18 @@ describe("StatusIndicatorComponent", () => {
     );
   });
 
-  it("should have aria-hidden attribute", () => {
+  it("should be aria-hidden by default (decorative)", () => {
     fixture.detectChanges();
     expect(element.getAttribute("aria-hidden")).toBe("true");
+    expect(element.getAttribute("role")).toBeNull();
+    expect(element.getAttribute("aria-label")).toBeNull();
   });
 
-  it("should have role img attribute", () => {
+  it("should expose accessible name when label is provided", () => {
+    fixture.componentRef.setInput("label", "Active");
     fixture.detectChanges();
     expect(element.getAttribute("role")).toBe("img");
+    expect(element.getAttribute("aria-label")).toBe("Active");
+    expect(element.getAttribute("aria-hidden")).toBe("false");
   });
 });
diff --git a/tedi/components/tags/status-indicator/status-indicator.component.ts b/tedi/components/tags/status-indicator/status-indicator.component.ts
index fbe25f1a3..4b17f9c14 100644
--- a/tedi/components/tags/status-indicator/status-indicator.component.ts
+++ b/tedi/components/tags/status-indicator/status-indicator.component.ts
@@ -26,11 +26,18 @@ export type StatusIndicatorPosition = "default" | "top-right";
     "[class.tedi-status-indicator--lg]": "size() === 'lg'",
     "[class.tedi-status-indicator--bordered]": "hasBorder()",
     "[class.tedi-status-indicator--top-right]": "position() === 'top-right'",
-    role: "img",
-    "aria-hidden": "true",
+    "[attr.role]": "label() ? 'img' : null",
+    "[attr.aria-hidden]": "!label()",
+    "[attr.aria-label]": "label() || null",
   },
 })
 export class StatusIndicatorComponent {
+  /**
+   * Accessible label for the indicator. When provided, the indicator is
+   * exposed to assistive technology with `role="img"`. When omitted, the
+   * indicator is treated as decorative (`aria-hidden="true"`).
+   */
+  readonly label = input<string>();
   /**
    * The status type, which determines the indicator color.
    * @default success

From da2f98248fae3dee14c2215a4b79f038fab045dd Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Wed, 8 Apr 2026 18:32:08 +0300
Subject: [PATCH 11/18] feat(filter): updated stories, fixed styles #329

---
 skills/tedi-angular/references/components.md  |   4 +
 .../form/filter/filter.component.scss         |   5 +-
 .../form/filter/filter.component.spec.ts      |  28 ++++
 .../form/filter/filter.component.ts           |  14 +-
 tedi/components/form/filter/filter.stories.ts | 156 +++++++++++++-----
 5 files changed, 160 insertions(+), 47 deletions(-)

diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 08dd8e3a0..59767c102 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -356,6 +356,7 @@ Implements `ControlValueAccessor`. Value type is `T` (single) or `T[]` (multisel
 - `size: FilterSize = "default"` — "default" or "large"
 - `multiselect: boolean = false` — multiselect dropdown mode
 - `options: FilterOption[] = []` — dropdown options `{ label, value, disabled? }`
+- `preserveLabel: boolean = false` — when true, single-select shows "Text: SelectedLabel" instead of replacing text
 - `searchable: boolean = false` — show search field in dropdown
 - `showSelectAll: boolean = false` — show "Select all" in multiselect
 - `showClear: boolean = false` — show clear action in dropdown
@@ -377,6 +378,9 @@ Implements `ControlValueAccessor`. Value type depends on mode: `boolean` (toggle
 <!-- Single-select dropdown -->
 <tedi-filter text="Service" [options]="options" [(value)]="value" [showClear]="true" appendTo="body" />
 
+<!-- Single-select with label preserved (shows "Service: Option A") -->
+<tedi-filter text="Service" [options]="options" [(value)]="value" [preserveLabel]="true" appendTo="body" />
+
 <!-- Multiselect dropdown -->
 <tedi-filter text="Hospital" [multiselect]="true" [options]="options" [(values)]="values"
   [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
diff --git a/tedi/components/form/filter/filter.component.scss b/tedi/components/form/filter/filter.component.scss
index 1fcf5bc7b..c43017845 100644
--- a/tedi/components/form/filter/filter.component.scss
+++ b/tedi/components/form/filter/filter.component.scss
@@ -63,25 +63,22 @@
   }
 
   &--primary {
+    --_filter-border-width: 0px;
     --_filter-bg: var(--filter-primary-default-background);
     --_filter-text: var(--filter-primary-default-text);
-    --_filter-border: var(--filter-primary-default-border);
 
     .tedi-filter__button:hover {
       --_filter-bg: var(--filter-primary-hover-background);
       --_filter-text: var(--filter-primary-hover-text);
-      --_filter-border: var(--filter-primary-hover-border);
     }
 
     &.tedi-filter--selected {
       --_filter-bg: var(--filter-primary-selected-background);
       --_filter-text: var(--filter-primary-selected-text);
-      --_filter-border: var(--filter-primary-selected-border);
 
       .tedi-filter__button:hover {
         --_filter-bg: var(--filter-primary-hover-background);
         --_filter-text: var(--filter-primary-hover-text);
-        --_filter-border: var(--filter-primary-hover-border);
       }
     }
   }
diff --git a/tedi/components/form/filter/filter.component.spec.ts b/tedi/components/form/filter/filter.component.spec.ts
index e65299c67..37eba644b 100644
--- a/tedi/components/form/filter/filter.component.spec.ts
+++ b/tedi/components/form/filter/filter.component.spec.ts
@@ -1285,6 +1285,34 @@ describe("FilterComponent", () => {
       component.searchTerm.set("option a");
       expect(component.filteredOptions().length).toBe(1);
     });
+
+    it("should show only selected label by default", () => {
+      fixture.componentRef.setInput("text", "Teenus");
+      fixture.componentRef.setInput("value", "a");
+      fixture.detectChanges();
+
+      const textEl = fixture.debugElement.query(By.css(".tedi-filter__text"));
+      expect(textEl.nativeElement.textContent.trim()).toBe("Option A");
+    });
+
+    it("should show label prefix with preserveLabel", () => {
+      fixture.componentRef.setInput("text", "Teenus");
+      fixture.componentRef.setInput("preserveLabel", true);
+      fixture.componentRef.setInput("value", "a");
+      fixture.detectChanges();
+
+      const textEl = fixture.debugElement.query(By.css(".tedi-filter__text"));
+      expect(textEl.nativeElement.textContent.trim()).toBe("Teenus: Option A");
+    });
+
+    it("should show only text when no value is selected with preserveLabel", () => {
+      fixture.componentRef.setInput("text", "Teenus");
+      fixture.componentRef.setInput("preserveLabel", true);
+      fixture.detectChanges();
+
+      const textEl = fixture.debugElement.query(By.css(".tedi-filter__text"));
+      expect(textEl.nativeElement.textContent.trim()).toBe("Teenus");
+    });
   });
 
   describe("reactive forms - single-select with options", () => {
diff --git a/tedi/components/form/filter/filter.component.ts b/tedi/components/form/filter/filter.component.ts
index c71cab9bc..b352c80a8 100644
--- a/tedi/components/form/filter/filter.component.ts
+++ b/tedi/components/form/filter/filter.component.ts
@@ -101,7 +101,7 @@ export class FilterComponent implements ControlValueAccessor {
    */
   readonly multiselect = input<boolean>(false);
   /**
-   * Options for the dropdown (single-select or multiselect).
+   * Options for the dropdown. Enables single-select mode, or multiselect mode when combined with the multiselect input.
    */
   readonly options = input<FilterOption[]>([]);
   /**
@@ -141,6 +141,12 @@ export class FilterComponent implements ControlValueAccessor {
    * Emitted when the clear button is clicked in a custom content dropdown.
    */
   readonly cleared = output<void>();
+  /**
+   * When true, the filter label is preserved as a prefix when a value is selected.
+   * E.g. "Teenus: Optometristi vastuvõtt" instead of just "Optometristi vastuvõtt".
+   * @default false
+   */
+  readonly preserveLabel = input<boolean>(false);
   /**
    * Append dropdown to given selector.
    * Use 'body' to append at the end of DOM or empty string to append next to trigger.
@@ -203,7 +209,11 @@ export class FilterComponent implements ControlValueAccessor {
 
   readonly displayText = computed(() => {
     if (this.isSingleSelect()) {
-      return this.selectedLabel() ?? this.text();
+      const label = this.selectedLabel();
+      if (label && this.preserveLabel()) {
+        return this.text() + ": " + label;
+      }
+      return label ?? this.text();
     }
     return this.text();
   });
diff --git a/tedi/components/form/filter/filter.stories.ts b/tedi/components/form/filter/filter.stories.ts
index 7a343473c..94e849ba5 100644
--- a/tedi/components/form/filter/filter.stories.ts
+++ b/tedi/components/form/filter/filter.stories.ts
@@ -76,7 +76,7 @@ export default {
       },
     },
     selected: {
-      description: "Whether the filter is selected (single-select mode)",
+      description: "Whether the filter is selected (boolean toggle mode, used when no options are provided)",
       control: { type: "boolean" },
       table: {
         category: "inputs",
@@ -95,7 +95,7 @@ export default {
       },
     },
     values: {
-      description: "Selected values in multiselect mode (two-way bound)",
+      description: "Selected values in multiselect mode (two-way bound). Requires multiselect and options inputs",
       control: { type: "object" },
       table: {
         category: "inputs",
@@ -104,7 +104,7 @@ export default {
       },
     },
     options: {
-      description: "Options for multiselect dropdown",
+      description: "Options for the dropdown. Enables single-select mode, or multiselect when combined with multiselect input",
       control: { type: "object" },
       table: {
         category: "inputs",
@@ -176,6 +176,72 @@ export const Default: StoryObj<FilterComponent> = {
   },
 };
 
+export const SingleSelect: StoryObj<FilterComponent> = {
+  render: () => ({
+    template: `
+      <div class="flex flex-column gap-4">
+        <div>
+          <p tedi-text modifiers="bold" class="mb-2">Separate</p>
+          <div class="flex flex-column gap-2">
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter text="Vastuvõtud" [selected]="true" />
+              <tedi-filter text="Analüüsid" [selected]="true" />
+              <tedi-filter text="Uuringud" />
+              <tedi-filter text="Vaktsineerimised" />
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter text="Vastuvõtud" variant="secondary" [selected]="true" />
+              <tedi-filter text="Analüüsid" variant="secondary" [selected]="true" />
+              <tedi-filter text="Uuringud" variant="secondary" />
+              <tedi-filter text="Vaktsineerimised" variant="secondary" />
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter text="Vastuvõtud" variant="secondary" [selected]="true">
+                <tedi-icon tediFilterPrepend name="medical_services" [size]="18" />
+              </tedi-filter>
+              <tedi-filter text="Analüüsid" variant="secondary">
+                <tedi-icon tediFilterPrepend name="science" [size]="18" />
+              </tedi-filter>
+              <tedi-filter text="Uuringud" variant="secondary">
+                <tedi-icon tediFilterPrepend name="biotech" [size]="18" />
+              </tedi-filter>
+              <tedi-filter text="Vaktsineerimised" variant="secondary">
+                <tedi-icon tediFilterPrepend name="vaccines" [size]="18" />
+              </tedi-filter>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p tedi-text modifiers="bold" class="mb-2">Grouped</p>
+          <div class="flex flex-column gap-2">
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter-group>
+                <tedi-filter text="Kooskõlastatud" />
+                <tedi-filter text="Tagasilükatud" />
+              </tedi-filter-group>
+              <tedi-filter-group>
+                <tedi-filter text="Kooskõlastatud" [selected]="true" />
+                <tedi-filter text="Tagasilükatud" />
+              </tedi-filter-group>
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter-group>
+                <tedi-filter text="Kooskõlastatud" variant="secondary" />
+                <tedi-filter text="Tagasilükatud" variant="secondary" />
+              </tedi-filter-group>
+              <tedi-filter-group>
+                <tedi-filter text="Kooskõlastatud" variant="secondary" [selected]="true" />
+                <tedi-filter text="Tagasilükatud" variant="secondary" />
+              </tedi-filter-group>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
 export const Multiselect: StoryObj<FilterComponent> = {
   render: () => ({
     props: {
@@ -186,49 +252,57 @@ export const Multiselect: StoryObj<FilterComponent> = {
         { label: "Põhja-Eesti Regionaalhaigla", value: "4" },
         { label: "Tallinna Lastehaigla", value: "5" },
         { label: "Tartu Ülikooli Kliinikum", value: "6" },
-        { label: "Pärnu Haigla", value: "7" },
-        { label: "Kuressaare Haigla", value: "8" },
-        { label: "Rakvere Haigla", value: "9" },
-        { label: "Järvamaa Haigla", value: "10" },
-        { label: "Viljandi Haigla", value: "11" },
-        { label: "Narva Haigla", value: "12" },
       ],
-      values: [] as string[],
-    },
-    template: `
-      <tedi-filter
-        text="Raviasutus"
-        [multiselect]="true"
-        [options]="options"
-        [(values)]="values"
-        [searchable]="true"
-        [showSelectAll]="true"
-        [showClear]="true"
-        appendTo="body"
-      />
-    `,
-  }),
-};
-
-export const SingleSelect: StoryObj<FilterComponent> = {
-  render: () => ({
-    props: {
-      options: [
+      teenusOptions: [
         { label: "Optometristi vastuvõtt", value: "1" },
         { label: "Silmaarsti vastuvõtt", value: "2" },
         { label: "Hambaarsti vastuvõtt", value: "3" },
       ],
-      value: "",
+      compactValues1: [] as string[],
+      compactValues2: [] as string[],
     },
     template: `
-      <tedi-filter
-        text="Teenus"
-        [options]="options"
-        [(value)]="value"
-        [searchable]="true"
-        [showClear]="false"
-        appendTo="body"
-      />
+      <div class="flex flex-column gap-4">
+        <div>
+          <p tedi-text modifiers="bold" class="mb-2">Compact</p>
+          <div class="flex flex-column gap-2">
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter text="Raviasutus" [multiselect]="true" [options]="options" [(values)]="compactValues1" [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
+              <tedi-filter text="Teenus" [options]="teenusOptions" appendTo="body" />
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter text="Raviasutus" variant="secondary" [multiselect]="true" [options]="options" [(values)]="compactValues2" [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
+              <tedi-filter text="Teenus" variant="secondary" [options]="teenusOptions" appendTo="body" />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p tedi-text modifiers="bold" class="mb-2">Show value and label</p>
+          <div class="flex flex-column gap-2">
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter text="Teenus" [options]="teenusOptions" [preserveLabel]="true" [showClear]="true" appendTo="body" />
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter text="Teenus" variant="secondary" [options]="teenusOptions" [preserveLabel]="true" [showClear]="true" appendTo="body" />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p tedi-text modifiers="bold" class="mb-2">Show value</p>
+          <div class="flex flex-column gap-2">
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter text="Raviasutus" [options]="options" appendTo="body" />
+              <tedi-filter text="Teenus" [options]="teenusOptions" appendTo="body" />
+            </div>
+            <div class="flex flex-wrap gap-2">
+              <tedi-filter text="Raviasutus" variant="secondary" [options]="options" appendTo="body" />
+              <tedi-filter text="Teenus" variant="secondary" [options]="teenusOptions" appendTo="body" />
+            </div>
+          </div>
+        </div>
+      </div>
     `,
   }),
 };
@@ -345,7 +419,7 @@ export const States: StoryObj<FilterComponent> = {
   }),
 };
 
-export const CustomContent: StoryObj<FilterComponent> = {
+export const CustomDropdownContent: StoryObj<FilterComponent> = {
   render: () => ({
     props: {
       selectedPeriod: "",
@@ -541,7 +615,7 @@ export const Examples: StoryObj<FilterComponent> = {
             <h1 tedi-text="h1" color="secondary">Taotlused</h1>
           </tedi-col>
 
-          <tedi-col class="flex gap-2 align-items-center">
+          <tedi-col class="flex flex-wrap gap-2 align-items-center">
             <tedi-filter
               text="Vastuvõtud"
               variant="secondary"

From f100d837f04cea1c227979cfc252b3c32e468f89 Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Mon, 13 Apr 2026 10:26:59 +0300
Subject: [PATCH 12/18] feat(filter): fixed linter error #329

---
 tedi/components/form/filter/filter.component.spec.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tedi/components/form/filter/filter.component.spec.ts b/tedi/components/form/filter/filter.component.spec.ts
index 37eba644b..a58865ff8 100644
--- a/tedi/components/form/filter/filter.component.spec.ts
+++ b/tedi/components/form/filter/filter.component.spec.ts
@@ -73,7 +73,7 @@ class FilterWithCustomContentHostComponent {
     />
   `,
 })
-class SingleSelectHostComponent2 {
+class SingleSelectHost2Component {
   options: FilterOption[] = [
     { label: "Option A", value: "a" },
     { label: "Option B", value: "b" },
@@ -1316,12 +1316,12 @@ describe("FilterComponent", () => {
   });
 
   describe("reactive forms - single-select with options", () => {
-    let hostFixture: ComponentFixture<SingleSelectHostComponent2>;
-    let host: SingleSelectHostComponent2;
+    let hostFixture: ComponentFixture<SingleSelectHost2Component>;
+    let host: SingleSelectHost2Component;
     let filterComponent: FilterComponent;
 
     beforeEach(() => {
-      hostFixture = TestBed.createComponent(SingleSelectHostComponent2);
+      hostFixture = TestBed.createComponent(SingleSelectHost2Component);
       host = hostFixture.componentInstance;
       hostFixture.detectChanges();
       filterComponent = hostFixture.debugElement.query(

From 8b28626ca2140c413a62010d6d5421e6eab055fc Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Fri, 17 Apr 2026 11:02:17 +0300
Subject: [PATCH 13/18] feat(filter): changes from figma, added group CVA #329

---
 .../form/filter/filter-group.component.scss   |  14 +-
 .../filter/filter-group.component.spec.ts     | 443 +++++++++++
 .../form/filter/filter-group.component.ts     |  86 ++-
 .../form/filter/filter-prepend.directive.ts   |  14 +
 .../form/filter/filter.component.html         |  17 +-
 .../form/filter/filter.component.scss         |  25 +-
 .../form/filter/filter.component.spec.ts      | 210 ++++++
 .../form/filter/filter.component.ts           |  34 +-
 tedi/components/form/filter/filter.stories.ts | 690 +++++++++++++-----
 tedi/components/form/filter/index.ts          |   1 +
 10 files changed, 1318 insertions(+), 216 deletions(-)
 create mode 100644 tedi/components/form/filter/filter-group.component.spec.ts
 create mode 100644 tedi/components/form/filter/filter-prepend.directive.ts

diff --git a/tedi/components/form/filter/filter-group.component.scss b/tedi/components/form/filter/filter-group.component.scss
index 953a6e4f5..885115027 100644
--- a/tedi/components/form/filter/filter-group.component.scss
+++ b/tedi/components/form/filter/filter-group.component.scss
@@ -5,17 +5,25 @@
     --_filter-radius: 0;
   }
 
-  .tedi-filter+.tedi-filter {
+  .tedi-filter--secondary+.tedi-filter--secondary {
     margin-left: calc(-1 * var(--borders-01));
   }
 
+  .tedi-filter--primary:not(:last-child, .tedi-filter--selected) .tedi-filter__button {
+    border-right: var(--borders-01) solid var(--filter-secondary-default-border);
+
+    &:hover {
+      border-right-color: transparent;
+    }
+  }
+
   .tedi-filter--selected,
   .tedi-filter:focus-within {
     z-index: 1;
   }
 
-  .tedi-filter--selected+.tedi-filter,
-  .tedi-filter+.tedi-filter--selected {
+  .tedi-filter--secondary.tedi-filter--selected+.tedi-filter--secondary,
+  .tedi-filter--secondary+.tedi-filter--secondary.tedi-filter--selected {
     margin-left: calc(-1 * var(--general-selected-border-width));
   }
 
diff --git a/tedi/components/form/filter/filter-group.component.spec.ts b/tedi/components/form/filter/filter-group.component.spec.ts
new file mode 100644
index 000000000..d221bf269
--- /dev/null
+++ b/tedi/components/form/filter/filter-group.component.spec.ts
@@ -0,0 +1,443 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+import { Component } from "@angular/core";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { FilterGroupComponent } from "./filter-group.component";
+import { FilterComponent } from "./filter.component";
+
+@Component({
+  standalone: true,
+  imports: [FilterGroupComponent, FilterComponent, ReactiveFormsModule],
+  template: `
+    <tedi-filter-group label="Status" [formControl]="control">
+      <tedi-filter text="All" value="all" />
+      <tedi-filter text="Active" value="active" />
+      <tedi-filter text="Done" value="done" />
+    </tedi-filter-group>
+  `,
+})
+class SingleSelectGroupHostComponent {
+  control = new FormControl<string | null>(null);
+}
+
+@Component({
+  standalone: true,
+  imports: [FilterGroupComponent, FilterComponent, ReactiveFormsModule],
+  template: `
+    <tedi-filter-group
+      label="Tags"
+      [multiselect]="true"
+      [formControl]="control"
+    >
+      <tedi-filter text="Urgent" value="urgent" />
+      <tedi-filter text="Review" value="review" />
+      <tedi-filter text="Draft" value="draft" />
+    </tedi-filter-group>
+  `,
+})
+class MultiSelectGroupHostComponent {
+  control = new FormControl<string[]>([]);
+}
+
+@Component({
+  standalone: true,
+  imports: [FilterGroupComponent, FilterComponent],
+  template: `
+    <tedi-filter-group>
+      <tedi-filter text="Foo" [selected]="true" />
+      <tedi-filter text="Bar" />
+    </tedi-filter-group>
+  `,
+})
+class UnmanagedGroupHostComponent {}
+
+describe("FilterGroupComponent", () => {
+  describe("single-select (radio-like)", () => {
+    let fixture: ComponentFixture<SingleSelectGroupHostComponent>;
+    let host: SingleSelectGroupHostComponent;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [SingleSelectGroupHostComponent],
+      });
+      fixture = TestBed.createComponent(SingleSelectGroupHostComponent);
+      host = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+
+    it("should create", () => {
+      expect(host).toBeTruthy();
+    });
+
+    it("should have role=radiogroup", () => {
+      const group = fixture.debugElement.query(
+        By.directive(FilterGroupComponent),
+      );
+      expect(group.nativeElement.getAttribute("role")).toBe("radiogroup");
+    });
+
+    it("should have aria-label", () => {
+      const group = fixture.debugElement.query(
+        By.directive(FilterGroupComponent),
+      );
+      expect(group.nativeElement.getAttribute("aria-label")).toBe("Status");
+    });
+
+    it("should set role=radio on child buttons", () => {
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons.forEach((btn) => {
+        expect(btn.nativeElement.getAttribute("role")).toBe("radio");
+      });
+    });
+
+    it("should set aria-checked on child buttons", () => {
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons.forEach((btn) => {
+        expect(btn.nativeElement.getAttribute("aria-checked")).toBe("false");
+      });
+    });
+
+    it("should update aria-checked on selection", () => {
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons[1].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(buttons[0].nativeElement.getAttribute("aria-checked")).toBe(
+        "false",
+      );
+      expect(buttons[1].nativeElement.getAttribute("aria-checked")).toBe(
+        "true",
+      );
+      expect(buttons[2].nativeElement.getAttribute("aria-checked")).toBe(
+        "false",
+      );
+    });
+
+    it("should not have aria-pressed on child buttons in radiogroup", () => {
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons.forEach((btn) => {
+        expect(btn.nativeElement.getAttribute("aria-pressed")).toBeNull();
+      });
+    });
+
+    it("should select filter on click", () => {
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons[1].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(host.control.value).toBe("active");
+    });
+
+    it("should deselect others when selecting one", () => {
+      host.control.setValue("all");
+      fixture.detectChanges();
+
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons[1].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(host.control.value).toBe("active");
+
+      const filters = fixture.debugElement.queryAll(
+        By.directive(FilterComponent),
+      );
+      expect(
+        filters[0].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(false);
+      expect(
+        filters[1].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+      expect(
+        filters[2].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(false);
+    });
+
+    it("should deselect on re-click (toggle to null)", () => {
+      host.control.setValue("active");
+      fixture.detectChanges();
+
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons[1].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(host.control.value).toBeNull();
+    });
+
+    it("should reflect initial FormControl value", () => {
+      host.control.setValue("done");
+      fixture.detectChanges();
+
+      const filters = fixture.debugElement.queryAll(
+        By.directive(FilterComponent),
+      );
+      expect(
+        filters[2].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+    });
+
+    it("should mark form control as touched on click", () => {
+      expect(host.control.touched).toBe(false);
+
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons[0].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(host.control.touched).toBe(true);
+    });
+
+    it("should mark form control as dirty on click", () => {
+      expect(host.control.dirty).toBe(false);
+
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons[0].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(host.control.dirty).toBe(true);
+    });
+
+    it("should disable all filters when form control is disabled", () => {
+      host.control.disable();
+      fixture.detectChanges();
+
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons.forEach((btn) => {
+        expect(btn.nativeElement.disabled).toBe(true);
+      });
+    });
+
+    it("should update selection when form control value is set programmatically", () => {
+      host.control.setValue("done");
+      fixture.detectChanges();
+
+      const filters = fixture.debugElement.queryAll(
+        By.directive(FilterComponent),
+      );
+      expect(
+        filters[0].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(false);
+      expect(
+        filters[1].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(false);
+      expect(
+        filters[2].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+
+      host.control.setValue(null);
+      fixture.detectChanges();
+
+      filters.forEach((f) => {
+        expect(
+          f.nativeElement.classList.contains("tedi-filter--selected"),
+        ).toBe(false);
+      });
+    });
+  });
+
+  describe("multi-select (checkbox-like)", () => {
+    let fixture: ComponentFixture<MultiSelectGroupHostComponent>;
+    let host: MultiSelectGroupHostComponent;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [MultiSelectGroupHostComponent],
+      });
+      fixture = TestBed.createComponent(MultiSelectGroupHostComponent);
+      host = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+
+    it("should have role=group", () => {
+      const group = fixture.debugElement.query(
+        By.directive(FilterGroupComponent),
+      );
+      expect(group.nativeElement.getAttribute("role")).toBe("group");
+    });
+
+    it("should have aria-label", () => {
+      const group = fixture.debugElement.query(
+        By.directive(FilterGroupComponent),
+      );
+      expect(group.nativeElement.getAttribute("aria-label")).toBe("Tags");
+    });
+
+    it("should have aria-pressed on child buttons (not aria-checked)", () => {
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons.forEach((btn) => {
+        expect(btn.nativeElement.getAttribute("aria-pressed")).toBe("false");
+        expect(btn.nativeElement.getAttribute("aria-checked")).toBeNull();
+        expect(btn.nativeElement.getAttribute("role")).toBeNull();
+      });
+    });
+
+    it("should toggle individual filters independently", () => {
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+
+      buttons[0].nativeElement.click();
+      fixture.detectChanges();
+      expect(host.control.value).toEqual(["urgent"]);
+
+      buttons[1].nativeElement.click();
+      fixture.detectChanges();
+      expect(host.control.value).toEqual(["urgent", "review"]);
+    });
+
+    it("should deselect on re-click", () => {
+      host.control.setValue(["urgent", "review"]);
+      fixture.detectChanges();
+
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons[0].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(host.control.value).toEqual(["review"]);
+    });
+
+    it("should reflect initial FormControl value", () => {
+      host.control.setValue(["urgent", "draft"]);
+      fixture.detectChanges();
+
+      const filters = fixture.debugElement.queryAll(
+        By.directive(FilterComponent),
+      );
+      expect(
+        filters[0].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+      expect(
+        filters[1].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(false);
+      expect(
+        filters[2].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+    });
+
+    it("should disable all filters when form control is disabled", () => {
+      host.control.disable();
+      fixture.detectChanges();
+
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons.forEach((btn) => {
+        expect(btn.nativeElement.disabled).toBe(true);
+      });
+    });
+
+    it("should mark form control as touched on click", () => {
+      expect(host.control.touched).toBe(false);
+
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons[0].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(host.control.touched).toBe(true);
+    });
+
+    it("should mark form control as dirty on click", () => {
+      expect(host.control.dirty).toBe(false);
+
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      buttons[0].nativeElement.click();
+      fixture.detectChanges();
+
+      expect(host.control.dirty).toBe(true);
+    });
+
+    it("should update selection when form control value is set programmatically", () => {
+      host.control.setValue(["review", "draft"]);
+      fixture.detectChanges();
+
+      const filters = fixture.debugElement.queryAll(
+        By.directive(FilterComponent),
+      );
+      expect(
+        filters[0].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(false);
+      expect(
+        filters[1].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+      expect(
+        filters[2].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+    });
+  });
+
+  describe("unmanaged (visual-only, backward compatible)", () => {
+    let fixture: ComponentFixture<UnmanagedGroupHostComponent>;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [UnmanagedGroupHostComponent],
+      });
+      fixture = TestBed.createComponent(UnmanagedGroupHostComponent);
+      fixture.detectChanges();
+    });
+
+    it("should not have role attribute", () => {
+      const group = fixture.debugElement.query(
+        By.directive(FilterGroupComponent),
+      );
+      expect(group.nativeElement.getAttribute("role")).toBeNull();
+    });
+
+    it("should have aria-pressed on child buttons (standalone behavior)", () => {
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+      expect(buttons[0].nativeElement.getAttribute("aria-pressed")).toBe(
+        "true",
+      );
+      expect(buttons[1].nativeElement.getAttribute("aria-pressed")).toBe(
+        "false",
+      );
+    });
+
+    it("should toggle independently without group coordination", () => {
+      const buttons = fixture.debugElement.queryAll(
+        By.css(".tedi-filter__button"),
+      );
+
+      buttons[1].nativeElement.click();
+      fixture.detectChanges();
+
+      const filters = fixture.debugElement.queryAll(
+        By.directive(FilterComponent),
+      );
+      expect(
+        filters[0].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+      expect(
+        filters[1].nativeElement.classList.contains("tedi-filter--selected"),
+      ).toBe(true);
+    });
+  });
+});
diff --git a/tedi/components/form/filter/filter-group.component.ts b/tedi/components/form/filter/filter-group.component.ts
index f3536948e..506e453c5 100644
--- a/tedi/components/form/filter/filter-group.component.ts
+++ b/tedi/components/form/filter/filter-group.component.ts
@@ -2,7 +2,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   ViewEncapsulation,
+  forwardRef,
+  input,
+  model,
+  signal,
 } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 @Component({
   selector: "tedi-filter-group",
@@ -11,8 +16,87 @@ import {
   styleUrl: "./filter-group.component.scss",
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FilterGroupComponent),
+      multi: true,
+    },
+  ],
   host: {
     class: "tedi-filter-group",
+    "[attr.role]":
+      "isManaged() ? (multiselect() ? 'group' : 'radiogroup') : null",
+    "[attr.aria-label]": "label()",
   },
 })
-export class FilterGroupComponent {}
+export class FilterGroupComponent implements ControlValueAccessor {
+  /**
+   * Multi-select mode allows multiple filters to be selected simultaneously.
+   * When false, only one filter can be selected at a time (radio-like behavior).
+   * @default false
+   */
+  readonly multiselect = input<boolean>(false);
+  /**
+   * Selected value in single-select mode. Two-way bound.
+   */
+  readonly value = model<string | null>(null);
+  /**
+   * Selected values in multi-select mode. Two-way bound.
+   */
+  readonly values = model<string[]>([]);
+  /**
+   * Accessible label for the group.
+   */
+  readonly label = input<string>();
+
+  readonly isManaged = signal(false);
+  readonly disabled = signal(false);
+
+  private onChange: (value: string | null | string[]) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  writeValue(value: string | null | string[]): void {
+    if (this.multiselect()) {
+      this.values.set(Array.isArray(value) ? value : []);
+    } else {
+      this.value.set(typeof value === "string" ? value : null);
+    }
+  }
+
+  registerOnChange(fn: (value: string | null | string[]) => void): void {
+    this.onChange = fn;
+    this.isManaged.set(true);
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled.set(isDisabled);
+  }
+
+  selectFilter(value: string): void {
+    if (this.multiselect()) {
+      const current = this.values();
+      const next = current.includes(value)
+        ? current.filter((v) => v !== value)
+        : [...current, value];
+      this.values.set(next);
+      this.onChange(next);
+    } else {
+      const next = this.value() === value ? null : value;
+      this.value.set(next);
+      this.onChange(next);
+    }
+    this.onTouched();
+  }
+
+  isSelected(value: string): boolean {
+    if (this.multiselect()) {
+      return this.values().includes(value);
+    }
+    return this.value() === value;
+  }
+}
diff --git a/tedi/components/form/filter/filter-prepend.directive.ts b/tedi/components/form/filter/filter-prepend.directive.ts
new file mode 100644
index 000000000..b568a0b13
--- /dev/null
+++ b/tedi/components/form/filter/filter-prepend.directive.ts
@@ -0,0 +1,14 @@
+import { Directive, input } from "@angular/core";
+
+@Directive({
+  selector: "[tediFilterPrepend]",
+  standalone: true,
+})
+export class FilterPrependDirective {
+  /**
+   * Whether to hide the prepend content when the filter is selected.
+   * When true, the prepend is replaced by a check icon on selection.
+   * @default true
+   */
+  readonly hideWhenSelected = input(true);
+}
diff --git a/tedi/components/form/filter/filter.component.html b/tedi/components/form/filter/filter.component.html
index 5dea260e3..75e14f40f 100644
--- a/tedi/components/form/filter/filter.component.html
+++ b/tedi/components/form/filter/filter.component.html
@@ -58,6 +58,7 @@
                 class="tedi-filter-dropdown__item"
                 [class.tedi-filter-dropdown__item--disabled]="option.disabled"
                 [class.tedi-filter-dropdown__item--focused]="activeOptionIndex() === i"
+                [class.tedi-filter-dropdown__item--selected]="isOptionSelected(option.value)"
                 role="option"
                 [attr.aria-selected]="isOptionSelected(option.value)"
                 [attr.aria-disabled]="option.disabled || null"
@@ -165,7 +166,9 @@
     class="tedi-filter__button"
     type="button"
     [disabled]="disabled()"
-    [attr.aria-pressed]="isSelected()"
+    [attr.role]="isGroupedRadio() ? 'radio' : null"
+    [attr.aria-checked]="isGroupedRadio() ? isSelected() : null"
+    [attr.aria-pressed]="isGroupedRadio() ? null : isSelected()"
     (click)="toggle()"
   >
     <ng-container *ngTemplateOutlet="buttonContent" />
@@ -173,16 +176,20 @@
 }
 
 <ng-template #buttonContent>
-  <div class="tedi-filter__prepend" [class.tedi-filter__prepend--hidden]="isSelected()">
-    <ng-content select="[tediFilterPrepend]" />
-  </div>
-
   @if (!hasDropdown() && isSelected()) {
     <tedi-icon class="tedi-filter__icon" name="check" [size]="iconSize()" color="inherit" />
   }
 
+  <div class="tedi-filter__prepend" [class.tedi-filter__prepend--hidden]="hidePrepend()">
+    <ng-content select="[tediFilterPrepend]" />
+  </div>
+
   <span class="tedi-filter__text">{{ displayText() }}</span>
 
+  <div class="tedi-filter__append">
+    <ng-content select="[tediFilterAppend]" />
+  </div>
+
   @if (multiselect() && isSelected() && selectedCount() > 0) {
     <tedi-status-badge class="tedi-filter__count" [text]="'' + selectedCount()" color="brand" />
   }
diff --git a/tedi/components/form/filter/filter.component.scss b/tedi/components/form/filter/filter.component.scss
index c43017845..ec556e5d8 100644
--- a/tedi/components/form/filter/filter.component.scss
+++ b/tedi/components/form/filter/filter.component.scss
@@ -47,17 +47,21 @@
     padding: 0 var(--_filter-inner-spacing);
   }
 
-  &__prepend {
+  &__prepend,
+  &__append {
     display: flex;
     align-items: center;
     padding: 0 var(--_filter-inner-spacing);
 
-    &:empty,
-    &--hidden {
+    &:empty {
       display: none;
     }
   }
 
+  &__prepend--hidden {
+    display: none;
+  }
+
   &__count {
     padding-left: var(--layout-grid-gutters-04);
   }
@@ -165,6 +169,21 @@
       cursor: not-allowed;
     }
 
+    &--selected {
+      color: var(--dropdown-item-active-text);
+      background: var(--dropdown-item-active-background);
+
+      .tedi-dropdown-item-value__label,
+      .tedi-dropdown-item-value__meta {
+        color: inherit;
+      }
+
+      &:hover:not(&--disabled) {
+        color: var(--dropdown-item-active-text);
+        background: var(--dropdown-item-active-background);
+      }
+    }
+
     &--focused {
       outline: var(--borders-02) solid var(--form-input-border-active);
       outline-offset: calc(-1 * var(--borders-02));
diff --git a/tedi/components/form/filter/filter.component.spec.ts b/tedi/components/form/filter/filter.component.spec.ts
index a58865ff8..f139b1d9a 100644
--- a/tedi/components/form/filter/filter.component.spec.ts
+++ b/tedi/components/form/filter/filter.component.spec.ts
@@ -4,7 +4,9 @@ import { Component } from "@angular/core";
 import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import { FilterComponent, FilterOption } from "./filter.component";
 import { FilterContentDirective } from "./filter-content.directive";
+import { FilterPrependDirective } from "./filter-prepend.directive";
 import { IconComponent } from "../../base/icon/icon.component";
+import { StatusBadgeComponent } from "../../tags/status-badge/status-badge.component";
 
 @Component({
   standalone: true,
@@ -82,6 +84,53 @@ class SingleSelectHost2Component {
   control = new FormControl<string>("");
 }
 
+@Component({
+  standalone: true,
+  imports: [
+    FilterComponent,
+    FilterPrependDirective,
+    StatusBadgeComponent,
+  ],
+  template: `
+    <tedi-filter text="Submitted" [selected]="selected">
+      <tedi-status-badge tediFilterPrepend text="5" color="brand" />
+    </tedi-filter>
+  `,
+})
+class PrependDefaultHostComponent {
+  selected = false;
+}
+
+@Component({
+  standalone: true,
+  imports: [
+    FilterComponent,
+    FilterPrependDirective,
+    StatusBadgeComponent,
+  ],
+  template: `
+    <tedi-filter text="Submitted" [selected]="selected">
+      <tedi-status-badge tediFilterPrepend [hideWhenSelected]="false" text="5" color="brand" />
+    </tedi-filter>
+  `,
+})
+class PrependVisibleHostComponent {
+  selected = false;
+}
+
+@Component({
+  standalone: true,
+  imports: [FilterComponent, StatusBadgeComponent],
+  template: `
+    <tedi-filter text="Requires attention" [selected]="selected">
+      <tedi-status-badge tediFilterAppend text="7" color="danger" />
+    </tedi-filter>
+  `,
+})
+class AppendHostComponent {
+  selected = false;
+}
+
 const TEST_OPTIONS: FilterOption[] = [
   { label: "Option A", value: "a" },
   { label: "Option B", value: "b" },
@@ -1441,4 +1490,165 @@ describe("FilterComponent", () => {
       ).toBe(true);
     });
   });
+
+  describe("prepend directive", () => {
+    it("should hide prepend when selected by default", () => {
+      const hostFixture = TestBed.createComponent(
+        PrependDefaultHostComponent,
+      );
+      hostFixture.detectChanges();
+
+      const prepend = hostFixture.debugElement.query(
+        By.css(".tedi-filter__prepend"),
+      );
+      expect(
+        prepend.nativeElement.classList.contains(
+          "tedi-filter__prepend--hidden",
+        ),
+      ).toBe(false);
+
+      hostFixture.componentInstance.selected = true;
+      hostFixture.detectChanges();
+
+      expect(
+        prepend.nativeElement.classList.contains(
+          "tedi-filter__prepend--hidden",
+        ),
+      ).toBe(true);
+    });
+
+    it("should keep prepend visible when hideWhenSelected is false", () => {
+      const hostFixture = TestBed.createComponent(
+        PrependVisibleHostComponent,
+      );
+      hostFixture.detectChanges();
+
+      hostFixture.componentInstance.selected = true;
+      hostFixture.detectChanges();
+
+      const prepend = hostFixture.debugElement.query(
+        By.css(".tedi-filter__prepend"),
+      );
+      expect(
+        prepend.nativeElement.classList.contains(
+          "tedi-filter__prepend--hidden",
+        ),
+      ).toBe(false);
+    });
+
+    it("should show check icon alongside visible prepend when selected", () => {
+      const hostFixture = TestBed.createComponent(
+        PrependVisibleHostComponent,
+      );
+      hostFixture.componentInstance.selected = true;
+      hostFixture.detectChanges();
+
+      const checkIcon = hostFixture.debugElement.query(
+        By.css(".tedi-filter__icon"),
+      );
+      const prepend = hostFixture.debugElement.query(
+        By.css(".tedi-filter__prepend"),
+      );
+      expect(checkIcon).toBeTruthy();
+      expect(
+        prepend.nativeElement.classList.contains(
+          "tedi-filter__prepend--hidden",
+        ),
+      ).toBe(false);
+    });
+
+    it("should render check icon before prepend in DOM order", () => {
+      const hostFixture = TestBed.createComponent(
+        PrependVisibleHostComponent,
+      );
+      hostFixture.componentInstance.selected = true;
+      hostFixture.detectChanges();
+
+      const button = hostFixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+      const children = Array.from(
+        button.nativeElement.children,
+      ) as HTMLElement[];
+      const iconIndex = children.findIndex((el) =>
+        el.classList.contains("tedi-filter__icon"),
+      );
+      const prependIndex = children.findIndex((el) =>
+        el.classList.contains("tedi-filter__prepend"),
+      );
+      expect(iconIndex).toBeLessThan(prependIndex);
+    });
+
+    it("should hide prepend when no directive is used (backward compat)", () => {
+      const hostFixture = TestBed.createComponent(
+        FilterWithIconHostComponent,
+      );
+      hostFixture.detectChanges();
+
+      const filter = hostFixture.debugElement.query(
+        By.directive(FilterComponent),
+      );
+      filter.componentInstance.selected.set(true);
+      hostFixture.detectChanges();
+
+      const prepend = hostFixture.debugElement.query(
+        By.css(".tedi-filter__prepend"),
+      );
+      expect(
+        prepend.nativeElement.classList.contains(
+          "tedi-filter__prepend--hidden",
+        ),
+      ).toBe(true);
+    });
+  });
+
+  describe("append directive", () => {
+    it("should project append content after text", () => {
+      const hostFixture = TestBed.createComponent(AppendHostComponent);
+      hostFixture.detectChanges();
+
+      const append = hostFixture.debugElement.query(
+        By.css(".tedi-filter__append"),
+      );
+      expect(append).toBeTruthy();
+
+      const badge = append.query(By.directive(StatusBadgeComponent));
+      expect(badge).toBeTruthy();
+    });
+
+    it("should render append after text in DOM order", () => {
+      const hostFixture = TestBed.createComponent(AppendHostComponent);
+      hostFixture.detectChanges();
+
+      const button = hostFixture.debugElement.query(
+        By.css(".tedi-filter__button"),
+      );
+      const children = Array.from(
+        button.nativeElement.children,
+      ) as HTMLElement[];
+      const textIndex = children.findIndex((el) =>
+        el.classList.contains("tedi-filter__text"),
+      );
+      const appendIndex = children.findIndex((el) =>
+        el.classList.contains("tedi-filter__append"),
+      );
+      expect(textIndex).toBeLessThan(appendIndex);
+    });
+
+    it("should keep append visible when selected by default", () => {
+      const hostFixture = TestBed.createComponent(AppendHostComponent);
+      hostFixture.componentInstance.selected = true;
+      hostFixture.detectChanges();
+
+      const append = hostFixture.debugElement.query(
+        By.css(".tedi-filter__append"),
+      );
+      expect(
+        append.nativeElement.classList.contains(
+          "tedi-filter__append--hidden",
+        ),
+      ).toBe(false);
+    });
+
+  });
 });
diff --git a/tedi/components/form/filter/filter.component.ts b/tedi/components/form/filter/filter.component.ts
index b352c80a8..12fa1a861 100644
--- a/tedi/components/form/filter/filter.component.ts
+++ b/tedi/components/form/filter/filter.component.ts
@@ -13,6 +13,7 @@ import {
   signal,
   viewChild,
 } from "@angular/core";
+import { FilterGroupComponent } from "./filter-group.component";
 import { _IdGenerator } from "@angular/cdk/a11y";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { NgTemplateOutlet } from "@angular/common";
@@ -27,6 +28,7 @@ import { DropdownItemValueLabelComponent } from "../../overlay/dropdown/dropdown
 import { FormFieldComponent } from "../form-field/form-field.component";
 import { TextFieldComponent } from "../text-field/text-field.component";
 import { FilterContentDirective } from "./filter-content.directive";
+import { FilterPrependDirective } from "./filter-prepend.directive";
 
 export type FilterVariant = "primary" | "secondary";
 export type FilterSize = "default" | "large";
@@ -162,7 +164,11 @@ export class FilterComponent implements ControlValueAccessor {
   private readonly triggerBtn =
     viewChild<ElementRef<HTMLButtonElement>>("triggerBtn");
 
+  private readonly filterGroup = inject(FilterGroupComponent, {
+    optional: true,
+  });
   private readonly customContent = contentChild(FilterContentDirective);
+  private readonly filterPrepend = contentChild(FilterPrependDirective);
   readonly hasCustomContent = computed(() => !!this.customContent());
   readonly hasOptions = computed(() => this.options().length > 0);
   readonly isSingleSelect = computed(
@@ -175,7 +181,10 @@ export class FilterComponent implements ControlValueAccessor {
   private readonly idGenerator = inject(_IdGenerator);
   private readonly baseId = this.idGenerator.getId("tedi-filter");
 
-  readonly disabled = signal(false);
+  private readonly _disabled = signal(false);
+  readonly disabled = computed(
+    () => this._disabled() || !!this.filterGroup?.disabled(),
+  );
   readonly searchTerm = signal("");
   readonly activeOptionIndex = signal<number>(-1);
 
@@ -189,7 +198,24 @@ export class FilterComponent implements ControlValueAccessor {
 
   readonly iconSize = computed(() => (this.size() === "large" ? 24 : 18));
 
+  readonly isGrouped = computed(
+    () => !!this.filterGroup && this.filterGroup.isManaged(),
+  );
+
+  readonly isGroupedRadio = computed(
+    () => this.isGrouped() && !this.filterGroup!.multiselect(),
+  );
+
+  readonly hidePrepend = computed(
+    () =>
+      this.isSelected() &&
+      (this.filterPrepend()?.hideWhenSelected() ?? true),
+  );
+
   readonly isSelected = computed(() => {
+    if (this.isGrouped()) {
+      return this.filterGroup!.isSelected(this.value());
+    }
     if (this.multiselect()) {
       return this.values().length > 0;
     }
@@ -264,10 +290,14 @@ export class FilterComponent implements ControlValueAccessor {
   }
 
   setDisabledState(isDisabled: boolean): void {
-    this.disabled.set(isDisabled);
+    this._disabled.set(isDisabled);
   }
 
   toggle(): void {
+    if (this.isGrouped()) {
+      this.filterGroup!.selectFilter(this.value());
+      return;
+    }
     const newValue = !this.selected();
     this.selected.set(newValue);
     this.onChange(newValue);
diff --git a/tedi/components/form/filter/filter.stories.ts b/tedi/components/form/filter/filter.stories.ts
index 94e849ba5..786db2bb4 100644
--- a/tedi/components/form/filter/filter.stories.ts
+++ b/tedi/components/form/filter/filter.stories.ts
@@ -5,6 +5,7 @@ import {
   ButtonComponent,
   FilterComponent,
   FilterContentDirective,
+  FilterPrependDirective,
   FilterGroupComponent,
   RowComponent,
   ColComponent,
@@ -29,6 +30,7 @@ export default {
         ButtonComponent,
         FilterComponent,
         FilterContentDirective,
+        FilterPrependDirective,
         FilterGroupComponent,
         IconComponent,
         ReactiveFormsModule,
@@ -176,76 +178,41 @@ export const Default: StoryObj<FilterComponent> = {
   },
 };
 
-export const SingleSelect: StoryObj<FilterComponent> = {
+export const Size: StoryObj<FilterComponent> = {
   render: () => ({
     template: `
-      <div class="flex flex-column gap-4">
-        <div>
-          <p tedi-text modifiers="bold" class="mb-2">Separate</p>
-          <div class="flex flex-column gap-2">
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter text="Vastuvõtud" [selected]="true" />
-              <tedi-filter text="Analüüsid" [selected]="true" />
-              <tedi-filter text="Uuringud" />
-              <tedi-filter text="Vaktsineerimised" />
-            </div>
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter text="Vastuvõtud" variant="secondary" [selected]="true" />
-              <tedi-filter text="Analüüsid" variant="secondary" [selected]="true" />
-              <tedi-filter text="Uuringud" variant="secondary" />
-              <tedi-filter text="Vaktsineerimised" variant="secondary" />
-            </div>
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter text="Vastuvõtud" variant="secondary" [selected]="true">
-                <tedi-icon tediFilterPrepend name="medical_services" [size]="18" />
-              </tedi-filter>
-              <tedi-filter text="Analüüsid" variant="secondary">
-                <tedi-icon tediFilterPrepend name="science" [size]="18" />
-              </tedi-filter>
-              <tedi-filter text="Uuringud" variant="secondary">
-                <tedi-icon tediFilterPrepend name="biotech" [size]="18" />
-              </tedi-filter>
-              <tedi-filter text="Vaktsineerimised" variant="secondary">
-                <tedi-icon tediFilterPrepend name="vaccines" [size]="18" />
-              </tedi-filter>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <p tedi-text modifiers="bold" class="mb-2">Grouped</p>
-          <div class="flex flex-column gap-2">
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter-group>
-                <tedi-filter text="Kooskõlastatud" />
-                <tedi-filter text="Tagasilükatud" />
-              </tedi-filter-group>
-              <tedi-filter-group>
-                <tedi-filter text="Kooskõlastatud" [selected]="true" />
-                <tedi-filter text="Tagasilükatud" />
-              </tedi-filter-group>
-            </div>
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter-group>
-                <tedi-filter text="Kooskõlastatud" variant="secondary" />
-                <tedi-filter text="Tagasilükatud" variant="secondary" />
-              </tedi-filter-group>
-              <tedi-filter-group>
-                <tedi-filter text="Kooskõlastatud" variant="secondary" [selected]="true" />
-                <tedi-filter text="Tagasilükatud" variant="secondary" />
-              </tedi-filter-group>
-            </div>
-          </div>
-        </div>
-      </div>
+      <tedi-row [cols]="2" [gapY]="3" alignItems="center">
+        <tedi-col><p tedi-text modifiers="bold">Default</p></tedi-col>
+        <tedi-col class="flex flex-wrap gap-2">
+          <tedi-filter text="Text" [selected]="true" />
+          <tedi-filter text="Text" />
+          <tedi-filter text="Text" />
+          <tedi-filter text="Text" />
+        </tedi-col>
+        <tedi-col><p tedi-text modifiers="bold">Large</p></tedi-col>
+        <tedi-col class="flex flex-wrap gap-2">
+          <tedi-filter text="Text" size="large" [selected]="true" />
+          <tedi-filter text="Text" size="large" />
+          <tedi-filter text="Text" size="large" />
+          <tedi-filter text="Text" size="large" />
+        </tedi-col>
+      </tedi-row>
     `,
   }),
 };
 
-export const Multiselect: StoryObj<FilterComponent> = {
+/**
+ * Single value filters include boolean toggles (separate and grouped) and single-select dropdown filters.
+ */
+export const SingleValueFilter: StoryObj<FilterComponent> = {
   render: () => ({
     props: {
-      options: [
+      teenusOptions: [
+        { label: "Optometristi vastuvõtt", value: "1" },
+        { label: "Silmaarsti vastuvõtt", value: "2" },
+        { label: "Hambaarsti vastuvõtt", value: "3" },
+      ],
+      raviasutusOptions: [
         { label: "Fertilitas", value: "1" },
         { label: "Ida-Tallinna Keskhaigla", value: "2" },
         { label: "Lääne-Tallinna Keskhaigla", value: "3" },
@@ -253,118 +220,230 @@ export const Multiselect: StoryObj<FilterComponent> = {
         { label: "Tallinna Lastehaigla", value: "5" },
         { label: "Tartu Ülikooli Kliinikum", value: "6" },
       ],
-      teenusOptions: [
-        { label: "Optometristi vastuvõtt", value: "1" },
-        { label: "Silmaarsti vastuvõtt", value: "2" },
-        { label: "Hambaarsti vastuvõtt", value: "3" },
-      ],
-      compactValues1: [] as string[],
-      compactValues2: [] as string[],
     },
     template: `
-      <div class="flex flex-column gap-4">
-        <div>
-          <p tedi-text modifiers="bold" class="mb-2">Compact</p>
-          <div class="flex flex-column gap-2">
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter text="Raviasutus" [multiselect]="true" [options]="options" [(values)]="compactValues1" [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
-              <tedi-filter text="Teenus" [options]="teenusOptions" appendTo="body" />
-            </div>
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter text="Raviasutus" variant="secondary" [multiselect]="true" [options]="options" [(values)]="compactValues2" [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
-              <tedi-filter text="Teenus" variant="secondary" [options]="teenusOptions" appendTo="body" />
-            </div>
+      <tedi-row cols="1" [gapY]="3">
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text>Separate</p>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter text="Vastuvõtud" [selected]="true" />
+            <tedi-filter text="Analüüsid" [selected]="true" />
+            <tedi-filter text="Uuringud" />
+            <tedi-filter text="Vaktsineerimised" />
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter text="Vastuvõtud" variant="secondary" [selected]="true" />
+            <tedi-filter text="Analüüsid" variant="secondary" [selected]="true" />
+            <tedi-filter text="Uuringud" variant="secondary" />
+            <tedi-filter text="Vaktsineerimised" variant="secondary" />
           </div>
-        </div>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter text="Vastuvõtud" variant="secondary" [selected]="true">
+              <tedi-icon tediFilterPrepend name="medical_services" [size]="18" />
+            </tedi-filter>
+            <tedi-filter text="Analüüsid" variant="secondary">
+              <tedi-icon tediFilterPrepend name="science" [size]="18" />
+            </tedi-filter>
+            <tedi-filter text="Uuringud" variant="secondary">
+              <tedi-icon tediFilterPrepend name="biotech" [size]="18" />
+            </tedi-filter>
+            <tedi-filter text="Vaktsineerimised" variant="secondary">
+              <tedi-icon tediFilterPrepend name="vaccines" [size]="18" />
+            </tedi-filter>
+          </div>
+        </tedi-col>
 
-        <div>
-          <p tedi-text modifiers="bold" class="mb-2">Show value and label</p>
-          <div class="flex flex-column gap-2">
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter text="Teenus" [options]="teenusOptions" [preserveLabel]="true" [showClear]="true" appendTo="body" />
-            </div>
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter text="Teenus" variant="secondary" [options]="teenusOptions" [preserveLabel]="true" [showClear]="true" appendTo="body" />
-            </div>
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text>Grouped</p>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter-group>
+              <tedi-filter text="Kooskõlastatud" />
+              <tedi-filter text="Tagasilükatud" />
+            </tedi-filter-group>
+            <tedi-filter-group>
+              <tedi-filter text="Kooskõlastatud" [selected]="true" />
+              <tedi-filter text="Tagasilükatud" />
+            </tedi-filter-group>
           </div>
-        </div>
-
-        <div>
-          <p tedi-text modifiers="bold" class="mb-2">Show value</p>
-          <div class="flex flex-column gap-2">
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter text="Raviasutus" [options]="options" appendTo="body" />
-              <tedi-filter text="Teenus" [options]="teenusOptions" appendTo="body" />
-            </div>
-            <div class="flex flex-wrap gap-2">
-              <tedi-filter text="Raviasutus" variant="secondary" [options]="options" appendTo="body" />
-              <tedi-filter text="Teenus" variant="secondary" [options]="teenusOptions" appendTo="body" />
-            </div>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter-group>
+              <tedi-filter text="Kooskõlastatud" variant="secondary" />
+              <tedi-filter text="Tagasilükatud" variant="secondary" />
+            </tedi-filter-group>
+            <tedi-filter-group>
+              <tedi-filter text="Kooskõlastatud" variant="secondary" [selected]="true" />
+              <tedi-filter text="Tagasilükatud" variant="secondary" />
+            </tedi-filter-group>
           </div>
-        </div>
-      </div>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter-group>
+              <tedi-filter text="Analüüsid" />
+              <tedi-filter text="Doonorlus" />
+              <tedi-filter text="Uuringud" />
+              <tedi-filter text="Vaktsineerimised" />
+            </tedi-filter-group>
+          </div>
+        </tedi-col>
+
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text>Dropdown label + value</p>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter text="Teenus" [options]="teenusOptions" [preserveLabel]="true" [showClear]="true" appendTo="body" />
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter text="Teenus" variant="secondary" [options]="teenusOptions" [preserveLabel]="true" [showClear]="true" appendTo="body" />
+          </div>
+        </tedi-col>
+
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text>Dropdown value</p>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter text="Raviasutus" [options]="raviasutusOptions" appendTo="body" />
+            <tedi-filter text="Teenus" [options]="teenusOptions" appendTo="body" />
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <tedi-filter text="Raviasutus" variant="secondary" [options]="raviasutusOptions" appendTo="body" />
+            <tedi-filter text="Teenus" variant="secondary" [options]="teenusOptions" appendTo="body" />
+          </div>
+        </tedi-col>
+      </tedi-row>
     `,
   }),
 };
 
-export const CustomizeContent: StoryObj<FilterComponent> = {
+/**
+ * Multi value filters use a dropdown with checkboxes, search, select all, and clear functionality.
+ */
+export const MultiValueFilter: StoryObj<FilterComponent> = {
   render: () => ({
+    props: {
+      options: [
+        { label: "Fertilitas", value: "1" },
+        { label: "Ida-Tallinna Keskhaigla", value: "2" },
+        { label: "Lääne-Tallinna Keskhaigla", value: "3" },
+        { label: "Põhja-Eesti Regionaalhaigla", value: "4" },
+        { label: "Tallinna Lastehaigla", value: "5" },
+        { label: "Tartu Ülikooli Kliinikum", value: "6" },
+      ],
+      values1: [] as string[],
+      values2: [] as string[],
+    },
     template: `
-      <div class="flex flex-column gap-2">
-        <tedi-filter-group>
-          <tedi-filter text="Unread (3)" variant="secondary" size="large">
-            <tedi-status-indicator tediFilterPrepend type="danger" />
-          </tedi-filter>
-          <tedi-filter text="All" variant="secondary" size="large" />
-        </tedi-filter-group>
-
-        <tedi-filter-group>
-          <tedi-filter text="Unread (3)" variant="secondary" size="large" [selected]="true">
-            <tedi-status-indicator tediFilterPrepend type="danger" />
-          </tedi-filter>
-          <tedi-filter text="All" variant="secondary" size="large" />
-        </tedi-filter-group>
-
-        <tedi-filter-group>
-          <tedi-filter text="Submitted" variant="secondary" size="large">
-            <tedi-status-badge tediFilterPrepend text="5" color="brand" />
-          </tedi-filter>
-          <tedi-filter text="Requires attention" variant="secondary" size="large">
-            <tedi-status-badge tediFilterPrepend text="7" color="danger" />
-          </tedi-filter>
-        </tedi-filter-group>
-
-        <tedi-filter-group>
-          <tedi-filter text="Submitted" variant="secondary" size="large" [selected]="true">
-            <tedi-status-badge tediFilterPrepend text="5" color="brand" />
-          </tedi-filter>
-          <tedi-filter text="Requires attention" variant="secondary" size="large">
-            <tedi-status-badge tediFilterPrepend text="7" color="danger" />
-          </tedi-filter>
-        </tedi-filter-group>
-      </div>
+      <tedi-row cols="1" [gapY]="3">
+        <tedi-col class="flex flex-wrap gap-2">
+          <tedi-filter text="Raviasutus" [multiselect]="true" [options]="options" [(values)]="values1" [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
+        </tedi-col>
+        <tedi-col class="flex flex-wrap gap-2">
+          <tedi-filter text="Raviasutus" variant="secondary" [multiselect]="true" [options]="options" [(values)]="values2" [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
+        </tedi-col>
+      </tedi-row>
     `,
   }),
 };
 
-export const GroupedFilters: StoryObj<FilterComponent> = {
+export const CustomizeContent: StoryObj<FilterComponent> = {
   render: () => ({
     template: `
-      <tedi-row cols="auto" [gap]="3">
-        <tedi-col>
+      <tedi-row cols="1" [gapY]="3">
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text>Prepend hidden when selected (default)</p>
+          <tedi-filter-group>
+            <tedi-filter text="Unread (3)" variant="secondary" size="large">
+              <tedi-status-indicator tediFilterPrepend type="danger" />
+            </tedi-filter>
+            <tedi-filter text="All" variant="secondary" size="large" />
+          </tedi-filter-group>
+          <tedi-filter-group>
+            <tedi-filter text="Unread (3)" variant="secondary" size="large" [selected]="true">
+              <tedi-status-indicator tediFilterPrepend type="danger" />
+            </tedi-filter>
+            <tedi-filter text="All" variant="secondary" size="large" />
+          </tedi-filter-group>
           <tedi-filter-group>
-            <tedi-filter text="Kõik" [selected]="true" />
-            <tedi-filter text="Aktiivsed" />
-            <tedi-filter text="Lõpetatud" />
+            <tedi-filter text="Submitted" variant="secondary" size="large">
+              <tedi-status-badge tediFilterPrepend text="5" color="brand" />
+            </tedi-filter>
+            <tedi-filter text="Requires attention" variant="secondary" size="large">
+              <tedi-status-badge tediFilterPrepend text="7" color="danger" />
+            </tedi-filter>
+          </tedi-filter-group>
+          <tedi-filter-group>
+            <tedi-filter text="Submitted" variant="secondary" size="large" [selected]="true">
+              <tedi-status-badge tediFilterPrepend text="5" color="brand" />
+            </tedi-filter>
+            <tedi-filter text="Requires attention" variant="secondary" size="large">
+              <tedi-status-badge tediFilterPrepend text="7" color="danger" />
+            </tedi-filter>
+          </tedi-filter-group>
+        </tedi-col>
+
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text>Prepend visible when selected</p>
+          <tedi-filter-group>
+            <tedi-filter text="Submitted" variant="secondary" size="large">
+              <tedi-status-badge tediFilterPrepend [hideWhenSelected]="false" text="5" color="brand" />
+            </tedi-filter>
+            <tedi-filter text="Requires attention" variant="secondary" size="large">
+              <tedi-status-badge tediFilterPrepend [hideWhenSelected]="false" text="7" color="danger" />
+            </tedi-filter>
+          </tedi-filter-group>
+          <tedi-filter-group>
+            <tedi-filter text="Submitted" variant="secondary" size="large" [selected]="true">
+              <tedi-status-badge tediFilterPrepend [hideWhenSelected]="false" text="5" color="brand" />
+            </tedi-filter>
+            <tedi-filter text="Requires attention" variant="secondary" size="large">
+              <tedi-status-badge tediFilterPrepend [hideWhenSelected]="false" text="7" color="danger" />
+            </tedi-filter>
           </tedi-filter-group>
         </tedi-col>
-        <tedi-col>
+
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text>Append</p>
+          <tedi-filter-group>
+            <tedi-filter text="Submitted" variant="secondary" size="large">
+              <tedi-status-badge tediFilterAppend text="5" color="brand" />
+            </tedi-filter>
+            <tedi-filter text="Requires attention" variant="secondary" size="large">
+              <tedi-status-badge tediFilterAppend text="7" color="danger" />
+            </tedi-filter>
+          </tedi-filter-group>
           <tedi-filter-group>
-            <tedi-filter text="Kõik" variant="secondary" [selected]="true" />
-            <tedi-filter text="Aktiivsed" variant="secondary" />
-            <tedi-filter text="Lõpetatud" variant="secondary" />
+            <tedi-filter text="Submitted" variant="secondary" size="large" [selected]="true">
+              <tedi-status-badge tediFilterAppend text="5" color="brand" />
+            </tedi-filter>
+            <tedi-filter text="Requires attention" variant="secondary" size="large">
+              <tedi-status-badge tediFilterAppend text="7" color="danger" />
+            </tedi-filter>
           </tedi-filter-group>
         </tedi-col>
+
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text>Append with dropdown</p>
+          <tedi-filter
+            text="Requires attention"
+            variant="secondary"
+            size="large"
+            [options]="[{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]"
+            appendTo="body"
+          >
+            <tedi-status-badge tediFilterAppend text="7" color="danger" />
+          </tedi-filter>
+        </tedi-col>
+
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text>Prepend icon with append and dropdown</p>
+          <tedi-filter
+            text="Requires attention"
+            variant="secondary"
+            size="large"
+            [options]="[{ label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }]"
+            appendTo="body"
+          >
+            <tedi-icon tediFilterPrepend name="language" [size]="18" />
+            <tedi-status-badge tediFilterAppend text="7" color="danger" />
+          </tedi-filter>
+        </tedi-col>
+
       </tedi-row>
     `,
   }),
@@ -467,58 +546,6 @@ export const CustomDropdownContent: StoryObj<FilterComponent> = {
   }),
 };
 
-export const WithReactiveForms: StoryObj<FilterComponent> = {
-  render: () => {
-    const singleControl = new FormControl<boolean>(false);
-    const multiControl = new FormControl<string[]>([]);
-    const options = [
-      { label: "Optometristi vastuvõtt", value: "1" },
-      { label: "Silmaarsti vastuvõtt", value: "2" },
-      { label: "Hambaarsti vastuvõtt", value: "3" },
-    ];
-
-    return {
-      props: { singleControl, multiControl, options },
-      template: `
-        <tedi-row cols="1" [gapY]="3">
-          <tedi-col class="flex gap-2">
-            <tedi-filter
-              text="Vastuvõtud"
-              [formControl]="singleControl"
-            />
-            <tedi-filter
-              text="Teenused"
-              [multiselect]="true"
-              [options]="options"
-              [formControl]="multiControl"
-              [searchable]="true"
-              [showSelectAll]="true"
-              [showClear]="true"
-              appendTo="body"
-            />
-          </tedi-col>
-          <tedi-col>
-            <tedi-alert type="info" [showClose]="false">
-              <pre tedi-text modifiers="small">{{ {
-  single: {
-    value: singleControl.value,
-    touched: singleControl.touched,
-    dirty: singleControl.dirty
-  },
-  multi: {
-    value: multiControl.value,
-    touched: multiControl.touched,
-    dirty: multiControl.dirty
-  }
-} | json }}</pre>
-            </tedi-alert>
-          </tedi-col>
-        </tedi-row>
-      `,
-    };
-  },
-};
-
 export const Examples: StoryObj<FilterComponent> = {
   render: () => {
     const vastuvotudControl = new FormControl<boolean>(true);
@@ -531,6 +558,10 @@ export const Examples: StoryObj<FilterComponent> = {
     ]);
     const teenusControl = new FormControl<string>("");
     const aegAlatesControl = new FormControl<string>("");
+    const typeControl = new FormControl<string | null>("all");
+    const teenusControl2 = new FormControl<string>("");
+    const categoryControl = new FormControl<string[]>(["vastuvotud", "analuusid"]);
+    const typeControl2 = new FormControl<string | null>("all");
 
     const uuringOptions = [
       { label: "Vereanalüüs", value: "1" },
@@ -566,10 +597,57 @@ export const Examples: StoryObj<FilterComponent> = {
         raviasutusControl,
         teenusControl,
         aegAlatesControl,
+        typeControl,
+        teenusControl2,
+        categoryControl,
+        typeControl2,
         uuringOptions,
         raviasutusOptions,
         teenusOptions,
         aegAlatesOptions,
+        typeOptions: [
+          { label: "Kõik", value: "all" },
+          { label: "Aktiivsed", value: "active" },
+          { label: "Lõpetatud", value: "done" },
+        ],
+        categoryOptions: [
+          { label: "Vastuvõtud", value: "vastuvotud" },
+          { label: "Analüüsid", value: "analuusid" },
+          { label: "Uuringud", value: "uuringud" },
+          { label: "Vaktsineerimised", value: "vaktsineerimised" },
+        ],
+        radioFilters: [
+          {
+            label: "Tüüp", control: typeControl, options: [
+              { label: "Kõik", value: "all" },
+              { label: "Aktiivsed", value: "active" },
+              { label: "Lõpetatud", value: "done" },
+            ]
+          },
+          { label: "Teenus", control: teenusControl, options: teenusOptions },
+          { label: "Raviasutus", control: raviasutusControl, options: raviasutusOptions },
+        ],
+        checkboxFilters: [
+          {
+            label: "Kategooria", control: categoryControl, options: [
+              { label: "Vastuvõtud", value: "vastuvotud" },
+              { label: "Analüüsid", value: "analuusid" },
+              { label: "Uuringud", value: "uuringud" },
+              { label: "Vaktsineerimised", value: "vaktsineerimised" },
+            ]
+          },
+          { label: "Teenus", control: teenusControl2, options: teenusOptions },
+        ],
+        primaryFilters: [
+          {
+            label: "Tüüp", control: typeControl2, options: [
+              { label: "Kõik", value: "all" },
+              { label: "Aktiivsed", value: "active" },
+              { label: "Lõpetatud", value: "done" },
+            ]
+          },
+          { label: "Uuring", control: uuringControl, options: uuringOptions },
+        ],
         clearAll() {
           [vastuvotudControl, analuusidControl, uuringudControl].forEach((c) => c.setValue(false));
           [uuringControl, teenusControl, aegAlatesControl].forEach((c) => c.setValue(""));
@@ -689,6 +767,214 @@ export const Examples: StoryObj<FilterComponent> = {
           <tedi-col>
             <p tedi-text color="tertiary">64 tulemust</p>
           </tedi-col>
+
+          <tedi-col><tedi-separator /></tedi-col>
+
+          <tedi-col>
+            <h1 tedi-text="h1" color="secondary">Andmed</h1>
+          </tedi-col>
+
+          <tedi-col class="flex flex-wrap gap-2 align-items-center">
+            <tedi-filter-group label="Tüüp" [formControl]="typeControl">
+              <tedi-filter text="Kõik" value="all" variant="secondary" />
+              <tedi-filter text="Aktiivsed" value="active" variant="secondary" />
+              <tedi-filter text="Lõpetatud" value="done" variant="secondary" />
+            </tedi-filter-group>
+
+            <tedi-separator axis="vertical" size="24px" />
+
+            <tedi-filter
+              text="Teenus"
+              variant="secondary"
+              [options]="teenusOptions"
+              [formControl]="teenusControl"
+              [showClear]="true"
+              appendTo="body"
+            />
+            <tedi-filter
+              text="Raviasutus"
+              variant="secondary"
+              [multiselect]="true"
+              [options]="raviasutusOptions"
+              [formControl]="raviasutusControl"
+              [searchable]="true"
+              [showSelectAll]="true"
+              [showClear]="true"
+              appendTo="body"
+            />
+          </tedi-col>
+
+          @if (getTags(radioFilters).length) {
+            <tedi-col class="flex flex-wrap gap-1">
+              @for (tag of getTags(radioFilters); track tag.text) {
+                <tedi-tag [closable]="true" (closed)="tag.remove()">{{ tag.text }}</tedi-tag>
+              }
+            </tedi-col>
+          }
+
+          <tedi-col><tedi-separator /></tedi-col>
+
+          <tedi-col>
+            <h1 tedi-text="h1" color="secondary">Menetlusdokumendid</h1>
+          </tedi-col>
+
+          <tedi-col class="flex flex-wrap gap-2 align-items-center">
+            <tedi-filter-group
+              label="Kategooria"
+              [multiselect]="true"
+              [formControl]="categoryControl"
+            >
+              <tedi-filter text="Vastuvõtud" value="vastuvotud" variant="secondary" />
+              <tedi-filter text="Analüüsid" value="analuusid" variant="secondary" />
+              <tedi-filter text="Uuringud" value="uuringud" variant="secondary" />
+              <tedi-filter text="Vaktsineerimised" value="vaktsineerimised" variant="secondary" />
+            </tedi-filter-group>
+
+            <tedi-separator axis="vertical" size="24px" />
+
+            <tedi-filter
+              text="Teenus"
+              variant="secondary"
+              [options]="teenusOptions"
+              [formControl]="teenusControl2"
+              [showClear]="true"
+              appendTo="body"
+            />
+          </tedi-col>
+
+          @if (getTags(checkboxFilters).length) {
+            <tedi-col class="flex flex-wrap gap-1">
+              @for (tag of getTags(checkboxFilters); track tag.text) {
+                <tedi-tag [closable]="true" (closed)="tag.remove()">{{ tag.text }}</tedi-tag>
+              }
+            </tedi-col>
+          }
+
+          <tedi-col><tedi-separator /></tedi-col>
+
+          <tedi-col>
+            <h1 tedi-text="h1" color="secondary">Taotlused (primary)</h1>
+          </tedi-col>
+
+          <tedi-col class="flex flex-wrap gap-2 align-items-center">
+            <tedi-filter-group label="Tüüp" [formControl]="typeControl2">
+              <tedi-filter text="Kõik" value="all" />
+              <tedi-filter text="Aktiivsed" value="active" />
+              <tedi-filter text="Lõpetatud" value="done" />
+            </tedi-filter-group>
+
+            <tedi-separator axis="vertical" size="24px" />
+
+            <tedi-filter
+              text="Uuring"
+              [options]="uuringOptions"
+              [formControl]="uuringControl"
+              [showClear]="true"
+              appendTo="body"
+            />
+          </tedi-col>
+
+          @if (getTags(primaryFilters).length) {
+            <tedi-col class="flex flex-wrap gap-1">
+              @for (tag of getTags(primaryFilters); track tag.text) {
+                <tedi-tag [closable]="true" (closed)="tag.remove()">{{ tag.text }}</tedi-tag>
+              }
+            </tedi-col>
+          }
+        </tedi-row>
+      `,
+    };
+  },
+};
+
+export const WithReactiveForms: StoryObj<FilterComponent> = {
+  render: () => {
+    const singleControl = new FormControl<boolean>(false);
+    const multiControl = new FormControl<string[]>([]);
+    const options = [
+      { label: "Optometristi vastuvõtt", value: "1" },
+      { label: "Silmaarsti vastuvõtt", value: "2" },
+      { label: "Hambaarsti vastuvõtt", value: "3" },
+    ];
+
+    const groupSingleControl = new FormControl<string | null>("all");
+    const groupMultiControl = new FormControl<string[]>(["urgent"]);
+
+    return {
+      props: {
+        singleControl,
+        multiControl,
+        options,
+        groupSingleControl,
+        groupMultiControl,
+      },
+      template: `
+        <tedi-row cols="1" [gapY]="3">
+          <tedi-col class="flex gap-2">
+            <tedi-filter
+              text="Vastuvõtud"
+              [formControl]="singleControl"
+            />
+            <tedi-filter
+              text="Teenused"
+              [multiselect]="true"
+              [options]="options"
+              [formControl]="multiControl"
+              [searchable]="true"
+              [showSelectAll]="true"
+              [showClear]="true"
+              appendTo="body"
+            />
+          </tedi-col>
+          <tedi-col>
+            <tedi-alert type="info" [showClose]="false">
+              <pre tedi-text modifiers="small">{{ {
+  single: {
+    value: singleControl.value,
+    touched: singleControl.touched,
+    dirty: singleControl.dirty
+  },
+  multi: {
+    value: multiControl.value,
+    touched: multiControl.touched,
+    dirty: multiControl.dirty
+  }
+} | json }}</pre>
+            </tedi-alert>
+          </tedi-col>
+
+          <tedi-col class="flex flex-column gap-2">
+            <p tedi-text>Grouped single-select</p>
+            <tedi-filter-group label="Status" [formControl]="groupSingleControl">
+              <tedi-filter text="Kõik" value="all" />
+              <tedi-filter text="Aktiivsed" value="active" />
+              <tedi-filter text="Lõpetatud" value="done" />
+            </tedi-filter-group>
+          </tedi-col>
+          <tedi-col class="flex flex-column gap-2">
+            <p tedi-text>Grouped multi-select</p>
+            <tedi-filter-group label="Tags" [multiselect]="true" [formControl]="groupMultiControl">
+              <tedi-filter text="Kiire" value="urgent" />
+              <tedi-filter text="Ülevaatus" value="review" />
+              <tedi-filter text="Mustand" value="draft" />
+            </tedi-filter-group>
+          </tedi-col>
+          <tedi-col>
+            <tedi-alert type="info" [showClose]="false">
+              <pre tedi-text modifiers="small">{{ {
+  groupSingle: {
+    value: groupSingleControl.value,
+    touched: groupSingleControl.touched,
+    dirty: groupSingleControl.dirty
+  },
+  groupMulti: {
+    value: groupMultiControl.value,
+    touched: groupMultiControl.touched,
+    dirty: groupMultiControl.dirty
+  }
+} | json }}</pre>
+            </tedi-alert>
+          </tedi-col>
         </tedi-row>
       `,
     };
diff --git a/tedi/components/form/filter/index.ts b/tedi/components/form/filter/index.ts
index b9fa61ddc..0fbcb4f8c 100644
--- a/tedi/components/form/filter/index.ts
+++ b/tedi/components/form/filter/index.ts
@@ -5,4 +5,5 @@ export {
   FilterOption,
 } from "./filter.component";
 export { FilterContentDirective } from "./filter-content.directive";
+export { FilterPrependDirective } from "./filter-prepend.directive";
 export { FilterGroupComponent } from "./filter-group.component";

From 6bfc42c96a996a1567ca12e975f8211038aa103f Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Thu, 7 May 2026 12:27:28 +0300
Subject: [PATCH 14/18] feat(filter): updated css variables #329

---
 .../form/filter/filter-group.component.scss   |  6 +-
 .../form/filter/filter.component.scss         | 37 ++++++------
 tedi/components/form/filter/filter.stories.ts | 59 +++++++++----------
 3 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/tedi/components/form/filter/filter-group.component.scss b/tedi/components/form/filter/filter-group.component.scss
index 885115027..55cc60b24 100644
--- a/tedi/components/form/filter/filter-group.component.scss
+++ b/tedi/components/form/filter/filter-group.component.scss
@@ -6,11 +6,11 @@
   }
 
   .tedi-filter--secondary+.tedi-filter--secondary {
-    margin-left: calc(-1 * var(--borders-01));
+    margin-left: calc(-1 * var(--tedi-borders-01));
   }
 
-  .tedi-filter--primary:not(:last-child, .tedi-filter--selected) .tedi-filter__button {
-    border-right: var(--borders-01) solid var(--filter-secondary-default-border);
+  .tedi-filter--primary:not(:last-child) .tedi-filter__button {
+    border-right: var(--tedi-borders-01) solid var(--filter-secondary-default-border);
 
     &:hover {
       border-right-color: transparent;
diff --git a/tedi/components/form/filter/filter.component.scss b/tedi/components/form/filter/filter.component.scss
index ec556e5d8..68daaa4c6 100644
--- a/tedi/components/form/filter/filter.component.scss
+++ b/tedi/components/form/filter/filter.component.scss
@@ -2,9 +2,8 @@
   --_filter-bg: transparent;
   --_filter-text: inherit;
   --_filter-border: transparent;
-  --_filter-border-width: var(--borders-01);
+  --_filter-border-width: var(--tedi-borders-01);
   --_filter-padding-x: var(--filter-default-padding-x);
-  --_filter-inner-spacing: var(--filter-default-inner-spacing);
   --_filter-radius: var(--form-checkbox-radio-card-radius);
 
   display: inline-flex;
@@ -39,19 +38,28 @@
   }
 
   &__text {
-    padding: calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--_filter-inner-spacing);
+    padding: calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);
     white-space: nowrap;
   }
 
   &__icon {
-    padding: 0 var(--_filter-inner-spacing);
+    padding: 0 var(--filter-default-inner-spacing-sm);
+  }
+
+  &__prepend {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--filter-default-inner-spacing-sm);
+
+    &:empty {
+      display: none;
+    }
   }
 
-  &__prepend,
   &__append {
     display: flex;
     align-items: center;
-    padding: 0 var(--_filter-inner-spacing);
+    padding: 0 var(--layout-grid-gutters-02);
 
     &:empty {
       display: none;
@@ -108,7 +116,6 @@
 
   &--large {
     --_filter-padding-x: var(--filter-lg-padding-x);
-    --_filter-inner-spacing: var(--filter-lg-inner-spacing);
 
     .tedi-filter__text {
       padding-top: calc(var(--filter-lg-padding-y) - var(--_filter-border-width));
@@ -161,8 +168,8 @@
     }
 
     &:focus-visible {
-      outline: var(--borders-02) solid var(--form-input-border-active);
-      outline-offset: calc(-1 * var(--borders-02));
+      outline: var(--tedi-borders-02) solid var(--form-input-border-active);
+      outline-offset: calc(-1 * var(--tedi-borders-02));
     }
 
     &--disabled {
@@ -185,12 +192,8 @@
     }
 
     &--focused {
-      outline: var(--borders-02) solid var(--form-input-border-active);
-      outline-offset: calc(-1 * var(--borders-02));
-    }
-
-    &--select-all {
-      font-weight: var(--body-semi-bold-weight);
+      outline: var(--tedi-borders-02) solid var(--form-input-border-active);
+      outline-offset: calc(-1 * var(--tedi-borders-02));
     }
   }
 
@@ -214,8 +217,8 @@
     }
 
     &:focus-visible {
-      outline: var(--borders-02) solid var(--tedi-primary-500);
-      outline-offset: calc(-1 * var(--borders-02));
+      outline: var(--tedi-borders-02) solid var(--tedi-primary-500);
+      outline-offset: calc(-1 * var(--tedi-borders-02));
     }
   }
 }
diff --git a/tedi/components/form/filter/filter.stories.ts b/tedi/components/form/filter/filter.stories.ts
index 786db2bb4..4d28d4858 100644
--- a/tedi/components/form/filter/filter.stories.ts
+++ b/tedi/components/form/filter/filter.stories.ts
@@ -910,37 +910,24 @@ export const WithReactiveForms: StoryObj<FilterComponent> = {
       },
       template: `
         <tedi-row cols="1" [gapY]="3">
-          <tedi-col class="flex gap-2">
-            <tedi-filter
-              text="Vastuvõtud"
-              [formControl]="singleControl"
-            />
-            <tedi-filter
-              text="Teenused"
-              [multiselect]="true"
-              [options]="options"
-              [formControl]="multiControl"
-              [searchable]="true"
-              [showSelectAll]="true"
-              [showClear]="true"
-              appendTo="body"
-            />
-          </tedi-col>
-          <tedi-col>
-            <tedi-alert type="info" [showClose]="false">
-              <pre tedi-text modifiers="small">{{ {
-  single: {
-    value: singleControl.value,
-    touched: singleControl.touched,
-    dirty: singleControl.dirty
-  },
-  multi: {
-    value: multiControl.value,
-    touched: multiControl.touched,
-    dirty: multiControl.dirty
-  }
-} | json }}</pre>
-            </tedi-alert>
+          <tedi-col class="flex flex-column gap-2">
+            <p tedi-text>Standalone single &amp; multi-select</p>
+            <div class="flex gap-2">
+              <tedi-filter
+                text="Vastuvõtud"
+                [formControl]="singleControl"
+              />
+              <tedi-filter
+                text="Teenused"
+                [multiselect]="true"
+                [options]="options"
+                [formControl]="multiControl"
+                [searchable]="true"
+                [showSelectAll]="true"
+                [showClear]="true"
+                appendTo="body"
+              />
+            </div>
           </tedi-col>
 
           <tedi-col class="flex flex-column gap-2">
@@ -962,6 +949,16 @@ export const WithReactiveForms: StoryObj<FilterComponent> = {
           <tedi-col>
             <tedi-alert type="info" [showClose]="false">
               <pre tedi-text modifiers="small">{{ {
+  single: {
+    value: singleControl.value,
+    touched: singleControl.touched,
+    dirty: singleControl.dirty
+  },
+  multi: {
+    value: multiControl.value,
+    touched: multiControl.touched,
+    dirty: multiControl.dirty
+  },
   groupSingle: {
     value: groupSingleControl.value,
     touched: groupSingleControl.touched,

From 918bb53e15d884c174db17bd1128ee617d3e6cf6 Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Fri, 8 May 2026 11:47:57 +0300
Subject: [PATCH 15/18] feat(filter): code review changes #329

---
 .../form/filter/filter.component.html         | 62 ++++++++++++-------
 .../form/filter/filter.component.scss         | 36 +++--------
 .../form/filter/filter.component.spec.ts      |  2 +-
 .../form/filter/filter.component.ts           | 20 +++++-
 4 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/tedi/components/form/filter/filter.component.html b/tedi/components/form/filter/filter.component.html
index 75e14f40f..e98582054 100644
--- a/tedi/components/form/filter/filter.component.html
+++ b/tedi/components/form/filter/filter.component.html
@@ -28,14 +28,18 @@
           </div>
           @if (showClear()) {
             <tedi-separator />
-            <button
-              type="button"
-              class="tedi-filter-dropdown__clear"
-              (click)="onCustomClear()"
-            >
-              <tedi-icon name="refresh" [size]="18" color="brand" />
-              <span>{{ clearLabel() }}</span>
-            </button>
+            <div class="tedi-filter-dropdown__clear">
+              <button
+                tedi-button
+                variant="neutral"
+                size="small"
+                type="button"
+                (click)="onCustomClear()"
+              >
+                <tedi-icon name="refresh" [size]="18" color="brand" />
+                <span>{{ clearLabel() }}</span>
+              </button>
+            </div>
           }
         } @else if (isSingleSelect()) {
           @if (searchable()) {
@@ -51,6 +55,7 @@
             tabindex="0"
             (focus)="onOptionsFocus()"
             (blur)="onOptionsBlur()"
+            (mousedown)="onOptionsMousedown()"
             (keydown)="onOptionsKeydown($event)"
           >
             @for (option of filteredOptions(); track option.value; let i = $index) {
@@ -77,14 +82,18 @@
 
           @if (showClear()) {
             <tedi-separator />
-            <button
-              type="button"
-              class="tedi-filter-dropdown__clear"
-              (click)="clearSingleSelection()"
-            >
-              <tedi-icon name="refresh" [size]="18" color="brand" />
-              <span>{{ clearLabel() }}</span>
-            </button>
+            <div class="tedi-filter-dropdown__clear">
+              <button
+                tedi-button
+                variant="neutral"
+                size="small"
+                type="button"
+                (click)="clearSingleSelection()"
+              >
+                <tedi-icon name="refresh" [size]="18" color="brand" />
+                <span>{{ clearLabel() }}</span>
+              </button>
+            </div>
           }
         } @else {
           @if (searchable()) {
@@ -122,6 +131,7 @@
             tabindex="0"
             (focus)="onOptionsFocus()"
             (blur)="onOptionsBlur()"
+            (mousedown)="onOptionsMousedown()"
             (keydown)="onOptionsKeydown($event)"
           >
             @for (option of filteredOptions(); track option.value; let i = $index) {
@@ -148,14 +158,18 @@
 
           @if (showClear()) {
             <tedi-separator />
-            <button
-              type="button"
-              class="tedi-filter-dropdown__clear"
-              (click)="clearSelection()"
-            >
-              <tedi-icon name="refresh" [size]="18" color="brand" />
-              <span>{{ clearLabel() }}</span>
-            </button>
+            <div class="tedi-filter-dropdown__clear">
+              <button
+                tedi-button
+                variant="neutral"
+                size="small"
+                type="button"
+                (click)="clearSelection()"
+              >
+                <tedi-icon name="refresh" [size]="18" color="brand" />
+                <span>{{ clearLabel() }}</span>
+              </button>
+            </div>
           }
         }
       </div>
diff --git a/tedi/components/form/filter/filter.component.scss b/tedi/components/form/filter/filter.component.scss
index 68daaa4c6..85cab936b 100644
--- a/tedi/components/form/filter/filter.component.scss
+++ b/tedi/components/form/filter/filter.component.scss
@@ -11,7 +11,7 @@
   &__button {
     display: inline-flex;
     align-items: center;
-    max-width: 384px;
+    max-width: var(--button-width-max);
     padding: 0 var(--_filter-padding-x);
     font-family: var(--family-default);
     font-size: var(--body-regular-size);
@@ -24,8 +24,8 @@
     border-radius: var(--_filter-radius);
 
     &:focus-visible {
-      outline: 2px solid var(--form-input-border-active);
-      outline-offset: 1px;
+      outline: var(--tedi-borders-02) solid var(--form-input-border-active);
+      outline-offset: var(--tedi-borders-01);
     }
   }
 
@@ -128,16 +128,9 @@
 .tedi-filter-dropdown {
   display: flex;
   flex-direction: column;
-  min-width: 200px;
-  max-height: 360px;
   overflow: hidden;
   background: var(--dropdown-item-default-background);
 
-  &--custom {
-    min-width: auto;
-    max-height: none;
-  }
-
   &__custom-content {
     padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
   }
@@ -148,6 +141,7 @@
 
   &__options {
     flex: 1;
+    max-height: var(--form-select-area-max-height);
     overflow-y: auto;
     outline: none;
   }
@@ -156,7 +150,7 @@
     display: flex;
     align-items: center;
     width: 100%;
-    min-height: 40px;
+    min-height: var(--form-field-height);
     padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
     color: var(--dropdown-item-default-text);
     cursor: pointer;
@@ -199,26 +193,12 @@
 
   &__clear {
     display: flex;
-    gap: var(--dropdown-item-inner-spacing);
-    align-items: center;
-    width: 100%;
-    min-height: 48px;
+    justify-content: center;
     padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
-    font-family: var(--family-default);
-    font-size: var(--body-regular-size);
-    line-height: var(--body-regular-line-height);
-    color: var(--tedi-primary-500);
-    cursor: pointer;
     background: var(--dropdown-item-default-background);
-    border: 0;
 
-    &:hover {
-      background: var(--dropdown-item-hover-background);
-    }
-
-    &:focus-visible {
-      outline: var(--tedi-borders-02) solid var(--tedi-primary-500);
-      outline-offset: calc(-1 * var(--tedi-borders-02));
+    .tedi-icon {
+      font-size: var(--button-icon-inner-size);
     }
   }
 }
diff --git a/tedi/components/form/filter/filter.component.spec.ts b/tedi/components/form/filter/filter.component.spec.ts
index f139b1d9a..24ffd3c64 100644
--- a/tedi/components/form/filter/filter.component.spec.ts
+++ b/tedi/components/form/filter/filter.component.spec.ts
@@ -592,7 +592,7 @@ describe("FilterComponent", () => {
       fixture.detectChanges();
 
       const clear = fixture.debugElement.query(
-        By.css(".tedi-filter-dropdown__clear"),
+        By.css(".tedi-filter-dropdown__clear button"),
       );
       clear.nativeElement.click();
       fixture.detectChanges();
diff --git a/tedi/components/form/filter/filter.component.ts b/tedi/components/form/filter/filter.component.ts
index 12fa1a861..43f907c3c 100644
--- a/tedi/components/form/filter/filter.component.ts
+++ b/tedi/components/form/filter/filter.component.ts
@@ -17,6 +17,7 @@ import { FilterGroupComponent } from "./filter-group.component";
 import { _IdGenerator } from "@angular/cdk/a11y";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { NgTemplateOutlet } from "@angular/common";
+import { ButtonComponent } from "../../buttons";
 import { IconComponent } from "../../base/icon/icon.component";
 import { StatusBadgeComponent } from "../../tags/status-badge/status-badge.component";
 import { SeparatorComponent } from "../../helpers/separator/separator.component";
@@ -44,6 +45,7 @@ export interface FilterOption {
   standalone: true,
   imports: [
     NgTemplateOutlet,
+    ButtonComponent,
     IconComponent,
     StatusBadgeComponent,
     SeparatorComponent,
@@ -187,6 +189,7 @@ export class FilterComponent implements ControlValueAccessor {
   );
   readonly searchTerm = signal("");
   readonly activeOptionIndex = signal<number>(-1);
+  private suppressNextOptionsFocusAutoSelect = false;
 
   readonly activeDescendantId = computed(() => {
     const idx = this.activeOptionIndex();
@@ -373,15 +376,16 @@ export class FilterComponent implements ControlValueAccessor {
   focusDropdownContent(keyboard = false, focusLast = false): void {
     setTimeout(() => {
       if (!this.dropdown()?.floatUiComponent().state) return;
+      if (!keyboard) {
+        this.suppressNextOptionsFocusAutoSelect = true;
+        this.activeOptionIndex.set(-1);
+      }
       const focusable = this.getTabStops();
       if (focusLast) {
         focusable[focusable.length - 1]?.focus();
       } else {
         focusable[0]?.focus();
       }
-      if (!keyboard) {
-        this.activeOptionIndex.set(-1);
-      }
     });
   }
 
@@ -400,6 +404,10 @@ export class FilterComponent implements ControlValueAccessor {
   }
 
   onOptionsFocus(): void {
+    if (this.suppressNextOptionsFocusAutoSelect) {
+      this.suppressNextOptionsFocusAutoSelect = false;
+      return;
+    }
     if (this.activeOptionIndex() === -1) {
       this.activeOptionIndex.set(this.findNextEnabledIndex(-1, 1));
     }
@@ -407,6 +415,12 @@ export class FilterComponent implements ControlValueAccessor {
 
   onOptionsBlur(): void {
     this.activeOptionIndex.set(-1);
+    this.suppressNextOptionsFocusAutoSelect = false;
+  }
+
+  onOptionsMousedown(): void {
+    this.suppressNextOptionsFocusAutoSelect = true;
+    this.activeOptionIndex.set(-1);
   }
 
   onOptionsKeydown(event: KeyboardEvent): void {

From 51deeca8e974242729f3f12b297989b7de39607c Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Thu, 14 May 2026 10:38:34 +0300
Subject: [PATCH 16/18] chore: updated filter story with figma link, added
 notes to contributing skill #329

---
 .../skills/contributing/references/stories.md | 27 ++++++++++++++-----
 tedi/components/form/filter/filter.stories.ts |  3 +++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/.claude/skills/contributing/references/stories.md b/.claude/skills/contributing/references/stories.md
index 189ba4fc8..abb975626 100644
--- a/.claude/skills/contributing/references/stories.md
+++ b/.claude/skills/contributing/references/stories.md
@@ -110,9 +110,8 @@ import { moduleMetadata } from '@storybook/angular';
 import { ComponentName } from './index';
 
 /**
- * <a href="https://www.figma.com/design/..." target="_BLANK">Figma ↗</a>
+ * <a href="https://www.figma.com/design/..." target="_blank">Figma ↗</a>
  */
-
 export default {
   title: 'TEDI-Ready/Components/Category/ComponentName',
   component: ComponentName,
@@ -121,15 +120,31 @@ export default {
       imports: [ComponentName, /* required dependencies */],
     }),
   ],
-  parameters: {
-    design: { type: 'figma', url: 'https://www.figma.com/...' },
-  },
   argTypes: {
     // One entry per public input
   },
 } as Meta<ComponentName>;
 ```
 
+**Figma link (required).** Place the link as a JSDoc anchor directly above `export default` — Storybook renders it at the top of the Docs page. This is the convention used by every TEDI-Ready story. Format:
+
+```typescript
+/**
+ * <a href="https://www.figma.com/design/<file-id>/<file-name>?node-id=<node>&m=dev" target="_blank">Figma ↗</a>
+ */
+```
+
+If the component also has a Zeroheight page, add it on the next line with `<br>`:
+
+```typescript
+/**
+ * <a href="https://www.figma.com/design/..." target="_blank">Figma ↗</a><br>
+ * <a href="https://www.tedi.ee/..." target="_blank">Zeroheight ↗</a>
+ */
+```
+
+Applies equally to new components and retrofits — if an existing story lacks the link, add it.
+
 ### 5. Story Checklist
 
 - [ ] Every Figma section has a corresponding story export, in the same order
@@ -138,7 +153,7 @@ export default {
 - [ ] `Default` story has all controls wired up via `args`
 - [ ] States story covers all visual states shown in Figma (default, hover, active, focus, disabled)
 - [ ] Reactive forms example included if the component implements ControlValueAccessor
-- [ ] Figma link is in the meta `parameters.design` and in the JSDoc comment above `export default`
+- [ ] Figma link is in the JSDoc comment above `export default` (format: `<a href="..." target="_blank">Figma ↗</a>`)
 
 ### 6. argTypes Convention
 
diff --git a/tedi/components/form/filter/filter.stories.ts b/tedi/components/form/filter/filter.stories.ts
index 4d28d4858..47cfc22c5 100644
--- a/tedi/components/form/filter/filter.stories.ts
+++ b/tedi/components/form/filter/filter.stories.ts
@@ -20,6 +20,9 @@ import { RadioComponent } from "../radio/radio.component";
 import { RadioGroupComponent } from "../radio-group/radio-group.component";
 import { LabelComponent } from "../label/label.component";
 
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.45.70?node-id=4612-83722&m=dev" target="_blank">Figma ↗</a>
+ */
 export default {
   title: "TEDI-Ready/Components/Form/Filter",
   component: FilterComponent,

From 03198a3287df244481d7906e52354e40c7e7efbf Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Wed, 20 May 2026 15:05:31 +0300
Subject: [PATCH 17/18] feat(filter): code review changes #329

---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 skills/tedi-angular/references/components.md  | 145 +++++++++--------
 .../filter/filter-content.directive.ts        |   0
 .../filter/filter-group.component.scss        |   4 +
 .../filter/filter-group.component.spec.ts     |   0
 .../filter/filter-group.component.ts          |   0
 .../filter/filter-prepend.directive.ts        |   0
 .../{form => }/filter/filter.component.html   |   6 +-
 .../{form => }/filter/filter.component.scss   |  41 ++++-
 .../filter/filter.component.spec.ts           |   4 +-
 .../{form => }/filter/filter.component.ts     |  45 +++---
 .../{form => }/filter/filter.stories.ts       | 146 ++++++++++--------
 tedi/components/{form => }/filter/index.ts    |   0
 tedi/components/form/index.ts                 |   1 -
 tedi/components/index.ts                      |   1 +
 .../status-indicator.stories.ts               |  80 ++++++----
 17 files changed, 295 insertions(+), 188 deletions(-)
 rename tedi/components/{form => }/filter/filter-content.directive.ts (100%)
 rename tedi/components/{form => }/filter/filter-group.component.scss (87%)
 rename tedi/components/{form => }/filter/filter-group.component.spec.ts (100%)
 rename tedi/components/{form => }/filter/filter-group.component.ts (100%)
 rename tedi/components/{form => }/filter/filter-prepend.directive.ts (100%)
 rename tedi/components/{form => }/filter/filter.component.html (98%)
 rename tedi/components/{form => }/filter/filter.component.scss (79%)
 rename tedi/components/{form => }/filter/filter.component.spec.ts (99%)
 rename tedi/components/{form => }/filter/filter.component.ts (90%)
 rename tedi/components/{form => }/filter/filter.stories.ts (87%)
 rename tedi/components/{form => }/filter/index.ts (100%)

diff --git a/package-lock.json b/package-lock.json
index 2dc33f150..8ee66dae8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "@tedi-design-system/angular",
       "version": "0.0.0-semantic-version",
       "dependencies": {
-        "@tedi-design-system/core": "^6.0.1"
+        "@tedi-design-system/core": "^6.2.1"
       },
       "devDependencies": {
         "@angular-devkit/core": "19.2.15",
@@ -10205,9 +10205,9 @@
       }
     },
     "node_modules/@tedi-design-system/core": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.0.1.tgz",
-      "integrity": "sha512-SgWbcIofn/LSzGbHYPYZD7i3PPdeL/qTaq99QT+RY6i9ISYViHQcrtNDiLZogx5KrREl/mQcrl3sLZNwmU6bDg==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.2.1.tgz",
+      "integrity": "sha512-lbkORWY9TpvY1DAx5NTH9fyENeyoW0TBpfwoFBHuWZM9Jdyb2Oy/840BRjyIvLCLKSxkod8qS7B6bNrVCxRqcA==",
       "engines": {
         "node": ">=24.0.0",
         "npm": ">=11.0.0"
diff --git a/package.json b/package.json
index 8b1585494..065dde02c 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "ngx-float-ui": "^19.0.1 || ^20.0.0 || ^21.0.0"
   },
   "dependencies": {
-    "@tedi-design-system/core": "^6.0.1"
+    "@tedi-design-system/core": "^6.2.1"
   },
   "devDependencies": {
     "@angular-devkit/core": "19.2.15",
diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 6a73dfb01..5a1ad3bf4 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -167,6 +167,88 @@ Composed of sub-components:
 </tedi-text-group>
 ```
 
+## Filter
+
+### Filter
+**Selector:** `tedi-filter`
+**Model:** `selected: boolean`, `value: string`, `values: string[]`
+**Inputs:**
+- `text: string = ""` — filter label text
+- `variant: FilterVariant = "primary"` — "primary" or "secondary"
+- `size: FilterSize = "default"` — "default" or "large"
+- `multiselect: boolean = false` — multiselect dropdown mode
+- `options: FilterOption[] = []` — dropdown options `{ label, value, disabled? }`
+- `preserveLabel: boolean = false` — when true, single-select shows "Text: SelectedLabel" instead of replacing text
+- `searchable: boolean = false` — show search field in dropdown
+- `showSelectAll: boolean = false` — show "Select all" in multiselect
+- `showClear: boolean = false` — show clear action in dropdown
+- `selectAllLabel: string = "Vali kõik"`
+- `clearLabel: string = "Tühjenda valik"`
+- `appendTo: string = ""` — append dropdown to selector (e.g., "body")
+- `disabled: boolean = false` — also set automatically by a disabled `FormControl` or a disabled parent `FilterGroup`
+**Outputs:**
+- `cleared: void` — emitted when clear button is clicked in custom content mode
+**Slots:**
+- `[tediFilterPrepend]` — content before the label (icon, status badge, indicator). Hidden when the filter is selected. In toggle mode (no dropdown), a check icon replaces it; in dropdown modes the prepend is simply removed.
+- `[tediFilterContent]` — custom dropdown content (replaces options)
+
+Implements `ControlValueAccessor`. Value type depends on mode: `boolean` (toggle), `string` (single-select), `string[]` (multiselect).
+
+```html
+<!-- Boolean toggle -->
+<tedi-filter text="Active" variant="secondary" [formControl]="activeControl" />
+
+<!-- Single-select dropdown -->
+<tedi-filter text="Service" [options]="options" [(value)]="value" [showClear]="true" appendTo="body" />
+
+<!-- Single-select with label preserved (shows "Service: Option A") -->
+<tedi-filter text="Service" [options]="options" [(value)]="value" [preserveLabel]="true" appendTo="body" />
+
+<!-- Multiselect dropdown -->
+<tedi-filter text="Hospital" [multiselect]="true" [options]="options" [(values)]="values"
+  [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
+
+<!-- With prepend content -->
+<tedi-filter text="Submitted" variant="secondary" size="large">
+  <tedi-status-badge tediFilterPrepend text="5" color="brand" />
+</tedi-filter>
+
+<!-- Custom dropdown content -->
+<tedi-filter [text]="selectedLabel" [selected]="!!selectedValue" [showClear]="true" (cleared)="clear()">
+  <div tediFilterContent>
+    <!-- custom content here -->
+  </div>
+</tedi-filter>
+
+<!-- Disabled -->
+<tedi-filter text="Service" [options]="options" [(value)]="value" [disabled]="true" />
+```
+
+### FilterGroup
+**Selector:** `tedi-filter-group`
+Wrapper that joins filters into a connected button group with collapsed borders and shared border-radius. Supports `multiselect` and a shared `formControl`/`disabled` state that propagates to children.
+
+```html
+<tedi-filter-group>
+  <tedi-filter text="All" variant="secondary" [selected]="true" />
+  <tedi-filter text="Active" variant="secondary" />
+  <tedi-filter text="Closed" variant="secondary" />
+</tedi-filter-group>
+
+<!-- Radio-like single-select via shared FormControl -->
+<tedi-filter-group label="Type" [formControl]="typeControl">
+  <tedi-filter text="All" value="all" />
+  <tedi-filter text="Active" value="active" />
+  <tedi-filter text="Closed" value="done" />
+</tedi-filter-group>
+
+<!-- Multi-select via shared FormControl -->
+<tedi-filter-group label="Tags" [multiselect]="true" [formControl]="tagsControl">
+  <tedi-filter text="Urgent" value="urgent" />
+  <tedi-filter text="Review" value="review" />
+</tedi-filter-group>
+```
+
 ## Form
 
 ### TextField
@@ -429,69 +511,6 @@ Implements `ControlValueAccessor`. Value type is `T` (single) or `T[]` (multisel
 </tedi-select>
 ```
 
-### Filter
-**Selector:** `tedi-filter`
-**Model:** `selected: boolean`, `value: string`, `values: string[]`
-**Inputs:**
-- `text: string = ""` — filter label text
-- `variant: FilterVariant = "primary"` — "primary" or "secondary"
-- `size: FilterSize = "default"` — "default" or "large"
-- `multiselect: boolean = false` — multiselect dropdown mode
-- `options: FilterOption[] = []` — dropdown options `{ label, value, disabled? }`
-- `preserveLabel: boolean = false` — when true, single-select shows "Text: SelectedLabel" instead of replacing text
-- `searchable: boolean = false` — show search field in dropdown
-- `showSelectAll: boolean = false` — show "Select all" in multiselect
-- `showClear: boolean = false` — show clear action in dropdown
-- `selectAllLabel: string = "Vali kõik"`
-- `clearLabel: string = "Tühjenda valik"`
-- `appendTo: string = ""` — append dropdown to selector (e.g., "body")
-**Outputs:**
-- `cleared: void` — emitted when clear button is clicked in custom content mode
-**Slots:**
-- `[tediFilterPrepend]` — content before the label (icon, status badge, indicator). Hidden when the filter is selected. In toggle mode (no dropdown), a check icon replaces it; in dropdown modes the prepend is simply removed.
-- `[tediFilterContent]` — custom dropdown content (replaces options)
-
-Implements `ControlValueAccessor`. Value type depends on mode: `boolean` (toggle), `string` (single-select), `string[]` (multiselect).
-
-```html
-<!-- Boolean toggle -->
-<tedi-filter text="Active" variant="secondary" [formControl]="activeControl" />
-
-<!-- Single-select dropdown -->
-<tedi-filter text="Service" [options]="options" [(value)]="value" [showClear]="true" appendTo="body" />
-
-<!-- Single-select with label preserved (shows "Service: Option A") -->
-<tedi-filter text="Service" [options]="options" [(value)]="value" [preserveLabel]="true" appendTo="body" />
-
-<!-- Multiselect dropdown -->
-<tedi-filter text="Hospital" [multiselect]="true" [options]="options" [(values)]="values"
-  [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
-
-<!-- With prepend content -->
-<tedi-filter text="Submitted" variant="secondary" size="large">
-  <tedi-status-badge tediFilterPrepend text="5" color="brand" />
-</tedi-filter>
-
-<!-- Custom dropdown content -->
-<tedi-filter [text]="selectedLabel" [selected]="!!selectedValue" [showClear]="true" (cleared)="clear()">
-  <div tediFilterContent>
-    <!-- custom content here -->
-  </div>
-</tedi-filter>
-```
-
-### FilterGroup
-**Selector:** `tedi-filter-group`
-Wrapper that joins filters into a connected button group with collapsed borders and shared border-radius.
-
-```html
-<tedi-filter-group>
-  <tedi-filter text="All" variant="secondary" [selected]="true" />
-  <tedi-filter text="Active" variant="secondary" />
-  <tedi-filter text="Closed" variant="secondary" />
-</tedi-filter-group>
-```
-
 ### FormField
 **Selector:** `tedi-form-field`
 **Inputs:**
diff --git a/tedi/components/form/filter/filter-content.directive.ts b/tedi/components/filter/filter-content.directive.ts
similarity index 100%
rename from tedi/components/form/filter/filter-content.directive.ts
rename to tedi/components/filter/filter-content.directive.ts
diff --git a/tedi/components/form/filter/filter-group.component.scss b/tedi/components/filter/filter-group.component.scss
similarity index 87%
rename from tedi/components/form/filter/filter-group.component.scss
rename to tedi/components/filter/filter-group.component.scss
index 55cc60b24..5789f843e 100644
--- a/tedi/components/form/filter/filter-group.component.scss
+++ b/tedi/components/filter/filter-group.component.scss
@@ -17,6 +17,10 @@
     }
   }
 
+  .tedi-filter--primary.tedi-filter--selected:not(:last-child) .tedi-filter__button {
+    border-right-color: var(--filter-primary-selected-border);
+  }
+
   .tedi-filter--selected,
   .tedi-filter:focus-within {
     z-index: 1;
diff --git a/tedi/components/form/filter/filter-group.component.spec.ts b/tedi/components/filter/filter-group.component.spec.ts
similarity index 100%
rename from tedi/components/form/filter/filter-group.component.spec.ts
rename to tedi/components/filter/filter-group.component.spec.ts
diff --git a/tedi/components/form/filter/filter-group.component.ts b/tedi/components/filter/filter-group.component.ts
similarity index 100%
rename from tedi/components/form/filter/filter-group.component.ts
rename to tedi/components/filter/filter-group.component.ts
diff --git a/tedi/components/form/filter/filter-prepend.directive.ts b/tedi/components/filter/filter-prepend.directive.ts
similarity index 100%
rename from tedi/components/form/filter/filter-prepend.directive.ts
rename to tedi/components/filter/filter-prepend.directive.ts
diff --git a/tedi/components/form/filter/filter.component.html b/tedi/components/filter/filter.component.html
similarity index 98%
rename from tedi/components/form/filter/filter.component.html
rename to tedi/components/filter/filter.component.html
index e98582054..561e43f6b 100644
--- a/tedi/components/form/filter/filter.component.html
+++ b/tedi/components/filter/filter.component.html
@@ -6,7 +6,7 @@
       ariaHaspopup="dialog"
       class="tedi-filter__button"
       type="button"
-      [disabled]="disabled()"
+      [disabled]="isDisabled()"
       (click)="focusDropdownContent()"
       (keydown.arrowDown)="focusDropdownContent(true)"
       (keydown.arrowUp)="focusDropdownContent(true, true)"
@@ -100,7 +100,7 @@
             <ng-container *ngTemplateOutlet="searchField" />
           }
 
-          @if (showSelectAll()) {
+          @if (showSelectAll() && filteredOptions().length > 0) {
             <div
               class="tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all"
               role="checkbox"
@@ -179,7 +179,7 @@
   <button
     class="tedi-filter__button"
     type="button"
-    [disabled]="disabled()"
+    [disabled]="isDisabled()"
     [attr.role]="isGroupedRadio() ? 'radio' : null"
     [attr.aria-checked]="isGroupedRadio() ? isSelected() : null"
     [attr.aria-pressed]="isGroupedRadio() ? null : isSelected()"
diff --git a/tedi/components/form/filter/filter.component.scss b/tedi/components/filter/filter.component.scss
similarity index 79%
rename from tedi/components/form/filter/filter.component.scss
rename to tedi/components/filter/filter.component.scss
index 85cab936b..22dbdf244 100644
--- a/tedi/components/form/filter/filter.component.scss
+++ b/tedi/components/filter/filter.component.scss
@@ -27,9 +27,13 @@
       outline: var(--tedi-borders-02) solid var(--form-input-border-active);
       outline-offset: var(--tedi-borders-01);
     }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
-  &__button:hover .tedi-icon {
+  &__button:not(:disabled):hover .tedi-icon {
     color: inherit;
   }
 
@@ -50,6 +54,7 @@
     display: flex;
     align-items: center;
     padding: 0 var(--filter-default-inner-spacing-sm);
+    color: var(--_filter-text);
 
     &:empty {
       display: none;
@@ -79,19 +84,34 @@
     --_filter-bg: var(--filter-primary-default-background);
     --_filter-text: var(--filter-primary-default-text);
 
-    .tedi-filter__button:hover {
+    .tedi-filter__button:not(:disabled):hover {
       --_filter-bg: var(--filter-primary-hover-background);
       --_filter-text: var(--filter-primary-hover-text);
     }
 
+    .tedi-filter__button:not(:disabled):active {
+      --_filter-bg: var(--filter-primary-active-background);
+      --_filter-text: var(--filter-primary-active-text);
+    }
+
     &.tedi-filter--selected {
       --_filter-bg: var(--filter-primary-selected-background);
       --_filter-text: var(--filter-primary-selected-text);
 
-      .tedi-filter__button:hover {
+      .tedi-filter__button:not(:disabled):hover {
         --_filter-bg: var(--filter-primary-hover-background);
         --_filter-text: var(--filter-primary-hover-text);
       }
+
+      .tedi-filter__button:not(:disabled):active {
+        --_filter-bg: var(--filter-primary-active-background);
+        --_filter-text: var(--filter-primary-active-text);
+      }
+    }
+
+    &.tedi-filter--disabled {
+      --_filter-bg: var(--filter-primary-disabled-background);
+      --_filter-text: var(--filter-primary-disabled-text);
     }
   }
 
@@ -100,18 +120,31 @@
     --_filter-text: var(--filter-secondary-default-text);
     --_filter-border: var(--filter-secondary-default-border);
 
-    .tedi-filter__button:hover {
+    .tedi-filter__button:not(:disabled):hover {
       --_filter-bg: var(--filter-secondary-hover-background);
       --_filter-text: var(--filter-secondary-hover-text);
       --_filter-border: var(--filter-secondary-hover-border);
     }
 
+    .tedi-filter__button:not(:disabled):active {
+      --_filter-bg: var(--filter-secondary-active-background);
+      --_filter-text: var(--filter-secondary-active-text);
+      --_filter-border: var(--filter-secondary-active-border);
+    }
+
     &.tedi-filter--selected {
       --_filter-bg: var(--filter-secondary-selected-background);
       --_filter-text: var(--filter-secondary-selected-text);
       --_filter-border: var(--filter-secondary-selected-border);
       --_filter-border-width: var(--general-selected-border-width);
     }
+
+    &.tedi-filter--disabled {
+      --_filter-bg: var(--filter-secondary-disabled-background);
+      --_filter-text: var(--filter-secondary-disabled-text);
+      --_filter-border: var(--filter-secondary-disabled-border);
+      --_filter-border-width: var(--tedi-borders-01);
+    }
   }
 
   &--large {
diff --git a/tedi/components/form/filter/filter.component.spec.ts b/tedi/components/filter/filter.component.spec.ts
similarity index 99%
rename from tedi/components/form/filter/filter.component.spec.ts
rename to tedi/components/filter/filter.component.spec.ts
index 24ffd3c64..dba99104e 100644
--- a/tedi/components/form/filter/filter.component.spec.ts
+++ b/tedi/components/filter/filter.component.spec.ts
@@ -5,8 +5,8 @@ import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import { FilterComponent, FilterOption } from "./filter.component";
 import { FilterContentDirective } from "./filter-content.directive";
 import { FilterPrependDirective } from "./filter-prepend.directive";
-import { IconComponent } from "../../base/icon/icon.component";
-import { StatusBadgeComponent } from "../../tags/status-badge/status-badge.component";
+import { IconComponent } from "../base/icon/icon.component";
+import { StatusBadgeComponent } from "../tags/status-badge/status-badge.component";
 
 @Component({
   standalone: true,
diff --git a/tedi/components/form/filter/filter.component.ts b/tedi/components/filter/filter.component.ts
similarity index 90%
rename from tedi/components/form/filter/filter.component.ts
rename to tedi/components/filter/filter.component.ts
index 43f907c3c..792eca3f7 100644
--- a/tedi/components/form/filter/filter.component.ts
+++ b/tedi/components/filter/filter.component.ts
@@ -17,17 +17,17 @@ import { FilterGroupComponent } from "./filter-group.component";
 import { _IdGenerator } from "@angular/cdk/a11y";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { NgTemplateOutlet } from "@angular/common";
-import { ButtonComponent } from "../../buttons";
-import { IconComponent } from "../../base/icon/icon.component";
-import { StatusBadgeComponent } from "../../tags/status-badge/status-badge.component";
-import { SeparatorComponent } from "../../helpers/separator/separator.component";
-import { DropdownComponent } from "../../overlay/dropdown/dropdown.component";
-import { DropdownTriggerDirective } from "../../overlay/dropdown/dropdown-trigger/dropdown-trigger.directive";
-import { DropdownContentComponent } from "../../overlay/dropdown/dropdown-content/dropdown-content.component";
-import { DropdownItemValueComponent } from "../../overlay/dropdown/dropdown-item-value/dropdown-item-value.component";
-import { DropdownItemValueLabelComponent } from "../../overlay/dropdown/dropdown-item-value/dropdown-item-value-label.component";
-import { FormFieldComponent } from "../form-field/form-field.component";
-import { TextFieldComponent } from "../text-field/text-field.component";
+import { ButtonComponent } from "../buttons";
+import { IconComponent } from "../base/icon/icon.component";
+import { StatusBadgeComponent } from "../tags/status-badge/status-badge.component";
+import { SeparatorComponent } from "../helpers/separator/separator.component";
+import { DropdownComponent } from "../overlay/dropdown/dropdown.component";
+import { DropdownTriggerDirective } from "../overlay/dropdown/dropdown-trigger/dropdown-trigger.directive";
+import { DropdownContentComponent } from "../overlay/dropdown/dropdown-content/dropdown-content.component";
+import { DropdownItemValueComponent } from "../overlay/dropdown/dropdown-item-value/dropdown-item-value.component";
+import { DropdownItemValueLabelComponent } from "../overlay/dropdown/dropdown-item-value/dropdown-item-value-label.component";
+import { FormFieldComponent } from "../form/form-field/form-field.component";
+import { TextFieldComponent } from "../form/text-field/text-field.component";
 import { FilterContentDirective } from "./filter-content.directive";
 import { FilterPrependDirective } from "./filter-prepend.directive";
 
@@ -75,7 +75,7 @@ export interface FilterOption {
     "[class.tedi-filter--secondary]": "variant() === 'secondary'",
     "[class.tedi-filter--large]": "size() === 'large'",
     "[class.tedi-filter--selected]": "isSelected()",
-    "[class.tedi-filter--disabled]": "disabled()",
+    "[class.tedi-filter--disabled]": "isDisabled()",
   },
 })
 export class FilterComponent implements ControlValueAccessor {
@@ -157,6 +157,12 @@ export class FilterComponent implements ControlValueAccessor {
    * @default ""
    */
   readonly appendTo = input("");
+  /**
+   * Whether the filter is disabled. Also set automatically when used with a disabled FormControl
+   * or when nested in a disabled FilterGroup.
+   * @default false
+   */
+  readonly disabled = input<boolean>(false);
 
   readonly dropdown = viewChild<DropdownComponent>("dropdown");
   private readonly dropdownPanel =
@@ -183,9 +189,12 @@ export class FilterComponent implements ControlValueAccessor {
   private readonly idGenerator = inject(_IdGenerator);
   private readonly baseId = this.idGenerator.getId("tedi-filter");
 
-  private readonly _disabled = signal(false);
-  readonly disabled = computed(
-    () => this._disabled() || !!this.filterGroup?.disabled(),
+  private readonly formDisabled = signal(false);
+  readonly isDisabled = computed(
+    () =>
+      this.disabled() ||
+      this.formDisabled() ||
+      !!this.filterGroup?.disabled(),
   );
   readonly searchTerm = signal("");
   readonly activeOptionIndex = signal<number>(-1);
@@ -271,8 +280,8 @@ export class FilterComponent implements ControlValueAccessor {
     return selectedCount > 0 && selectedCount < filtered.length;
   });
 
-  private onChange: (value: boolean | string | string[]) => void = () => {};
-  private onTouched: () => void = () => {};
+  private onChange: (value: boolean | string | string[]) => void = () => { };
+  private onTouched: () => void = () => { };
 
   writeValue(value: boolean | string | string[]): void {
     if (this.multiselect()) {
@@ -293,7 +302,7 @@ export class FilterComponent implements ControlValueAccessor {
   }
 
   setDisabledState(isDisabled: boolean): void {
-    this._disabled.set(isDisabled);
+    this.formDisabled.set(isDisabled);
   }
 
   toggle(): void {
diff --git a/tedi/components/form/filter/filter.stories.ts b/tedi/components/filter/filter.stories.ts
similarity index 87%
rename from tedi/components/form/filter/filter.stories.ts
rename to tedi/components/filter/filter.stories.ts
index 47cfc22c5..6ffa176a4 100644
--- a/tedi/components/form/filter/filter.stories.ts
+++ b/tedi/components/filter/filter.stories.ts
@@ -1,30 +1,28 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 import { FormControl, ReactiveFormsModule } from "@angular/forms";
-import {
-  AlertComponent,
-  ButtonComponent,
-  FilterComponent,
-  FilterContentDirective,
-  FilterPrependDirective,
-  FilterGroupComponent,
-  RowComponent,
-  ColComponent,
-  SeparatorComponent,
-  StatusBadgeComponent,
-  StatusIndicatorComponent,
-  TagComponent,
-  TextComponent,
-} from "@tedi-design-system/angular/tedi";
-import { IconComponent } from "../../base/icon/icon.component";
-import { RadioComponent } from "../radio/radio.component";
-import { RadioGroupComponent } from "../radio-group/radio-group.component";
-import { LabelComponent } from "../label/label.component";
+import { FilterComponent } from "./filter.component";
+import { FilterContentDirective } from "./filter-content.directive";
+import { FilterPrependDirective } from "./filter-prepend.directive";
+import { FilterGroupComponent } from "./filter-group.component";
+import { AlertComponent } from "../notifications/alert/alert.component";
+import { ButtonComponent } from "../buttons/button/button.component";
+import { RowComponent } from "../helpers/grid/row/row.component";
+import { ColComponent } from "../helpers/grid/col/col.component";
+import { SeparatorComponent } from "../helpers/separator/separator.component";
+import { StatusBadgeComponent } from "../tags/status-badge/status-badge.component";
+import { StatusIndicatorComponent } from "../tags/status-indicator/status-indicator.component";
+import { TagComponent } from "../tags/tag/tag.component";
+import { TextComponent } from "../base/text/text.component";
+import { IconComponent } from "../base/icon/icon.component";
+import { RadioComponent } from "../form/radio/radio.component";
+import { RadioGroupComponent } from "../form/radio-group/radio-group.component";
+import { LabelComponent } from "../form/label/label.component";
 
 /**
  * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.45.70?node-id=4612-83722&m=dev" target="_blank">Figma ↗</a>
  */
 export default {
-  title: "TEDI-Ready/Components/Form/Filter",
+  title: "TEDI-Ready/Components/Filter",
   component: FilterComponent,
   decorators: [
     moduleMetadata({
@@ -172,6 +170,16 @@ export default {
         defaultValue: { summary: "''" },
       },
     },
+    disabled: {
+      description:
+        "Whether the filter is disabled. Also set by a disabled FormControl or a disabled FilterGroup",
+      control: { type: "boolean" },
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
   },
 } as Meta<FilterComponent>;
 
@@ -225,9 +233,10 @@ export const SingleValueFilter: StoryObj<FilterComponent> = {
       ],
     },
     template: `
+      <div style="background: var(--general-surface-primary); padding: 24px;">
       <tedi-row cols="1" [gapY]="3">
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Separate</p>
+          <p tedi-text modifiers="bold">Separate</p>
           <div class="flex flex-wrap gap-2">
             <tedi-filter text="Vastuvõtud" [selected]="true" />
             <tedi-filter text="Analüüsid" [selected]="true" />
@@ -257,7 +266,7 @@ export const SingleValueFilter: StoryObj<FilterComponent> = {
         </tedi-col>
 
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Grouped</p>
+          <p tedi-text modifiers="bold">Grouped</p>
           <div class="flex flex-wrap gap-2">
             <tedi-filter-group>
               <tedi-filter text="Kooskõlastatud" />
@@ -289,7 +298,7 @@ export const SingleValueFilter: StoryObj<FilterComponent> = {
         </tedi-col>
 
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Dropdown label + value</p>
+          <p tedi-text modifiers="bold">Dropdown label + value</p>
           <div class="flex flex-wrap gap-2">
             <tedi-filter text="Teenus" [options]="teenusOptions" [preserveLabel]="true" [showClear]="true" appendTo="body" />
           </div>
@@ -299,7 +308,7 @@ export const SingleValueFilter: StoryObj<FilterComponent> = {
         </tedi-col>
 
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Dropdown value</p>
+          <p tedi-text modifiers="bold">Dropdown value</p>
           <div class="flex flex-wrap gap-2">
             <tedi-filter text="Raviasutus" [options]="raviasutusOptions" appendTo="body" />
             <tedi-filter text="Teenus" [options]="teenusOptions" appendTo="body" />
@@ -310,6 +319,7 @@ export const SingleValueFilter: StoryObj<FilterComponent> = {
           </div>
         </tedi-col>
       </tedi-row>
+      </div>
     `,
   }),
 };
@@ -332,6 +342,7 @@ export const MultiValueFilter: StoryObj<FilterComponent> = {
       values2: [] as string[],
     },
     template: `
+      <div style="background: var(--general-surface-primary); padding: 24px;">
       <tedi-row cols="1" [gapY]="3">
         <tedi-col class="flex flex-wrap gap-2">
           <tedi-filter text="Raviasutus" [multiselect]="true" [options]="options" [(values)]="values1" [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
@@ -340,6 +351,7 @@ export const MultiValueFilter: StoryObj<FilterComponent> = {
           <tedi-filter text="Raviasutus" variant="secondary" [multiselect]="true" [options]="options" [(values)]="values2" [searchable]="true" [showSelectAll]="true" [showClear]="true" appendTo="body" />
         </tedi-col>
       </tedi-row>
+      </div>
     `,
   }),
 };
@@ -347,9 +359,10 @@ export const MultiValueFilter: StoryObj<FilterComponent> = {
 export const CustomizeContent: StoryObj<FilterComponent> = {
   render: () => ({
     template: `
+      <div style="background: var(--general-surface-primary); padding: 24px;">
       <tedi-row cols="1" [gapY]="3">
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Prepend hidden when selected (default)</p>
+          <p tedi-text modifiers="bold">Prepend hidden when selected (default)</p>
           <tedi-filter-group>
             <tedi-filter text="Unread (3)" variant="secondary" size="large">
               <tedi-status-indicator tediFilterPrepend type="danger" />
@@ -381,7 +394,7 @@ export const CustomizeContent: StoryObj<FilterComponent> = {
         </tedi-col>
 
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Prepend visible when selected</p>
+          <p tedi-text modifiers="bold">Prepend visible when selected</p>
           <tedi-filter-group>
             <tedi-filter text="Submitted" variant="secondary" size="large">
               <tedi-status-badge tediFilterPrepend [hideWhenSelected]="false" text="5" color="brand" />
@@ -401,7 +414,7 @@ export const CustomizeContent: StoryObj<FilterComponent> = {
         </tedi-col>
 
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Append</p>
+          <p tedi-text modifiers="bold">Append</p>
           <tedi-filter-group>
             <tedi-filter text="Submitted" variant="secondary" size="large">
               <tedi-status-badge tediFilterAppend text="5" color="brand" />
@@ -421,7 +434,7 @@ export const CustomizeContent: StoryObj<FilterComponent> = {
         </tedi-col>
 
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Append with dropdown</p>
+          <p tedi-text modifiers="bold">Append with dropdown</p>
           <tedi-filter
             text="Requires attention"
             variant="secondary"
@@ -434,7 +447,7 @@ export const CustomizeContent: StoryObj<FilterComponent> = {
         </tedi-col>
 
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Prepend icon with append and dropdown</p>
+          <p tedi-text modifiers="bold">Prepend icon with append and dropdown</p>
           <tedi-filter
             text="Requires attention"
             variant="secondary"
@@ -448,6 +461,7 @@ export const CustomizeContent: StoryObj<FilterComponent> = {
         </tedi-col>
 
       </tedi-row>
+      </div>
     `,
   }),
 };
@@ -462,7 +476,7 @@ export const States: StoryObj<FilterComponent> = {
   },
   render: () => ({
     props: {
-      STATES: ["Default", "Hover", "Active", "Focus", "Selected"],
+      STATES: ["Default", "Hover", "Active", "Focus", "Selected", "Disabled"],
       options: [
         { label: "Optometristi vastuvõtt", value: "1" },
         { label: "Silmaarsti vastuvõtt", value: "2" },
@@ -470,33 +484,35 @@ export const States: StoryObj<FilterComponent> = {
       ],
     },
     template: `
-      <tedi-row [cols]="6" [gapY]="3" alignItems="center">
-        <tedi-col><p tedi-text modifiers="bold">State</p></tedi-col>
-        <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
-        <tedi-col><p tedi-text modifiers="bold">Primary multiselect</p></tedi-col>
-        <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
-        <tedi-col><p tedi-text modifiers="bold">Secondary multiselect</p></tedi-col>
-        <tedi-col><p tedi-text modifiers="bold">Large</p></tedi-col>
-
-        @for (state of STATES; track state) {
-          <tedi-col><p tedi-text>{{ state }}</p></tedi-col>
-          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
-            <tedi-filter text="Filter" [selected]="state === 'Selected'" />
-          </tedi-col>
-          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
-            <tedi-filter text="Filter" [multiselect]="true" [options]="options" [values]="state === 'Selected' ? ['1', '2'] : []" appendTo="body" />
-          </tedi-col>
-          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
-            <tedi-filter text="Filter" variant="secondary" [selected]="state === 'Selected'" />
-          </tedi-col>
-          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
-            <tedi-filter text="Filter" variant="secondary" [multiselect]="true" [options]="options" [values]="state === 'Selected' ? ['1', '2'] : []" appendTo="body" />
-          </tedi-col>
-          <tedi-col [class]="'pseudo-' + state.toLowerCase()">
-            <tedi-filter text="Filter" size="large" [selected]="state === 'Selected'" />
-          </tedi-col>
-        }
-      </tedi-row>
+      <div style="overflow-x: auto; background: var(--general-surface-primary); padding: 24px;">
+        <tedi-row [cols]="6" [gapY]="3" alignItems="center" style="min-width: 800px;">
+          <tedi-col><p tedi-text modifiers="bold">State</p></tedi-col>
+          <tedi-col><p tedi-text modifiers="bold">Primary</p></tedi-col>
+          <tedi-col><p tedi-text modifiers="bold">Primary multiselect</p></tedi-col>
+          <tedi-col><p tedi-text modifiers="bold">Secondary</p></tedi-col>
+          <tedi-col><p tedi-text modifiers="bold">Secondary multiselect</p></tedi-col>
+          <tedi-col><p tedi-text modifiers="bold">Large</p></tedi-col>
+
+          @for (state of STATES; track state) {
+            <tedi-col><p tedi-text>{{ state }}</p></tedi-col>
+            <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+              <tedi-filter text="Filter" [selected]="state === 'Selected'" [disabled]="state === 'Disabled'" />
+            </tedi-col>
+            <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+              <tedi-filter text="Filter" [multiselect]="true" [options]="options" [values]="state === 'Selected' ? ['1', '2'] : []" [disabled]="state === 'Disabled'" appendTo="body" />
+            </tedi-col>
+            <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+              <tedi-filter text="Filter" variant="secondary" [selected]="state === 'Selected'" [disabled]="state === 'Disabled'" />
+            </tedi-col>
+            <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+              <tedi-filter text="Filter" variant="secondary" [multiselect]="true" [options]="options" [values]="state === 'Selected' ? ['1', '2'] : []" [disabled]="state === 'Disabled'" appendTo="body" />
+            </tedi-col>
+            <tedi-col [class]="'pseudo-' + state.toLowerCase()">
+              <tedi-filter text="Filter" size="large" [selected]="state === 'Selected'" [disabled]="state === 'Disabled'" />
+            </tedi-col>
+          }
+        </tedi-row>
+      </div>
     `,
   }),
 };
@@ -516,6 +532,7 @@ export const CustomDropdownContent: StoryObj<FilterComponent> = {
       },
     },
     template: `
+      <div style="background: var(--general-surface-primary); padding: 24px;">
       <tedi-row cols="1" [gapY]="3">
         <tedi-col class="flex gap-2">
           <tedi-filter
@@ -545,6 +562,7 @@ export const CustomDropdownContent: StoryObj<FilterComponent> = {
           </tedi-filter>
         </tedi-col>
       </tedi-row>
+      </div>
     `,
   }),
 };
@@ -691,6 +709,7 @@ export const Examples: StoryObj<FilterComponent> = {
         },
       },
       template: `
+        <div style="background: var(--general-surface-primary); padding: 24px;">
         <tedi-row cols="1" [gapY]="3">
           <tedi-col>
             <h1 tedi-text="h1" color="secondary">Taotlused</h1>
@@ -856,7 +875,7 @@ export const Examples: StoryObj<FilterComponent> = {
           <tedi-col><tedi-separator /></tedi-col>
 
           <tedi-col>
-            <h1 tedi-text="h1" color="secondary">Taotlused (primary)</h1>
+            <h1 tedi-text="h1" color="secondary">Taotlused</h1>
           </tedi-col>
 
           <tedi-col class="flex flex-wrap gap-2 align-items-center">
@@ -885,6 +904,7 @@ export const Examples: StoryObj<FilterComponent> = {
             </tedi-col>
           }
         </tedi-row>
+        </div>
       `,
     };
   },
@@ -912,9 +932,10 @@ export const WithReactiveForms: StoryObj<FilterComponent> = {
         groupMultiControl,
       },
       template: `
+        <div style="background: var(--general-surface-primary); padding: 24px;">
         <tedi-row cols="1" [gapY]="3">
           <tedi-col class="flex flex-column gap-2">
-            <p tedi-text>Standalone single &amp; multi-select</p>
+            <p tedi-text modifiers="bold">Standalone single &amp; multi-select</p>
             <div class="flex gap-2">
               <tedi-filter
                 text="Vastuvõtud"
@@ -934,7 +955,7 @@ export const WithReactiveForms: StoryObj<FilterComponent> = {
           </tedi-col>
 
           <tedi-col class="flex flex-column gap-2">
-            <p tedi-text>Grouped single-select</p>
+            <p tedi-text modifiers="bold">Grouped single-select</p>
             <tedi-filter-group label="Status" [formControl]="groupSingleControl">
               <tedi-filter text="Kõik" value="all" />
               <tedi-filter text="Aktiivsed" value="active" />
@@ -942,7 +963,7 @@ export const WithReactiveForms: StoryObj<FilterComponent> = {
             </tedi-filter-group>
           </tedi-col>
           <tedi-col class="flex flex-column gap-2">
-            <p tedi-text>Grouped multi-select</p>
+            <p tedi-text modifiers="bold">Grouped multi-select</p>
             <tedi-filter-group label="Tags" [multiselect]="true" [formControl]="groupMultiControl">
               <tedi-filter text="Kiire" value="urgent" />
               <tedi-filter text="Ülevaatus" value="review" />
@@ -951,7 +972,7 @@ export const WithReactiveForms: StoryObj<FilterComponent> = {
           </tedi-col>
           <tedi-col>
             <tedi-alert type="info" [showClose]="false">
-              <pre tedi-text modifiers="small">{{ {
+              <pre tedi-text modifiers="small" style="min-height: 600px;">{{ {
   single: {
     value: singleControl.value,
     touched: singleControl.touched,
@@ -976,6 +997,7 @@ export const WithReactiveForms: StoryObj<FilterComponent> = {
             </tedi-alert>
           </tedi-col>
         </tedi-row>
+        </div>
       `,
     };
   },
diff --git a/tedi/components/form/filter/index.ts b/tedi/components/filter/index.ts
similarity index 100%
rename from tedi/components/form/filter/index.ts
rename to tedi/components/filter/index.ts
diff --git a/tedi/components/form/index.ts b/tedi/components/form/index.ts
index 6ab0fe5e9..63222aba6 100644
--- a/tedi/components/form/index.ts
+++ b/tedi/components/form/index.ts
@@ -15,4 +15,3 @@ export * from "./toggle/toggle.component";
 export * from "./date-picker/date-picker.component";
 export * from "./form-field/form-field.component";
 export * from "./text-field/text-field.component";
-export * from "./filter";
diff --git a/tedi/components/index.ts b/tedi/components/index.ts
index 023e4e11a..3076633e2 100644
--- a/tedi/components/index.ts
+++ b/tedi/components/index.ts
@@ -1,6 +1,7 @@
 export * from "./base";
 export * from "./buttons";
 export * from "./content";
+export * from "./filter";
 export * from "./form";
 export * from "./helpers";
 export * from "./layout";
diff --git a/tedi/components/tags/status-indicator/status-indicator.stories.ts b/tedi/components/tags/status-indicator/status-indicator.stories.ts
index 83534a64b..8d12647cc 100644
--- a/tedi/components/tags/status-indicator/status-indicator.stories.ts
+++ b/tedi/components/tags/status-indicator/status-indicator.stories.ts
@@ -52,6 +52,16 @@ export default {
         defaultValue: { summary: "false" },
       },
     },
+    label: {
+      description:
+        "Accessible label. When provided, the indicator is exposed to assistive technology with role=\"img\"; otherwise it is treated as decorative.",
+      control: { type: "text" },
+      table: {
+        category: "inputs",
+        type: { summary: "string | undefined" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
     position: {
       description: "Controls positioning of the indicator",
       control: { type: "radio" },
@@ -71,44 +81,54 @@ export const Default: StoryObj<StatusIndicatorComponent> = {
     size: "sm",
     hasBorder: false,
   },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="background: var(--general-surface-tertiary); padding: 16px; display: inline-block;">
+        <tedi-status-indicator [type]="type" [size]="size" [hasBorder]="hasBorder" [position]="position" [label]="label" />
+      </div>
+    `,
+  }),
 };
 
 export const AllVariants: StoryObj<StatusIndicatorComponent> = {
   render: () => ({
     template: `
-      <tedi-row [cols]="2" [gapY]="3" alignItems="center">
-        <tedi-col><p tedi-text modifiers="bold">Small</p></tedi-col>
-        <tedi-col class="flex gap-3 align-items-center">
-          <tedi-status-indicator type="success" />
-          <tedi-status-indicator type="danger" />
-          <tedi-status-indicator type="warning" />
-          <tedi-status-indicator type="inactive" />
-        </tedi-col>
+      <div style="background: var(--general-surface-tertiary); padding: 16px;">
+        <tedi-row [cols]="2" [gapY]="3" alignItems="center">
+          <tedi-col><p tedi-text modifiers="bold">Small</p></tedi-col>
+          <tedi-col class="flex gap-3 align-items-center">
+            <tedi-status-indicator type="success" />
+            <tedi-status-indicator type="danger" />
+            <tedi-status-indicator type="warning" />
+            <tedi-status-indicator type="inactive" />
+          </tedi-col>
 
-        <tedi-col><p tedi-text modifiers="bold">Large</p></tedi-col>
-        <tedi-col class="flex gap-3 align-items-center">
-          <tedi-status-indicator type="success" size="lg" />
-          <tedi-status-indicator type="danger" size="lg" />
-          <tedi-status-indicator type="warning" size="lg" />
-          <tedi-status-indicator type="inactive" size="lg" />
-        </tedi-col>
+          <tedi-col><p tedi-text modifiers="bold">Large</p></tedi-col>
+          <tedi-col class="flex gap-3 align-items-center">
+            <tedi-status-indicator type="success" size="lg" />
+            <tedi-status-indicator type="danger" size="lg" />
+            <tedi-status-indicator type="warning" size="lg" />
+            <tedi-status-indicator type="inactive" size="lg" />
+          </tedi-col>
 
-        <tedi-col><p tedi-text modifiers="bold">Small bordered</p></tedi-col>
-        <tedi-col class="flex gap-3 align-items-center">
-          <tedi-status-indicator type="success" [hasBorder]="true" />
-          <tedi-status-indicator type="danger" [hasBorder]="true" />
-          <tedi-status-indicator type="warning" [hasBorder]="true" />
-          <tedi-status-indicator type="inactive" [hasBorder]="true" />
-        </tedi-col>
+          <tedi-col><p tedi-text modifiers="bold">Small bordered</p></tedi-col>
+          <tedi-col class="flex gap-3 align-items-center">
+            <tedi-status-indicator type="success" [hasBorder]="true" />
+            <tedi-status-indicator type="danger" [hasBorder]="true" />
+            <tedi-status-indicator type="warning" [hasBorder]="true" />
+            <tedi-status-indicator type="inactive" [hasBorder]="true" />
+          </tedi-col>
 
-        <tedi-col><p tedi-text modifiers="bold">Large bordered</p></tedi-col>
-        <tedi-col class="flex gap-3 align-items-center">
-          <tedi-status-indicator type="success" size="lg" [hasBorder]="true" />
-          <tedi-status-indicator type="danger" size="lg" [hasBorder]="true" />
-          <tedi-status-indicator type="warning" size="lg" [hasBorder]="true" />
-          <tedi-status-indicator type="inactive" size="lg" [hasBorder]="true" />
-        </tedi-col>
-      </tedi-row>
+          <tedi-col><p tedi-text modifiers="bold">Large bordered</p></tedi-col>
+          <tedi-col class="flex gap-3 align-items-center">
+            <tedi-status-indicator type="success" size="lg" [hasBorder]="true" />
+            <tedi-status-indicator type="danger" size="lg" [hasBorder]="true" />
+            <tedi-status-indicator type="warning" size="lg" [hasBorder]="true" />
+            <tedi-status-indicator type="inactive" size="lg" [hasBorder]="true" />
+          </tedi-col>
+        </tedi-row>
+      </div>
     `,
   }),
 };

From 9f1d6f5598a63f0fe5a178640053989353cb7bd5 Mon Sep 17 00:00:00 2001
From: m2rt <mart.sessman@bitweb.ee>
Date: Wed, 20 May 2026 15:13:36 +0300
Subject: [PATCH 18/18] feat(filter): code review changes #329

---
 tedi/components/filter/filter.stories.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tedi/components/filter/filter.stories.ts b/tedi/components/filter/filter.stories.ts
index 6ffa176a4..da936c0b7 100644
--- a/tedi/components/filter/filter.stories.ts
+++ b/tedi/components/filter/filter.stories.ts
@@ -192,6 +192,7 @@ export const Default: StoryObj<FilterComponent> = {
 export const Size: StoryObj<FilterComponent> = {
   render: () => ({
     template: `
+      <div style="background: var(--general-surface-primary); padding: 24px;">
       <tedi-row [cols]="2" [gapY]="3" alignItems="center">
         <tedi-col><p tedi-text modifiers="bold">Default</p></tedi-col>
         <tedi-col class="flex flex-wrap gap-2">
@@ -208,6 +209,7 @@ export const Size: StoryObj<FilterComponent> = {
           <tedi-filter text="Text" size="large" />
         </tedi-col>
       </tedi-row>
+      </div>
     `,
   }),
 };