From c24d1b7942d0992cbaf5855a45ff02500661498b Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Fri, 23 Oct 2026 17:06:16 +0300
Subject: [PATCH 1/6] feat(checkbox,radio): apply new variables to Checkbox and
 Radio #784

Bump @tedi-design-system/core to 6.12.0 and move Checkbox, Radio and their
card variants to the new --form-choice-* tokens, matching the Figma states
for default, hover, active, focus, disabled and error.

- Add `bordered` to RadioCard and RadioCardGroup for bordered primary cards
- Indent card descriptions past the icon so they line up with the label text
- Rename tokens removed in core 6.12.0 in other components (Button, Toggle,
  Accordion, Calendar, DatePicker, Pagination, Dropdown, ChoiceGroup,
  VerticalStepper, TextEditor)
---
 package-lock.json                             |    9 +-
 package.json                                  |    2 +-
 .../checkbox/checkbox/checkbox.component.scss |   24 +-
 .../choicegroup/_choicegroup-card-mixins.scss |   43 +-
 .../form/choicegroup/choicegroup.styles.scss  |   14 +-
 .../form/radio/radio/radio.component.scss     |   20 +-
 .../vertical-stepper-item.component.scss      |    4 +-
 .../text-editor/text-editor.component.scss    |    2 +-
 .../buttons/button/button.component.scss      |   24 +-
 .../accordion-item-header.component.scss      |    2 +-
 .../content/accordion/accordion.stories.ts    |    2 +-
 .../calendar-month-grid.component.scss        |   36 +-
 .../calendar-year-grid.component.scss         |   36 +-
 .../checkbox-card.component.scss              |  216 +++-
 .../checkbox-card/checkbox-card.component.ts  |    4 +-
 .../checkbox-group.component.spec.ts          |   52 +
 .../form/checkbox/checkbox.component.scss     |  105 +-
 .../form/checkbox/checkbox.component.ts       |    4 +-
 .../form/checkbox/checkbox.stories.ts         |  900 ++++++++------
 .../date-picker/date-picker.component.scss    |   34 +-
 .../radio-card-group.component.ts             |    8 +
 .../form/radio-card/radio-card.component.scss |  308 +++--
 .../radio-card/radio-card.component.spec.ts   |   47 +
 .../form/radio-card/radio-card.component.ts   |   19 +-
 .../radio-group/radio-group.component.spec.ts |   58 +
 .../form/radio/radio.component.scss           |   95 +-
 .../components/form/radio/radio.component.ts  |    4 +-
 .../components/form/radio/radio.stories.ts    | 1105 ++++++++++-------
 .../form/toggle/toggle.component.scss         |   72 +-
 ...ination-option-picker-modal.component.scss |    5 +-
 .../dropdown-item-value.component.scss        |   26 +-
 31 files changed, 2033 insertions(+), 1247 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 10c87aa61..e01011da6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@tanstack/angular-table": "^8.21.4",
-        "@tedi-design-system/core": "6.11.2"
+        "@tedi-design-system/core": "6.12.0"
       },
       "devDependencies": {
         "@angular-devkit/build-angular": "20.3.27",
@@ -12914,9 +12914,10 @@
       }
     },
     "node_modules/@tedi-design-system/core": {
-      "version": "6.11.2",
-      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.11.2.tgz",
-      "integrity": "sha512-iYKcXyJV1KJCpcjwxN4bQVTi9jnIkvp/5bUtR8jRes2BMvTpx7PKuoFnOnjiBZmRpm2hhgiqzhP/SpvwJCRR9A==",
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.12.0.tgz",
+      "integrity": "sha512-TOiT+zll/sQUz89xhSglBrPrfs62PU5/1c8Sh+aWxzHsu8yhqDNbBE3UaKCoPjNN8OkaY/zxETQbYAvHb1cFuw==",
+      "license": "MIT",
       "engines": {
         "node": ">=24.0.0",
         "npm": ">=11.0.0"
diff --git a/package.json b/package.json
index f1b614331..7c24a02f0 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@tanstack/angular-table": "^8.21.4",
-    "@tedi-design-system/core": "6.11.2"
+    "@tedi-design-system/core": "6.12.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "20.3.27",
diff --git a/src/community/components/form/checkbox/checkbox/checkbox.component.scss b/src/community/components/form/checkbox/checkbox/checkbox.component.scss
index cc214cdf6..188af0090 100644
--- a/src/community/components/form/checkbox/checkbox/checkbox.component.scss
+++ b/src/community/components/form/checkbox/checkbox/checkbox.component.scss
@@ -1,6 +1,6 @@
 .tedi-checkbox {
-  --_checkbox-bg: var(--form-checkbox-radio-default-background-default);
-  --_checkbox-border: var(--form-checkbox-radio-default-border-default);
+  --_checkbox-bg: var(--form-choice-checkbox-unselected-default);
+  --_checkbox-border: var(--form-choice-checkbox-unselected-border-default);
   --_checkbox-label-color: var(--general-text-primary);
   --_checkbox-check-color: var(--_checkbox-border);
   --_checkbox-inner-spacing: var(--form-checkbox-radio-inner-spacing);
@@ -55,20 +55,20 @@
   }
 
   &:has(input:checked, input:indeterminate) {
-    --_checkbox-bg: var(--form-checkbox-radio-default-background-selected);
-    --_checkbox-border: var(--form-checkbox-radio-default-border-selected);
+    --_checkbox-bg: var(--form-choice-checkbox-selected-default);
+    --_checkbox-border: var(--form-choice-checkbox-selected-border-default);
   }
 
   &:has(input:hover, input:focus-visible) {
     .tedi-checkbox__indicator {
       outline: 1px solid var(--_checkbox-border);
     }
-    --_checkbox-border: var(--form-checkbox-radio-default-border-hover);
+    --_checkbox-border: var(--form-choice-checkbox-unselected-border-hover);
   }
 
   &:has(input:active) {
-    --_checkbox-border: var(--form-checkbox-radio-default-border-active);
-    --_checkbox-bg: var(--form-checkbox-radio-default-background-active);
+    --_checkbox-border: var(--form-choice-checkbox-unselected-border-active);
+    --_checkbox-bg: var(--form-choice-checkbox-selected-active);
   }
 
   &:has(input:disabled) {
@@ -79,16 +79,12 @@
   }
 
   &:has(input:disabled:checked) {
-    --_checkbox-bg: var(
-      --form-checkbox-radio-default-background-selected-disabled
-    );
-    --_checkbox-border: var(
-      --form-checkbox-radio-default-border-selected-disabled
-    );
+    --_checkbox-bg: var(--form-choice-checkbox-selected-disabled);
+    --_checkbox-border: var(--form-choice-checkbox-selected-border-disabled);
   }
 
   &--error {
-    --_checkbox-bg: var(--form-checkbox-radio-default-background-error);
+    --_checkbox-bg: var(--form-choice-checkbox-unselected-default);
     --_checkbox-border: var(--form-general-feedback-error-border);
   }
 
diff --git a/src/community/components/form/choicegroup/_choicegroup-card-mixins.scss b/src/community/components/form/choicegroup/_choicegroup-card-mixins.scss
index 10369a9fa..47b148d05 100644
--- a/src/community/components/form/choicegroup/_choicegroup-card-mixins.scss
+++ b/src/community/components/form/choicegroup/_choicegroup-card-mixins.scss
@@ -21,74 +21,85 @@
 @mixin color-variables($variant) {
   :is(.tedi-radio, .tedi-checkbox) {
     --_choicegroup-card-bg: var(
-      --form-checkbox-radio-card-#{$variant}-default-background
+      --form-choice-card-#{$variant}-unselected-background-default
     );
     --_radio-label-color: var(
-      --form-checkbox-radio-card-#{$variant}-default-text
+      --form-choice-card-#{$variant}-unselected-text-default
     );
     --_checkbox-label-color: var(
-      --form-checkbox-radio-card-#{$variant}-default-text
+      --form-choice-card-#{$variant}-unselected-text-default
     );
 
     &:has(input:checked) {
       --_choicegroup-card-bg: var(
-        --form-checkbox-radio-card-#{$variant}-selected-background
+        --form-choice-card-#{$variant}-selected-background-default
       );
       --_radio-label-color: var(
-        --form-checkbox-radio-card-#{$variant}-selected-text
+        --form-choice-card-#{$variant}-selected-text-default
       );
       --_checkbox-label-color: var(
-        --form-checkbox-radio-card-#{$variant}-selected-text
+        --form-choice-card-#{$variant}-selected-text-default
       );
     }
 
     &:has(input:hover) {
       --_choicegroup-card-bg: var(
-        --form-checkbox-radio-card-#{$variant}-hover-background
+        --form-choice-card-#{$variant}-unselected-background-hover
       );
       --_radio-label-color: var(
-        --form-checkbox-radio-card-#{$variant}-hover-text
+        --form-choice-card-#{$variant}-unselected-text-hover
       );
       --_checkbox-label-color: var(
-        --form-checkbox-radio-card-#{$variant}-hover-text
+        --form-choice-card-#{$variant}-unselected-text-hover
       );
     }
 
     &:has(input:disabled) {
       --_choicegroup-card-bg: var(
-        --form-checkbox-radio-card-#{$variant}-disabled-background
+        --form-choice-card-#{$variant}-unselected-background-disabled
       );
       --_radio-label-color: var(
-        --form-checkbox-radio-card-#{$variant}-disabled-text
+        --form-choice-card-#{$variant}-unselected-text-disabled
       );
       --_checkbox-label-color: var(
-        --form-checkbox-radio-card-#{$variant}-disabled-text
+        --form-choice-card-#{$variant}-unselected-text-disabled
       );
     }
   }
 }
 
 @mixin border-colors($variant, $border-type) {
+  $unselected-border: if(
+    $border-type == "border-separate",
+    "border-borderless",
+    "border-default"
+  );
+  $selected-border: if(
+    $border-type == "border-separate",
+    "background-default",
+    "border-default"
+  );
+
   :is(.tedi-radio, .tedi-checkbox) {
     --_choicegroup-card-border: var(
-      --form-checkbox-radio-card-#{$variant}-default-#{$border-type}
+      --form-choice-card-#{$variant}-unselected-#{$unselected-border}
     );
 
     &:has(input:checked) {
       --_choicegroup-card-border: var(
-        --form-checkbox-radio-card-#{$variant}-selected-#{$border-type}
+        --form-choice-card-#{$variant}-selected-#{$selected-border}
       );
     }
 
     &:has(input:hover) {
       --_choicegroup-card-border: var(
-        --form-checkbox-radio-card-#{$variant}-hover-border
+        --form-choice-card-#{$variant}-unselected-border-hover
       );
     }
 
     &:has(input:disabled) {
       --_choicegroup-card-border: var(
-        --form-checkbox-radio-card-#{$variant}-disabled-#{$border-type}
+        --form-choice-card-#{$variant}-unselected-border-disabled
       );
     }
   }
diff --git a/src/community/components/form/choicegroup/choicegroup.styles.scss b/src/community/components/form/choicegroup/choicegroup.styles.scss
index 66cb24c4b..7b0b3d83a 100644
--- a/src/community/components/form/choicegroup/choicegroup.styles.scss
+++ b/src/community/components/form/choicegroup/choicegroup.styles.scss
@@ -3,7 +3,7 @@
 
 @mixin choicegroup-card-error-variables {
   :is(.tedi-radio--error, .tedi-checkbox--error) {
-    --_choicegroup-card-bg: var(--form-checkbox-radio-default-background-error);
+    --_choicegroup-card-bg: var(--form-general-background-default);
     --_choicegroup-card-border: var(--form-general-feedback-error-border);
   }
 }
@@ -35,18 +35,12 @@
     :is(.tedi-radio, .tedi-checkbox):has(input:checked) {
       --_radio-bg: transparent;
       --_checkbox-bg: transparent;
-      --_radio-border: var(
-        --form-checkbox-radio-default-border-selected-inverted
-      );
-      --_checkbox-border: var(
-        --form-checkbox-radio-default-border-selected-inverted
-      );
+      --_radio-border: var(--form-choice-checkbox-selected-border-inverted);
+      --_checkbox-border: var(--form-choice-checkbox-selected-border-inverted);
     }
 
     .tedi-checkbox:has(input:active) {
-      --_checkbox-border: var(
-        --form-checkbox-radio-default-border-selected-inverted
-      );
+      --_checkbox-border: var(--form-choice-checkbox-selected-border-inverted);
     }
 
     &.tedi-choicegroup--stacked {
diff --git a/src/community/components/form/radio/radio/radio.component.scss b/src/community/components/form/radio/radio/radio.component.scss
index 3c68bc0db..462e99b2b 100644
--- a/src/community/components/form/radio/radio/radio.component.scss
+++ b/src/community/components/form/radio/radio/radio.component.scss
@@ -1,6 +1,6 @@
 .tedi-radio {
-  --_radio-bg: var(--form-checkbox-radio-default-background-default);
-  --_radio-border: var(--form-checkbox-radio-default-border-default);
+  --_radio-bg: var(--form-choice-radio-unselected-background-default);
+  --_radio-border: var(--form-choice-radio-unselected-border-default);
   --_radio-label-color: var(--general-text-primary);
   --_radio-dot-bg: var(--_radio-border);
   --_radio-dot-size: 12px;
@@ -63,18 +63,18 @@
     .tedi-radio__indicator::after {
       display: block;
     }
-    --_radio-border: var(--form-checkbox-radio-default-border-selected);
+    --_radio-border: var(--form-choice-radio-selected-border-default);
   }
 
   &:has(input:hover, input:focus-visible) {
     .tedi-radio__indicator {
       outline: 1px solid var(--_radio-border);
     }
-    --_radio-border: var(--form-checkbox-radio-default-border-hover);
+    --_radio-border: var(--form-choice-radio-unselected-border-hover);
   }
 
   &:has(input:active) {
-    --_radio-border: var(--form-checkbox-radio-default-border-active);
+    --_radio-border: var(--form-choice-radio-unselected-border-active);
   }
 
   &:has(input:disabled) {
@@ -85,16 +85,12 @@
   }
 
   &:has(input:disabled:checked) {
-    --_radio-dot-bg: var(
-      --form-checkbox-radio-default-background-selected-disabled
-    );
-    --_radio-border: var(
-      --form-checkbox-radio-default-border-selected-disabled
-    );
+    --_radio-dot-bg: var(--form-choice-radio-selected-indicator-disabled);
+    --_radio-border: var(--form-choice-radio-selected-border-disabled);
   }
 
   &--error {
-    --_radio-bg: var(--form-checkbox-radio-default-background-error);
+    --_radio-bg: var(--form-choice-radio-unselected-background-default);
     --_radio-border: var(--form-general-feedback-error-border);
   }
 
diff --git a/src/community/components/navigation/vertical-stepper/vertical-stepper-item/vertical-stepper-item.component.scss b/src/community/components/navigation/vertical-stepper/vertical-stepper-item/vertical-stepper-item.component.scss
index 2215c69c8..aeeee7dd7 100644
--- a/src/community/components/navigation/vertical-stepper/vertical-stepper-item/vertical-stepper-item.component.scss
+++ b/src/community/components/navigation/vertical-stepper/vertical-stepper-item/vertical-stepper-item.component.scss
@@ -248,7 +248,7 @@
   }
 
   &--disabled {
-    --_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);
+    --_step-indicator-background: var(--stepper-step-disabled-background, #d2d3d8);
     --_step-indicator-color: var(
       --stepper-item-vertical-text-disabled,
       #9293a4
@@ -261,7 +261,7 @@
   }
 
   &--informative {
-    --_step-indicator-background: var(--stepper-step-disabled-bg, #d2d3d8);
+    --_step-indicator-background: var(--stepper-step-disabled-background, #d2d3d8);
     --_step-indicator-border: var(--stepper-step-disabled-border, #9293a4);
     --_step-title-color: var(--general-text-tertiary, #5d6071);
     #{$host-class}__title {
diff --git a/src/community/text-editor/text-editor.component.scss b/src/community/text-editor/text-editor.component.scss
index 4036f4a30..c63e1a56b 100644
--- a/src/community/text-editor/text-editor.component.scss
+++ b/src/community/text-editor/text-editor.component.scss
@@ -91,7 +91,7 @@
       border-radius: var(--tedi-radius-02-default);
 
       &:hover {
-        background-color: var(--general-surface-hover);
+        background-color: var(--general-state-hover);
       }
 
       &.ql-active {
diff --git a/src/tedi/components/buttons/button/button.component.scss b/src/tedi/components/buttons/button/button.component.scss
index 98a4106b1..0230b0102 100644
--- a/src/tedi/components/buttons/button/button.component.scss
+++ b/src/tedi/components/buttons/button/button.component.scss
@@ -51,18 +51,18 @@
   }
 
   &--primary-button-group {
-    --_btn-text: var(--button-group-primary-inactive-text);
-    --_btn-bg: var(--button-group-primary-inactive-background);
-    --_btn-border: var(--button-group-primary-inactive-border);
+    --_btn-text: var(--button-group-primary-unselected-text);
+    --_btn-bg: var(--button-group-primary-unselected-background);
+    --_btn-border: var(--button-group-primary-unselected-border);
     --_btn-hover-text: var(--button-group-primary-hover-text);
     --_btn-hover-bg: var(--button-group-primary-hover-background);
     --_btn-hover-border: var(--button-group-primary-hover-border);
     --_btn-active-text: var(--button-group-primary-selected-text);
     --_btn-active-bg: var(--button-group-primary-selected-background);
     --_btn-active-border: var(--button-group-primary-selected-border);
-    --_btn-focus-text: var(--button-group-primary-inactive-text);
-    --_btn-focus-bg: var(--button-group-primary-inactive-background);
-    --_btn-focus-border: var(--button-group-primary-inactive-border);
+    --_btn-focus-text: var(--button-group-primary-unselected-text);
+    --_btn-focus-bg: var(--button-group-primary-unselected-background);
+    --_btn-focus-border: var(--button-group-primary-unselected-border);
     --_btn-disabled-text: var(--button-group-primary-disabled-text);
     --_btn-disabled-bg: var(--button-group-primary-disabled-background);
     --_btn-disabled-border: var(--button-group-primary-disabled-border);
@@ -79,18 +79,18 @@
   }
 
   &--secondary-button-group {
-    --_btn-text: var(--button-group-secondary-inactive-text);
-    --_btn-bg: var(--button-group-secondary-inactive-background);
-    --_btn-border: var(--button-group-secondary-inactive-border);
+    --_btn-text: var(--button-group-secondary-unselected-text);
+    --_btn-bg: var(--button-group-secondary-unselected-background);
+    --_btn-border: var(--button-group-secondary-unselected-border);
     --_btn-hover-text: var(--button-group-secondary-hover-text);
     --_btn-hover-bg: var(--button-group-secondary-hover-background);
     --_btn-hover-border: var(--button-group-secondary-hover-border);
     --_btn-active-text: var(--button-group-secondary-selected-text);
     --_btn-active-bg: var(--button-group-secondary-selected-background);
     --_btn-active-border: var(--button-group-secondary-selected-border);
-    --_btn-focus-text: var(--button-group-secondary-inactive-text);
-    --_btn-focus-bg: var(--button-group-secondary-inactive-background);
-    --_btn-focus-border: var(--button-group-secondary-inactive-border);
+    --_btn-focus-text: var(--button-group-secondary-unselected-text);
+    --_btn-focus-bg: var(--button-group-secondary-unselected-background);
+    --_btn-focus-border: var(--button-group-secondary-unselected-border);
     --_btn-disabled-text: var(--button-group-secondary-disabled-text);
     --_btn-disabled-bg: var(--button-group-secondary-disabled-background);
     --_btn-disabled-border: var(--button-group-secondary-disabled-border);
diff --git a/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.component.scss b/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.component.scss
index 60a3ed921..65ab42fca 100644
--- a/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.component.scss
+++ b/src/tedi/components/content/accordion/accordion-item-header/accordion-item-header.component.scss
@@ -26,7 +26,7 @@
     cursor: pointer;
 
     &:hover {
-      background: var(--general-surface-hover);
+      background: var(--general-state-hover);
     }
 
     &:active {
diff --git a/src/tedi/components/content/accordion/accordion.stories.ts b/src/tedi/components/content/accordion/accordion.stories.ts
index 9d3ce1436..a5f81576a 100644
--- a/src/tedi/components/content/accordion/accordion.stories.ts
+++ b/src/tedi/components/content/accordion/accordion.stories.ts
@@ -1175,7 +1175,7 @@ hasn't met yet (incomplete prerequisites, missing permissions, etc.).
 
         .step-number--disabled {
           border-color: var(--stepper-step-disabled-border);
-          background: var(--stepper-step-disabled-bg);
+          background: var(--stepper-step-disabled-background);
         }
 
         .step-body {
diff --git a/src/tedi/components/content/calendar/calendar-month-grid/calendar-month-grid.component.scss b/src/tedi/components/content/calendar/calendar-month-grid/calendar-month-grid.component.scss
index fb4aa1fef..94a06716b 100644
--- a/src/tedi/components/content/calendar/calendar-month-grid/calendar-month-grid.component.scss
+++ b/src/tedi/components/content/calendar/calendar-month-grid/calendar-month-grid.component.scss
@@ -23,17 +23,17 @@
     padding: var(--form-checkbox-radio-card-radio-padding-y)
       var(--form-checkbox-radio-card-radio-padding-x);
     font-size: var(--body-regular-size);
-    color: var(--form-checkbox-radio-card-primary-default-text);
+    color: var(--form-choice-card-primary-unselected-text-default);
     cursor: pointer;
-    background: var(--form-checkbox-radio-card-secondary-default-background);
+    background: var(--form-choice-card-secondary-unselected-background-default);
     border: var(--tedi-borders-01) solid
-      var(--form-checkbox-radio-card-secondary-default-border);
+      var(--form-choice-card-secondary-unselected-border-default);
     border-radius: var(--form-checkbox-radio-card-radius);
 
     &:hover {
-      color: var(--form-checkbox-radio-card-secondary-hover-text);
-      background: var(--form-checkbox-radio-card-secondary-hover-background);
-      border-color: var(--form-checkbox-radio-card-secondary-hover-border);
+      color: var(--form-choice-card-secondary-unselected-text-hover);
+      background: var(--form-choice-card-secondary-unselected-background-hover);
+      border-color: var(--form-choice-card-secondary-unselected-border-hover);
     }
 
     &:focus-visible {
@@ -46,36 +46,34 @@
     }
 
     &--selected {
-      color: var(--form-checkbox-radio-card-secondary-selected-text);
-      background: var(--form-checkbox-radio-card-secondary-selected-background);
-      border-color: var(--form-checkbox-radio-card-secondary-selected-border);
+      color: var(--form-choice-card-secondary-selected-text-default);
+      background: var(--form-choice-card-secondary-selected-background-default);
+      border-color: var(--form-choice-card-secondary-selected-border-default);
       box-shadow: 0 0 0 1px
-        var(--form-checkbox-radio-card-secondary-selected-border);
+        var(--form-choice-card-secondary-selected-border-default);
     }
 
     &--disabled,
     &[aria-disabled="true"] {
-      color: var(--form-checkbox-radio-card-secondary-disabled-default-text);
+      color: var(--form-choice-card-secondary-unselected-text-disabled);
       pointer-events: none;
       cursor: not-allowed;
       background: var(
-        --form-checkbox-radio-card-secondary-disabled-default-background
+        --form-choice-card-secondary-unselected-background-disabled
       );
       border-color: var(
-        --form-checkbox-radio-card-secondary-disabled-default-border
+        --form-choice-card-secondary-unselected-border-disabled
       );
     }
 
     &--selected#{&}--disabled {
-      color: var(--form-checkbox-radio-card-secondary-disabled-selected-text);
+      color: var(--form-choice-card-secondary-selected-text-disabled);
       background: var(
-        --form-checkbox-radio-card-secondary-disabled-selected-background
-      );
-      border-color: var(
-        --form-checkbox-radio-card-secondary-disabled-selected-border
+        --form-choice-card-secondary-selected-background-disabled
       );
+      border-color: var(--form-choice-card-secondary-selected-border-disabled);
       box-shadow: 0 0 0 1px
-        var(--form-checkbox-radio-card-secondary-disabled-selected-border);
+        var(--form-choice-card-secondary-selected-border-disabled);
     }
   }
 }
diff --git a/src/tedi/components/content/calendar/calendar-year-grid/calendar-year-grid.component.scss b/src/tedi/components/content/calendar/calendar-year-grid/calendar-year-grid.component.scss
index 773575480..778c9d01e 100644
--- a/src/tedi/components/content/calendar/calendar-year-grid/calendar-year-grid.component.scss
+++ b/src/tedi/components/content/calendar/calendar-year-grid/calendar-year-grid.component.scss
@@ -23,17 +23,17 @@
     padding: var(--form-checkbox-radio-card-radio-padding-y)
       var(--form-checkbox-radio-card-radio-padding-x);
     font-size: var(--body-regular-size);
-    color: var(--form-checkbox-radio-card-primary-default-text);
+    color: var(--form-choice-card-primary-unselected-text-default);
     cursor: pointer;
-    background: var(--form-checkbox-radio-card-secondary-default-background);
+    background: var(--form-choice-card-secondary-unselected-background-default);
     border: var(--tedi-borders-01) solid
-      var(--form-checkbox-radio-card-secondary-default-border);
+      var(--form-choice-card-secondary-unselected-border-default);
     border-radius: var(--form-checkbox-radio-card-radius);
 
     &:hover {
-      color: var(--form-checkbox-radio-card-secondary-hover-text);
-      background: var(--form-checkbox-radio-card-secondary-hover-background);
-      border-color: var(--form-checkbox-radio-card-secondary-hover-border);
+      color: var(--form-choice-card-secondary-unselected-text-hover);
+      background: var(--form-choice-card-secondary-unselected-background-hover);
+      border-color: var(--form-choice-card-secondary-unselected-border-hover);
     }
 
     &:focus-visible {
@@ -46,36 +46,34 @@
     }
 
     &--selected {
-      color: var(--form-checkbox-radio-card-secondary-selected-text);
-      background: var(--form-checkbox-radio-card-secondary-selected-background);
-      border-color: var(--form-checkbox-radio-card-secondary-selected-border);
+      color: var(--form-choice-card-secondary-selected-text-default);
+      background: var(--form-choice-card-secondary-selected-background-default);
+      border-color: var(--form-choice-card-secondary-selected-border-default);
       box-shadow: 0 0 0 1px
-        var(--form-checkbox-radio-card-secondary-selected-border);
+        var(--form-choice-card-secondary-selected-border-default);
     }
 
     &--disabled,
     &[aria-disabled="true"] {
-      color: var(--form-checkbox-radio-card-secondary-disabled-default-text);
+      color: var(--form-choice-card-secondary-unselected-text-disabled);
       pointer-events: none;
       cursor: not-allowed;
       background: var(
-        --form-checkbox-radio-card-secondary-disabled-default-background
+        --form-choice-card-secondary-unselected-background-disabled
       );
       border-color: var(
-        --form-checkbox-radio-card-secondary-disabled-default-border
+        --form-choice-card-secondary-unselected-border-disabled
       );
     }
 
     &--selected#{&}--disabled {
-      color: var(--form-checkbox-radio-card-secondary-disabled-selected-text);
+      color: var(--form-choice-card-secondary-selected-text-disabled);
       background: var(
-        --form-checkbox-radio-card-secondary-disabled-selected-background
-      );
-      border-color: var(
-        --form-checkbox-radio-card-secondary-disabled-selected-border
+        --form-choice-card-secondary-selected-background-disabled
       );
+      border-color: var(--form-choice-card-secondary-selected-border-disabled);
       box-shadow: 0 0 0 1px
-        var(--form-checkbox-radio-card-secondary-disabled-selected-border);
+        var(--form-choice-card-secondary-selected-border-disabled);
     }
   }
 }
diff --git a/src/tedi/components/form/checkbox-card/checkbox-card.component.scss b/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
index df9f34b78..415d30524 100644
--- a/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
+++ b/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
@@ -1,7 +1,18 @@
+$focus-ring:
+  0 0 0 var(--tedi-borders-01)
+    var(--general-effect-colors-focus-outset-inner-shadow),
+  0 0 0 var(--tedi-borders-03)
+    var(--general-effect-colors-focus-outset-outer-shadow);
+$selected-border-inset: calc(
+  var(--general-border-width-selected) - var(--tedi-borders-01)
+);
+
 label[tedi-checkbox-card] {
   --_card-bg: transparent;
   --_card-text: inherit;
   --_card-border: transparent;
+  --_card-inset: 0 0 0 0 transparent;
+  --_card-ring: 0 0 0 0 transparent;
 
   display: inline-flex;
   flex-direction: column;
@@ -20,8 +31,9 @@ label[tedi-checkbox-card] {
   color: var(--_card-text);
   cursor: pointer;
   background-color: var(--_card-bg);
-  border: 1px solid var(--_card-border);
+  border: var(--tedi-borders-01) solid var(--_card-border);
   border-radius: var(--form-checkbox-radio-card-radius);
+  box-shadow: var(--_card-inset), var(--_card-ring);
 
   [tedi-text],
   tedi-icon {
@@ -47,6 +59,16 @@ label[tedi-checkbox-card] {
     color: inherit;
   }
 
+  // An icon before the label pushes the label text right by the icon and one more
+  // gap, so the description lines up with the text instead of the icon. The icon
+  // keeps its 18px size while the indicator grows on small screens
+  &:has(> .tedi-checkbox-card__content > tedi-icon) > .tedi-feedback-text {
+    padding-left: calc(
+      var(--form-checkbox-radio-size-responsive) + var(--icon-03) +
+        var(--form-checkbox-radio-card-inner-spacing) * 2
+    );
+  }
+
   &.tedi-checkbox-card--hide-indicator {
     input[tedi-checkbox] {
       position: absolute;
@@ -63,20 +85,20 @@ label[tedi-checkbox-card] {
     > .tedi-feedback-text {
       padding-left: 0;
     }
-  }
 
-  input[tedi-checkbox] {
-    &:not(:disabled):hover {
-      box-shadow: none;
+    &:has(> .tedi-checkbox-card__content > tedi-icon) > .tedi-feedback-text {
+      padding-left: calc(
+        var(--icon-03) + var(--form-checkbox-radio-card-inner-spacing)
+      );
     }
   }
 
+  // The focus ring goes on the card, not on the indicator
   &:has(input:focus-visible) {
-    outline: var(--tedi-borders-02) solid var(--tedi-primary-500);
-    outline-offset: var(--tedi-borders-01);
+    --_card-ring: #{$focus-ring};
 
-    input[tedi-checkbox]:focus-visible {
-      outline: none;
+    input[tedi-checkbox][type="checkbox"] {
+      --_checkbox-ring: 0 0 0 0 transparent;
     }
   }
 
@@ -85,108 +107,170 @@ label[tedi-checkbox-card] {
   }
 
   &.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-bg: var(--form-choice-card-primary-unselected-background-default);
+    --_card-text: var(--form-choice-card-primary-unselected-text-default);
     --_card-border: var(
-      --form-checkbox-radio-card-primary-default-border-separate
+      --form-choice-card-primary-unselected-border-borderless
     );
 
+    &:has(input:hover:not(:disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-primary-unselected-background-hover);
+      --_card-text: var(--form-choice-card-primary-unselected-text-hover);
+      --_card-border: var(--form-choice-card-primary-unselected-border-hover);
+    }
+
+    &:has(input:active:not(:disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-primary-unselected-background-active);
+      --_card-text: var(--form-choice-card-primary-unselected-text-active);
+      --_card-border: var(--form-choice-card-primary-unselected-border-active);
+    }
+
+    &:has(input:focus-visible:not(:hover, :active, :disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-primary-unselected-background-focus);
+      --_card-text: var(--form-choice-card-primary-unselected-text-focus);
+    }
+
     &: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
-      );
+      --_card-bg: var(--form-choice-card-primary-selected-background-default);
+      --_card-text: var(--form-choice-card-primary-selected-text-default);
+      --_card-border: var(--_card-bg);
 
-      input[tedi-checkbox]:not(:disabled) {
-        background-color: transparent;
-        border-color: var(
-          --form-checkbox-radio-default-border-selected-inverted
+      input[tedi-checkbox][type="checkbox"] {
+        --_checkbox-bg: var(--form-choice-inverted-indicator-default);
+        --_checkbox-border: var(
+          --form-choice-checkbox-selected-border-inverted
+        );
+        --_checkbox-icon: var(
+          --form-choice-checkbox-selected-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:checked:hover:not(:disabled)) {
+      --_card-bg: var(--form-choice-card-primary-selected-background-hover);
+      --_card-text: var(--form-choice-card-primary-selected-text-hover);
+
+      input[tedi-checkbox][type="checkbox"] {
+        --_checkbox-bg: var(--form-choice-inverted-indicator-hover);
+      }
+    }
+
+    &:has(input:checked:active:not(:disabled)) {
+      --_card-bg: var(--form-choice-card-primary-selected-background-active);
+      --_card-text: var(--form-choice-card-primary-selected-text-active);
+
+      input[tedi-checkbox][type="checkbox"] {
+        --_checkbox-bg: var(--form-choice-inverted-indicator-active);
+      }
+    }
+
+    &:has(input:checked:focus-visible:not(:hover, :active, :disabled)) {
+      --_card-bg: var(--form-choice-card-primary-selected-background-focus);
+      --_card-text: var(--form-choice-card-primary-selected-text-focus);
+
+      input[tedi-checkbox][type="checkbox"] {
+        --_checkbox-bg: var(--form-choice-inverted-indicator-focus);
+      }
     }
 
     &: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
+        --form-choice-card-primary-unselected-background-disabled
       );
+      --_card-text: var(--form-choice-card-primary-unselected-text-disabled);
       --_card-border: var(
-        --form-checkbox-radio-card-primary-disabled-default-background
+        --form-choice-card-primary-unselected-border-disabled
       );
     }
 
     &: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
-      );
+      --_card-bg: var(--form-choice-card-primary-selected-background-disabled);
+      --_card-text: var(--form-choice-card-primary-selected-text-disabled);
+      --_card-border: var(--_card-bg);
 
-      input[tedi-checkbox] {
-        background-color: transparent;
-        border-color: var(
-          --form-checkbox-radio-default-border-selected-inverted
+      input[tedi-checkbox][type="checkbox"] {
+        --_checkbox-bg: var(--form-choice-inverted-indicator-disabled);
+        --_checkbox-border: var(
+          --form-choice-checkbox-selected-border-inverted
+        );
+        --_checkbox-icon: var(
+          --form-choice-checkbox-selected-indicator-disabled
         );
       }
     }
   }
 
   &.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);
+    --_card-bg: var(--form-choice-card-secondary-unselected-background-default);
+    --_card-text: var(--form-choice-card-secondary-unselected-text-default);
+    --_card-border: var(--form-choice-card-secondary-unselected-border-default);
+
+    &:has(input:hover:not(:disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-secondary-unselected-background-hover);
+      --_card-text: var(--form-choice-card-secondary-unselected-text-hover);
+      --_card-border: var(--form-choice-card-secondary-unselected-border-hover);
+    }
+
+    &:has(input:active:not(:disabled, :checked)) {
+      --_card-bg: var(
+        --form-choice-card-secondary-unselected-background-active
+      );
+      --_card-text: var(--form-choice-card-secondary-unselected-text-active);
+      --_card-border: var(
+        --form-choice-card-secondary-unselected-border-active
+      );
+    }
+
+    &:has(input:focus-visible:not(:hover, :active, :disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-secondary-unselected-background-focus);
+      --_card-text: var(--form-choice-card-secondary-unselected-text-focus);
+      --_card-border: var(--form-choice-card-secondary-unselected-border-focus);
+    }
 
     &: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);
+      --_card-bg: var(--form-choice-card-secondary-selected-background-default);
+      --_card-text: var(--form-choice-card-secondary-selected-text-default);
+      --_card-border: var(--form-choice-card-secondary-selected-border-default);
+      --_card-inset: inset 0 0 0 #{$selected-border-inset} var(--_card-border);
+    }
+
+    &:has(input:checked:hover:not(:disabled)) {
+      --_card-bg: var(--form-choice-card-secondary-selected-background-hover);
+      --_card-text: var(--form-choice-card-secondary-selected-text-hover);
+      --_card-border: var(--form-choice-card-secondary-selected-border-hover);
+    }
 
-      box-shadow: inset 0 0 0 var(--tedi-borders-01) var(--_card-border);
+    &:has(input:checked:active:not(:disabled)) {
+      --_card-bg: var(--form-choice-card-secondary-selected-background-active);
+      --_card-text: var(--form-choice-card-secondary-selected-text-active);
+      --_card-border: var(--form-choice-card-secondary-selected-border-active);
     }
 
-    &: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:checked:focus-visible:not(:hover, :active, :disabled)) {
+      --_card-bg: var(--form-choice-card-secondary-selected-background-focus);
+      --_card-text: var(--form-choice-card-secondary-selected-text-focus);
+      --_card-border: var(--form-choice-card-secondary-selected-border-focus);
     }
 
     &: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
+        --form-choice-card-secondary-unselected-background-disabled
       );
+      --_card-text: var(--form-choice-card-secondary-unselected-text-disabled);
       --_card-border: var(
-        --form-checkbox-radio-card-secondary-disabled-default-border
+        --form-choice-card-secondary-unselected-border-disabled
       );
     }
 
     &: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
+        --form-choice-card-secondary-selected-background-disabled
       );
+      --_card-text: var(--form-choice-card-secondary-selected-text-disabled);
       --_card-border: var(
-        --form-checkbox-radio-card-secondary-disabled-selected-border
+        --form-choice-card-secondary-selected-border-disabled
       );
-
-      box-shadow: inset 0 0 0 var(--tedi-borders-01) var(--_card-border);
+      --_card-inset: inset 0 0 0 #{$selected-border-inset} var(--_card-border);
     }
   }
 }
diff --git a/src/tedi/components/form/checkbox-card/checkbox-card.component.ts b/src/tedi/components/form/checkbox-card/checkbox-card.component.ts
index b6ff91173..8da4d8888 100644
--- a/src/tedi/components/form/checkbox-card/checkbox-card.component.ts
+++ b/src/tedi/components/form/checkbox-card/checkbox-card.component.ts
@@ -29,8 +29,8 @@ export class CheckboxCardComponent {
   readonly variant = input<CheckboxCardVariant>("primary");
 
   /**
-   * Whether to show the checkbox indicator.
-   * When false, the checkbox is visually hidden but remains functional.
+   * Show the checkbox indicator.
+   * When false, the checkbox is visually hidden but stays functional.
    * @default true
    */
   readonly showIndicator = input<boolean>(true);
diff --git a/src/tedi/components/form/checkbox-group/checkbox-group.component.spec.ts b/src/tedi/components/form/checkbox-group/checkbox-group.component.spec.ts
index 4b2073d6f..4212354fc 100644
--- a/src/tedi/components/form/checkbox-group/checkbox-group.component.spec.ts
+++ b/src/tedi/components/form/checkbox-group/checkbox-group.component.spec.ts
@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
 import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import {
   CheckboxGroupComponent,
@@ -515,3 +516,54 @@ describe("CheckboxGroupComponent — missing child value", () => {
     warnSpy.mockRestore();
   });
 });
+
+describe("CheckboxGroupComponent — selection checks", () => {
+  let fixture: ComponentFixture<FormControlHostComponent>;
+  let group: CheckboxGroupComponent;
+  let inputs: HTMLInputElement[];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FormControlHostComponent],
+    });
+
+    fixture = TestBed.createComponent(FormControlHostComponent);
+    fixture.detectChanges();
+    group = fixture.debugElement.query(
+      By.directive(CheckboxGroupComponent),
+    ).componentInstance;
+    inputs = Array.from(
+      (fixture.nativeElement as HTMLElement).querySelectorAll(
+        'input[type="checkbox"]',
+      ),
+    ) as HTMLInputElement[];
+  });
+
+  it("should not emit when a change does not alter the values", () => {
+    fixture.componentInstance.control.setValue(["urgent"]);
+    fixture.detectChanges();
+    const emitted: (string[] | null)[] = [];
+    fixture.componentInstance.control.valueChanges.subscribe((v) =>
+      emitted.push(v),
+    );
+
+    inputs[0].checked = true;
+    inputs[0].dispatchEvent(new Event("change", { bubbles: true }));
+    inputs[1].checked = false;
+    inputs[1].dispatchEvent(new Event("change", { bubbles: true }));
+    fixture.detectChanges();
+
+    expect(emitted).toEqual([]);
+    expect(fixture.componentInstance.control.value).toEqual(["urgent"]);
+    expect(fixture.componentInstance.control.dirty).toBe(false);
+  });
+
+  it("should report whether a value is selected", () => {
+    fixture.componentInstance.control.setValue(["urgent"]);
+    fixture.detectChanges();
+
+    expect(group.isSelected("urgent")).toBe(true);
+    expect(group.isSelected("review")).toBe(false);
+    expect(group.isSelected(undefined)).toBe(false);
+  });
+});
diff --git a/src/tedi/components/form/checkbox/checkbox.component.scss b/src/tedi/components/form/checkbox/checkbox.component.scss
index c3e498f75..cdf1a25af 100644
--- a/src/tedi/components/form/checkbox/checkbox.component.scss
+++ b/src/tedi/components/form/checkbox/checkbox.component.scss
@@ -1,7 +1,21 @@
 @use "@tedi-design-system/core/bootstrap-utility/breakpoints";
 
+$focus-ring:
+  0 0 0 var(--tedi-borders-01)
+    var(--general-effect-colors-focus-outset-inner-shadow),
+  0 0 0 var(--tedi-borders-03)
+    var(--general-effect-colors-focus-outset-outer-shadow);
+$selected-border-inset: calc(
+  var(--general-border-width-selected) - var(--tedi-borders-01)
+);
+
 input[tedi-checkbox][type="checkbox"] {
   --_checkbox-icon-size: 1.125rem;
+  --_checkbox-bg: var(--form-choice-checkbox-unselected-default);
+  --_checkbox-border: var(--form-choice-checkbox-unselected-border-default);
+  --_checkbox-icon: var(--form-choice-checkbox-selected-indicator-default);
+  --_checkbox-inset: 0 0 0 0 transparent;
+  --_checkbox-ring: 0 0 0 0 transparent;
 
   position: relative;
   width: var(--form-checkbox-radio-size-responsive);
@@ -12,40 +26,73 @@ input[tedi-checkbox][type="checkbox"] {
   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);
+  background-color: var(--_checkbox-bg);
+  border: var(--tedi-borders-01) solid var(--_checkbox-border);
   border-radius: var(--form-checkbox-radio-indicator-radius-checkbox);
+  box-shadow: var(--_checkbox-inset), var(--_checkbox-ring);
 
   @include breakpoints.media-breakpoint-up(sm) {
     --_checkbox-icon-size: 1rem;
   }
 
-  &: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);
+  // Unselected
+  &:not(:disabled, :checked, :indeterminate):hover {
+    --_checkbox-border: var(--form-choice-checkbox-unselected-border-hover);
+    --_checkbox-inset: inset 0 0 0 #{$selected-border-inset}
+      var(--_checkbox-border);
+  }
+
+  &:not(:disabled, :checked, :indeterminate):active {
+    --_checkbox-border: var(--form-choice-checkbox-unselected-border-active);
+    --_checkbox-inset: inset 0 0 0 #{$selected-border-inset}
+      var(--_checkbox-border);
+  }
+
+  &:focus-visible:not(:disabled) {
+    --_checkbox-ring: #{$focus-ring};
+
+    outline: none;
   }
 
-  &:not(:disabled):active {
-    background-color: var(--form-checkbox-radio-default-background-active);
-    border-color: var(--form-checkbox-radio-default-border-active);
-    box-shadow: none;
+  &:focus-visible:not(:disabled, :checked, :indeterminate) {
+    --_checkbox-border: var(--form-choice-checkbox-unselected-border-focus);
   }
 
-  &:not(:checked):disabled {
+  &:disabled:not(:checked, :indeterminate) {
+    --_checkbox-bg: var(--form-choice-checkbox-unselected-disabled);
+    --_checkbox-border: var(--form-choice-checkbox-unselected-border-disabled);
+
     cursor: not-allowed;
-    background-color: var(--form-general-background-disabled);
-    border-color: var(--form-general-border-disabled);
   }
 
+  // Selected
   &:checked,
   &:indeterminate {
-    background-color: var(--form-checkbox-radio-default-background-selected);
-    border-color: var(--form-checkbox-radio-default-border-selected);
+    --_checkbox-bg: var(--form-choice-checkbox-selected-default);
+    --_checkbox-border: var(--form-choice-checkbox-selected-border-default);
+
+    &:not(:disabled):hover {
+      --_checkbox-bg: var(--form-choice-checkbox-selected-hover);
+      --_checkbox-border: var(--form-choice-checkbox-selected-border-hover);
+      --_checkbox-icon: var(--form-choice-checkbox-selected-indicator-hover);
+    }
+
+    &:not(:disabled):active {
+      --_checkbox-bg: var(--form-choice-checkbox-selected-active);
+      --_checkbox-border: var(--form-choice-checkbox-selected-border-active);
+      --_checkbox-icon: var(--form-choice-checkbox-selected-indicator-active);
+    }
+
+    &:focus-visible:not(:disabled, :hover, :active) {
+      --_checkbox-border: var(--form-choice-checkbox-selected-border-focus);
+    }
 
     &:disabled {
+      --_checkbox-bg: var(--form-choice-checkbox-selected-disabled);
+      --_checkbox-border: var(--form-choice-checkbox-selected-border-disabled);
+      --_checkbox-icon: var(--form-choice-checkbox-selected-indicator-disabled);
+
       cursor: not-allowed;
-      background-color: var(--form-checkbox-radio-default-background-selected-disabled);
-      border-color: var(--form-checkbox-radio-default-border-selected-disabled);
     }
 
     &::before {
@@ -55,7 +102,7 @@ input[tedi-checkbox][type="checkbox"] {
       font-family: "Material Symbols Outlined", sans-serif;
       font-size: var(--_checkbox-icon-size);
       line-height: 1;
-      color: var(--form-checkbox-radio-default-check-indicator-default);
+      color: var(--_checkbox-icon);
       content: "check";
       transform: translate(-50%, -50%);
       -webkit-font-smoothing: antialiased;
@@ -74,20 +121,16 @@ input[tedi-checkbox][type="checkbox"] {
     }
   }
 
-  &:focus-visible {
-    outline: var(--tedi-borders-02) solid var(--tedi-primary-500);
-    outline-offset: var(--tedi-borders-01);
-  }
-
-  &:not(:checked, :disabled).tedi-checkbox--invalid,
-  &:not(:checked, :disabled):user-invalid,
-  &:not(:checked, :disabled).ng-invalid.ng-touched {
-    background-color: var(--form-checkbox-radio-default-background-error);
-    border-color: var(--form-general-feedback-error-border);
+  // Error (selected state keeps its regular colors)
+  &:not(:checked, :indeterminate, :disabled).tedi-checkbox--invalid,
+  &:not(:checked, :indeterminate, :disabled):user-invalid,
+  &:not(:checked, :indeterminate, :disabled).ng-invalid.ng-touched {
+    --_checkbox-border: var(--form-choice-checkbox-unselected-border-error);
 
-    &:hover {
-      border-color: var(--form-general-feedback-error-border);
-      box-shadow: 0 0 0 1px var(--form-general-feedback-error-border);
+    &:hover,
+    &:active {
+      --_checkbox-inset: inset 0 0 0 #{$selected-border-inset}
+        var(--_checkbox-border);
     }
   }
 
@@ -107,7 +150,7 @@ label:has(input[tedi-checkbox]:disabled) {
   cursor: not-allowed;
 }
 
-label:has(input[tedi-checkbox])+tedi-feedback-text {
+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/src/tedi/components/form/checkbox/checkbox.component.ts b/src/tedi/components/form/checkbox/checkbox.component.ts
index 81cd0c673..7037067bf 100644
--- a/src/tedi/components/form/checkbox/checkbox.component.ts
+++ b/src/tedi/components/form/checkbox/checkbox.component.ts
@@ -35,7 +35,7 @@ export class CheckboxComponent implements OnInit, OnDestroy {
    */
   readonly size = input<CheckboxSize>("default");
   /**
-   * Is checkbox invalid?
+   * Show the checkbox in an invalid state.
    * @default false
    */
   readonly invalid = input(false);
@@ -46,7 +46,7 @@ export class CheckboxComponent implements OnInit, OnDestroy {
    */
   readonly value = input<string>();
   /**
-   * Disables this checkbox. An enclosing disabled `<tedi-checkbox-group>`
+   * Disable this checkbox. An enclosing disabled `<tedi-checkbox-group>`
    * forces disabled regardless of this input.
    * @default false
    */
diff --git a/src/tedi/components/form/checkbox/checkbox.stories.ts b/src/tedi/components/form/checkbox/checkbox.stories.ts
index 499c3064d..c1bcf1eba 100644
--- a/src/tedi/components/form/checkbox/checkbox.stories.ts
+++ b/src/tedi/components/form/checkbox/checkbox.stories.ts
@@ -72,7 +72,7 @@ export default {
     },
     invalid: {
       control: "boolean",
-      description: "Is checkbox invalid?",
+      description: "Show the checkbox in an invalid state.",
       table: {
         category: "Checkbox",
         type: {
@@ -85,7 +85,7 @@ export default {
     },
     disabled: {
       control: "boolean",
-      description: "Is checkbox disabled?",
+      description: "Disable the checkbox.",
       table: {
         category: "Checkbox",
         type: {
@@ -96,7 +96,7 @@ export default {
     indeterminate: {
       control: "boolean",
       description:
-        "Renders an alternate checked state, with a slash, which is neither toggled on or off. Interacting with the checkbox will dismiss the indeterminate state.",
+        "Show an indeterminate state, marked with a dash, that is neither checked nor unchecked. Interacting with the checkbox clears it.",
       table: {
         category: "Checkbox",
       },
@@ -106,7 +106,7 @@ export default {
       options: ["primary", "secondary"],
       description: "Visual variant of the checkbox card.",
       table: {
-        category: "CheckboxCard",
+        category: "Checkbox Card",
         type: {
           summary: "CheckboxCardVariant",
           detail: "primary \nsecondary",
@@ -119,9 +119,9 @@ export default {
     showIndicator: {
       control: "boolean",
       description:
-        "Whether to show the checkbox indicator. When false, the checkbox is visually hidden but remains functional.",
+        "Show the checkbox indicator. When false, the checkbox is visually hidden but stays functional.",
       table: {
-        category: "CheckboxCard",
+        category: "Checkbox Card",
         type: {
           summary: "boolean",
         },
@@ -134,7 +134,7 @@ export default {
       control: "text",
       description: "Label text displayed above the checkbox group.",
       table: {
-        category: "CheckboxGroup",
+        category: "Checkbox Group",
         type: {
           summary: "string",
         },
@@ -145,7 +145,7 @@ export default {
       options: ["horizontal", "vertical"],
       description: "Layout direction of the checkboxes.",
       table: {
-        category: "CheckboxGroup",
+        category: "Checkbox Group",
         type: {
           summary: "CheckboxGroupDirection",
           detail: "horizontal \nvertical",
@@ -172,7 +172,7 @@ export const Default: StoryObj<StoryCheckboxComponent & { disabled: boolean }> =
       template: `
       <label tedi-label color="primary" class="flex align-items-center gap-2">
         <input tedi-checkbox type="checkbox" ${argsToTemplate(args)} />
-        Text
+        Tekst
       </label>
     `,
     }),
@@ -186,11 +186,25 @@ export const Size: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <tedi-row [cols]="2" [gapY]="3">
-        <div>Default</div>
-        <input tedi-checkbox type="checkbox" aria-label="Vaikimisi" />
-        <div>Large</div>
-        <input tedi-checkbox type="checkbox" size="large" aria-label="Suur" />
+      <tedi-row [cols]="12" [gapY]="3">
+        <tedi-col width="9" [md]="{ width: 6 }">
+          <p tedi-text modifiers="bold">Default</p>
+        </tedi-col>
+        <tedi-col width="3" [md]="{ width: 6 }">
+          <input tedi-checkbox type="checkbox" aria-label="Vaikimisi" />
+        </tedi-col>
+        <tedi-col width="9" [md]="{ width: 6 }">
+          <div class="flex flex-column gap-3">
+            <p tedi-text modifiers="bold">Large</p>
+            <tedi-alert type="warning" [showClose]="false">
+              <p tedi-text>Applied automatically on mobile screen sizes.</p>
+              <p tedi-text modifiers="bold">Otherwise, prefer using default size.</p>
+            </tedi-alert>
+          </div>
+        </tedi-col>
+        <tedi-col width="3" [md]="{ width: 6 }">
+          <input tedi-checkbox type="checkbox" size="large" aria-label="Suur" />
+        </tedi-col>
       </tedi-row>
     `,
   }),
@@ -200,18 +214,18 @@ export const Vertical: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <tedi-checkbox-group label="Label" direction="vertical">
+      <tedi-checkbox-group label="Vali tooraine" direction="vertical">
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
-          Text
+          Kartul
         </label>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
-          Text
+          Porgand
         </label>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" />
-          Text
+          Kapsas
         </label>
       </tedi-checkbox-group>
     `,
@@ -222,18 +236,18 @@ export const Horizontal: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <tedi-checkbox-group label="Label">
+      <tedi-checkbox-group label="Vali tooraine">
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
-          Text
+          Kartul
         </label>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" checked />
-          Text
+          Porgand
         </label>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" />
-          Text
+          Kapsas
         </label>
       </tedi-checkbox-group>
     `,
@@ -273,31 +287,31 @@ export const VerticalTree: StoryObj<CheckboxComponent> = {
     return {
       props: args,
       template: `
-        <tedi-checkbox-group label="Label" direction="vertical">
+        <tedi-checkbox-group label="Vali tooraine" direction="vertical">
           <label tedi-label id="parentCB" color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Juurviljad
           </label>
           <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
+              Kartul
             </label>
             <label tedi-label color="primary" class="flex align-items-center gap-2">
               <input tedi-checkbox type="checkbox" checked />
-              Text
+              Porgand
             </label>
             <label tedi-label color="primary" class="flex align-items-center gap-2">
               <input tedi-checkbox type="checkbox" />
-              Text
+              Kapsas
             </label>
             <label tedi-label color="primary" class="flex align-items-center gap-2">
               <input tedi-checkbox type="checkbox" />
-              Text
+              Kaalikas
             </label>
             <label tedi-label color="primary" class="flex align-items-center gap-2">
               <input tedi-checkbox type="checkbox" />
-              Text
+              Peet
             </label>
           </tedi-checkbox-group>
         </tedi-checkbox-group>
@@ -311,33 +325,23 @@ export const Separate: StoryObj<CheckboxComponent> = {
     props: args,
     template: `
       <tedi-row [cols]="1" [gapY]="4">
-        <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>
-        <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">
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-checkbox type="checkbox" />
-          Text
+          Nõustun tingimustega
+        </label>
+        <label tedi-label color="primary" [required]="true" class="flex align-items-center">
+          <input tedi-checkbox type="checkbox" style="margin-right: var(--form-checkbox-radio-inner-spacing)" />
+          Nõustun tingimustega
         </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
+          Analüüsid
         </label>
         <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
+            Analüüsid
           </label>
           <tedi-tooltip>
             <tedi-tooltip-trigger>
@@ -351,9 +355,9 @@ export const Separate: StoryObj<CheckboxComponent> = {
         <div>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Analüüsid
           </label>
-          <tedi-feedback-text text="Description" />
+          <tedi-feedback-text text="Valik tagab vereanalüüside võtmise ning tulemuste tõlgendamise" />
         </div>
       </tedi-row>
     `,
@@ -364,187 +368,111 @@ export const Group: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <tedi-row [cols]="2" [gapY]="3">
-        <tedi-checkbox-group label="Label" direction="vertical">
+      <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
+        <tedi-checkbox-group label="Tooraine" direction="vertical">
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Kartul
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Piim
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Banaanid
           </label>
-          <tedi-feedback-text text="Hint text" />
+          <tedi-feedback-text text="Tegemist on veidi veidra valikuga, kuid vähemalt ühe baaselemendi peab valima" />
         </tedi-checkbox-group>
-        <tedi-checkbox-group label="Label" direction="vertical">
+        <tedi-checkbox-group label="Tooraine">
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Kartul
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Piim
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Banaanid
           </label>
-          <tedi-feedback-text text="Feedback text" type="error" />
+          <tedi-feedback-text text="Tegemist on veidi veidra valikuga, kuid vähemalt ühe baaselemendi peab valima" />
         </tedi-checkbox-group>
-        <tedi-checkbox-group label="Label">
+        <tedi-checkbox-group label="Tooraine" direction="vertical">
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Kartul
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Peet
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Kapsas
           </label>
-          <tedi-feedback-text text="Hint text" />
+          <tedi-feedback-text text="Vähemalt 1 tooraine on kohustuslik valida" type="error" />
         </tedi-checkbox-group>
-        <tedi-checkbox-group label="Label">
+        <tedi-checkbox-group label="Tooraine">
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Kartul
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Peet
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-checkbox type="checkbox" />
-            Text
+            Kapsas
           </label>
-          <tedi-feedback-text text="Feedback text" type="error" />
+          <tedi-feedback-text text="Vähemalt 1 tooraine on kohustuslik valida" type="error" />
         </tedi-checkbox-group>
       </tedi-row>
     `,
   }),
 };
 
-/**
- * All visual states of the checkbox component.
- */
-export const States: StoryObj<CheckboxComponent> = {
-  parameters: {
-    pseudo: {
-      hover: "#Hover",
-      active: "#Active",
-      focusVisible: "#Focus",
-    },
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <tedi-row [cols]="2" [gapY]="3">
-        <strong>Default</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-checkbox type="checkbox" />
-          Text
-        </label>
-
-        <strong>Hover</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-checkbox type="checkbox" id="Hover" />
-          Text
-        </label>
-
-        <strong>Selected</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-checkbox type="checkbox" checked />
-          Text
-        </label>
-
-        <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>
-
-        <strong>Focus</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-checkbox type="checkbox" id="Focus" />
-          Text
-        </label>
-
-        <strong>Error</strong>
-        <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>
-
-        <strong>Disabled</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-checkbox type="checkbox" disabled />
-          Text
-        </label>
-
-        <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>
-
-        <strong>Indeterminate</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <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> = {
+export const CardsDefault: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
     template: `
       <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Primary</p>
+          <p tedi-text modifiers="bold">Primary</p>
           <tedi-checkbox-card-group>
             <label tedi-checkbox-card variant="primary">
               <input tedi-checkbox type="checkbox" checked />
-              Text
+              Kartul
             </label>
             <label tedi-checkbox-card variant="primary">
               <input tedi-checkbox type="checkbox" />
-              Text
+              Peet
             </label>
             <label tedi-checkbox-card variant="primary">
               <input tedi-checkbox type="checkbox" />
-              Text
+              Kapsas
             </label>
           </tedi-checkbox-card-group>
         </tedi-col>
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Secondary</p>
+          <p tedi-text modifiers="bold">Secondary</p>
           <tedi-checkbox-card-group>
             <label tedi-checkbox-card variant="secondary">
               <input tedi-checkbox type="checkbox" checked />
-              Text
+              Kartul
             </label>
             <label tedi-checkbox-card variant="secondary">
               <input tedi-checkbox type="checkbox" />
-              Text
+              Peet
             </label>
             <label tedi-checkbox-card variant="secondary">
               <input tedi-checkbox type="checkbox" />
-              Text
+              Kapsas
             </label>
           </tedi-checkbox-card-group>
         </tedi-col>
@@ -556,276 +484,498 @@ export const CheckboxCards: StoryObj<CheckboxComponent> = {
 /**
  * Checkbox cards with a description below the label text.
  */
-export const CheckboxCardsWithDescription: StoryObj<CheckboxComponent> = {
+export const CardsWithDescription: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
+    styles: [
+      `
+        .cards-with-description__stretch {
+          display: flex;
+        }
+
+        .cards-with-description__stretch label[tedi-checkbox-card] {
+          flex: 1 1 12rem;
+        }
+      `,
+    ],
     template: `
-      <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Primary</p>
-          <tedi-checkbox-card-group>
-            <label tedi-checkbox-card variant="primary">
-              <input tedi-checkbox type="checkbox" checked />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-checkbox-card variant="primary">
-              <input tedi-checkbox type="checkbox" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-checkbox-card variant="primary">
-              <input tedi-checkbox type="checkbox" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-          </tedi-checkbox-card-group>
-        </tedi-col>
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Secondary</p>
-          <tedi-checkbox-card-group>
-            <label tedi-checkbox-card variant="secondary">
-              <input tedi-checkbox type="checkbox" checked />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-checkbox-card variant="secondary">
-              <input tedi-checkbox type="checkbox" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-checkbox-card variant="secondary">
-              <input tedi-checkbox type="checkbox" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-          </tedi-checkbox-card-group>
-        </tedi-col>
-      </tedi-row>
+    <div class="flex flex-column gap-4">
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Primary</p>
+        <tedi-checkbox-card-group class="cards-with-description__stretch">
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" checked />
+            Kartul
+            <tedi-feedback-text text="Tärkliserikas mugulköögivili, mida kasutatakse laialt toiduks." />
+          </label>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" />
+            Peet
+            <tedi-feedback-text text="Magusamaitseline juurvili, mida süüakse nii toorelt kui ka kuumtöödeldult." />
+          </label>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" />
+            Kapsas
+            <tedi-feedback-text text="Lehtköögivili, mille tihedaid lehti kasutatakse mitmesugustes roogades." />
+          </label>
+        </tedi-checkbox-card-group>
+      </div>
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Secondary</p>
+        <tedi-checkbox-card-group class="cards-with-description__stretch">
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" checked />
+            Kartul
+            <tedi-feedback-text text="Tärkliserikas mugulköögivili, mida kasutatakse laialt toiduks." />
+          </label>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" />
+            Peet
+            <tedi-feedback-text text="Magusamaitseline juurvili, mida süüakse nii toorelt kui ka kuumtöödeldult." />
+          </label>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" />
+            Kapsas
+            <tedi-feedback-text text="Lehtköögivili, mille tihedaid lehti kasutatakse mitmesugustes roogades." />
+          </label>
+        </tedi-checkbox-card-group>
+      </div>
+    </div>
     `,
   }),
 };
 
 /**
- * Checkbox cards with icons before the label text.
+ * Checkbox cards with icons before the label text, with and without a description.
  */
-export const CheckboxCardsWithIcons: StoryObj<CheckboxComponent> = {
+export const CardsWithIcons: StoryObj<CheckboxComponent> = {
   render: (args) => ({
     props: args,
+    styles: [
+      `
+        .cards-with-icons__stretch {
+          display: flex;
+        }
+
+        .cards-with-icons__stretch label[tedi-checkbox-card] {
+          flex: 1 1 12rem;
+        }
+      `,
+    ],
     template: `
+    <div class="flex flex-column gap-4">
       <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>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>
-        </tedi-col>
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>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>
-        </tedi-col>
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Primary with description</p>
+          <p tedi-text modifiers="bold">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
-              <tedi-feedback-text text="Description" />
+              <tedi-icon name="directions_subway" [size]="18" />
+              Trammiga
             </label>
             <label tedi-checkbox-card variant="primary">
               <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="stethoscope" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
+              <tedi-icon name="directions_walk" [size]="18" />
+              Jalgsi
             </label>
             <label tedi-checkbox-card variant="primary">
               <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="home" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
+              <tedi-icon name="directions_car" [size]="18" />
+              Autoga
             </label>
           </tedi-checkbox-card-group>
         </tedi-col>
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Secondary with description</p>
+          <p tedi-text modifiers="bold">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
-              <tedi-feedback-text text="Description" />
+              <tedi-icon name="directions_subway" [size]="18" />
+              Trammiga
             </label>
             <label tedi-checkbox-card variant="secondary">
               <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="stethoscope" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
+              <tedi-icon name="directions_walk" [size]="18" />
+              Jalgsi
             </label>
             <label tedi-checkbox-card variant="secondary">
               <input tedi-checkbox type="checkbox" />
-              <tedi-icon name="home" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
+              <tedi-icon name="directions_car" [size]="18" />
+              Autoga
             </label>
           </tedi-checkbox-card-group>
         </tedi-col>
       </tedi-row>
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Primary with description</p>
+        <tedi-checkbox-card-group class="cards-with-icons__stretch">
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" checked />
+            <tedi-icon name="directions_subway" [size]="18" />
+            Trammiga
+            <tedi-feedback-text text="Soovitatud variant, vähendab ummikuid" />
+          </label>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" />
+            <tedi-icon name="directions_walk" [size]="18" />
+            Jalgsi
+            <tedi-feedback-text text="Soovitatud variant, vähendab ummikuid" />
+          </label>
+          <label tedi-checkbox-card variant="primary">
+            <input tedi-checkbox type="checkbox" />
+            <tedi-icon name="directions_car" [size]="18" />
+            Autoga
+            <tedi-feedback-text text="Kui soovid kiiremini kohale jõuda, tekitab ummikuid" />
+          </label>
+        </tedi-checkbox-card-group>
+      </div>
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Secondary with description</p>
+        <tedi-checkbox-card-group class="cards-with-icons__stretch">
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" checked />
+            <tedi-icon name="directions_subway" [size]="18" />
+            Trammiga
+            <tedi-feedback-text text="Soovitatud variant, vähendab ummikuid" />
+          </label>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" />
+            <tedi-icon name="directions_walk" [size]="18" />
+            Jalgsi
+            <tedi-feedback-text text="Soovitatud variant, vähendab ummikuid" />
+          </label>
+          <label tedi-checkbox-card variant="secondary">
+            <input tedi-checkbox type="checkbox" />
+            <tedi-icon name="directions_car" [size]="18" />
+            Autoga
+            <tedi-feedback-text text="Kui soovid kiiremini kohale jõuda, tekitab ummikuid" />
+          </label>
+        </tedi-checkbox-card-group>
+      </div>
+    </div>
     `,
   }),
 };
 
+type GridPlace = [row: number, column: number | string];
+
 /**
- * All visual states of the checkbox card component for both primary and secondary variants.
+ * Lays a state matrix out on a grid whose columns never wrap into the row labels.
+ * Every item gets a desktop and a mobile grid position, swapped below `md`:
+ * `mobileLayout="rows"` puts each row label on its own line above cells that
+ * share the width;
+ * `mobileLayout="columns"` splits the matrix into one section per column.
+ * Each cell is rendered once, so input ids and radio names stay unique. Card
+ * groups in error cells (`.state-matrix__error`) keep their natural width, while
+ * the message may widen the column to stay on one line, and wraps only when the
+ * matrix runs out of room. `desktopGrid` sets a minimum column width, row height
+ * and gaps for the desktop layout.
  */
-export const CheckboxCardStates: StoryObj<CheckboxComponent> = {
+const stateMatrix = ({
+  headers,
+  rows,
+  alignItems = "start",
+  mobileLayout = "rows",
+  desktopGrid,
+}: {
+  headers: string[];
+  rows: { label: string; cells: string[] }[];
+  alignItems?: "start" | "center";
+  mobileLayout?: "rows" | "columns";
+  desktopGrid?: {
+    columnWidth: string;
+    rowHeight: string;
+    columnGap: string;
+    rowGap: string;
+  };
+}) => {
+  const columns = headers.length;
+  const sectionSize = rows.length + 1;
+  const byColumns = mobileLayout === "columns";
+
+  const item = (
+    tag: string,
+    content: string,
+    desktop: GridPlace | null,
+    mobile: GridPlace | null,
+    className = "",
+  ) => {
+    const classes = [
+      className,
+      desktop ? "" : "state-matrix__mobile-only",
+      mobile ? "" : "state-matrix__desktop-only",
+    ].join(" ");
+    const style = [
+      desktop ? `--d-row: ${desktop[0]}; --d-col: ${desktop[1]};` : "",
+      mobile ? `--m-row: ${mobile[0]}; --m-col: ${mobile[1]};` : "",
+    ].join(" ");
+    return `<${tag} class="${classes.trim()}" style="${style.trim()}">${content}</${tag}>`;
+  };
+
+  const headerItems = headers.map((header, c) =>
+    item(
+      "strong",
+      header,
+      [1, c + 2],
+      byColumns ? [c * sectionSize + 1, "1 / -1"] : [1, c + 1],
+      byColumns && c > 0 ? "state-matrix__section-title" : "",
+    ),
+  );
+
+  const rowItems = rows.map(({ label, cells }, r) => {
+    const labels = byColumns
+      ? headers.map((_, c) =>
+          item("strong", label, c === 0 ? [r + 2, 1] : null, [
+            c * sectionSize + r + 2,
+            1,
+          ]),
+        )
+      : [
+          item(
+            "strong",
+            label,
+            [r + 2, 1],
+            [2 * r + 2, "1 / -1"],
+            "state-matrix__row-label",
+          ),
+        ];
+    const cellItems = cells.map((cell, c) =>
+      item(
+        "div",
+        cell,
+        [r + 2, c + 2],
+        byColumns ? [c * sectionSize + r + 2, 2] : [2 * r + 3, c + 1],
+      ),
+    );
+    return [...labels, ...cellItems].join("");
+  });
+
+  return `
+    <div class="state-matrix state-matrix--${mobileLayout} ${desktopGrid ? "state-matrix--fixed" : ""}" style="--_columns: ${columns}; --_align: ${alignItems}; ${desktopGrid ? `--_column-width: ${desktopGrid.columnWidth}; --_row-height: ${desktopGrid.rowHeight}; --_column-gap: ${desktopGrid.columnGap}; --_row-gap: ${desktopGrid.rowGap};` : ""}">
+      <div class="state-matrix__grid">
+        ${item("span", "", [1, 1], null)}
+        ${headerItems.join("")}
+        ${rowItems.join("")}
+      </div>
+    </div>`;
+};
+
+const stateMatrixStyles = [
+  `
+  .state-matrix__grid {
+    display: grid;
+    grid-template-columns: max-content repeat(
+        var(--_columns),
+        minmax(min-content, max-content)
+      );
+    gap: var(--layout-grid-gutters-16) var(--layout-grid-gutters-24);
+    align-items: var(--_align);
+  }
+
+  .state-matrix__grid > * {
+    grid-row: var(--d-row);
+    grid-column: var(--d-col);
+  }
+
+  .state-matrix__grid > .state-matrix__mobile-only {
+    display: none;
+  }
+
+  .state-matrix__error > :first-child {
+    width: max-content;
+  }
+
+  @media (min-width: 48rem) {
+    .state-matrix--fixed .state-matrix__grid {
+      grid-template-columns:
+        minmax(var(--_column-width), max-content)
+        repeat(var(--_columns), minmax(var(--_column-width), max-content));
+      grid-auto-rows: minmax(var(--_row-height), auto);
+      gap: var(--_row-gap) var(--_column-gap);
+    }
+  }
+
+  @media (max-width: 47.98rem) {
+    .state-matrix--rows .state-matrix__grid {
+      grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
+    }
+
+    .state-matrix--columns .state-matrix__grid {
+      grid-template-columns: max-content minmax(0, 1fr);
+    }
+
+    .state-matrix__grid > * {
+      grid-row: var(--m-row);
+      grid-column: var(--m-col);
+    }
+
+    .state-matrix__grid > .state-matrix__mobile-only {
+      display: block;
+    }
+
+    .state-matrix__grid > .state-matrix__desktop-only {
+      display: none;
+    }
+
+    .state-matrix__row-label,
+    .state-matrix__section-title {
+      margin-top: var(--layout-grid-gutters-08);
+    }
+  }
+`,
+];
+
+const stateRows: {
+  label: string;
+  id: string;
+  attrs?: string;
+  labelAttrs?: string;
+  feedback?: boolean;
+  unselected?: boolean;
+}[] = [
+  { label: "Default", id: "Default" },
+  { label: "Hover", id: "Hover" },
+  { label: "Active", id: "Active" },
+  { label: "Focus", id: "Focus" },
+  { label: "Disabled", id: "Disabled", attrs: "disabled" },
+  { label: "Error", id: "Error", attrs: '[invalid]="true"', feedback: true },
+  { label: "Mandatory", id: "Mandatory", labelAttrs: '[required]="true"' },
+  {
+    label: "Indeterminate",
+    id: "Indeterminate",
+    attrs: '[indeterminate]="true"',
+    unselected: false,
+  },
+];
+
+const stateCell = (
+  { id, attrs = "", labelAttrs = "", feedback }: (typeof stateRows)[number],
+  selected: boolean,
+) => `
+  <div>
+    <label tedi-label color="primary" class="flex align-items-center" ${labelAttrs}>
+      <input tedi-checkbox type="checkbox" style="margin-right: var(--form-checkbox-radio-inner-spacing)" id="${id}${selected ? "Selected" : "Unselected"}" ${selected ? "checked" : ""} ${attrs} />
+      Tekst
+    </label>
+    ${feedback ? '<tedi-feedback-text text="Kohustuslik väli" type="error" />' : ""}
+  </div>`;
+
+/** Gives the States matrix more room between columns and rows on desktop. */
+const statesDesktopGrid = {
+  columnWidth: "10.375rem",
+  rowHeight: "2.5rem",
+  columnGap: "var(--layout-grid-gutters-16)",
+  rowGap: "var(--layout-grid-gutters-08)",
+};
+
+export const States: StoryObj<CheckboxComponent> = {
   parameters: {
     pseudo: {
-      hover: ["#PrimaryHover", "#SecondaryHover"],
-      active: ["#PrimaryActive", "#SecondaryActive"],
-      focusVisible: ["#PrimaryFocus", "#SecondaryFocus"],
+      hover: ["#HoverUnselected", "#HoverSelected"],
+      active: ["#ActiveUnselected", "#ActiveSelected"],
+      focusVisible: ["#FocusUnselected", "#FocusSelected"],
     },
   },
   render: (args) => ({
     props: args,
-    template: `
-      <tedi-row [cols]="3" [gapY]="3">
-        <tedi-col></tedi-col>
-        <tedi-col><strong>Primary</strong></tedi-col>
-        <tedi-col><strong>Secondary</strong></tedi-col>
+    template: stateMatrix({
+      headers: ["Unselected", "Selected"],
+      alignItems: "center",
+      desktopGrid: statesDesktopGrid,
+      rows: stateRows.map((row) => ({
+        label: row.label,
+        cells: [
+          row.unselected === false ? "" : stateCell(row, false),
+          stateCell(row, true),
+        ],
+      })),
+    }),
+    styles: stateMatrixStyles,
+  }),
+};
 
-        <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>
+const cardStates: { label: string; attrs?: string }[] = [
+  { label: "Default" },
+  { label: "Hover" },
+  { label: "Active" },
+  { label: "Focus" },
+  { label: "Disabled", attrs: "disabled" },
+];
 
-        <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>
+const cardStateId = (variant: string, state: string, selected: boolean) =>
+  `${variant}${state}${selected ? "Selected" : "Unselected"}`;
 
-        <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>
+const cardStatesPseudo = (variant: string) => {
+  const ids = (state: string) =>
+    [false, true].map(
+      (selected) => `#${cardStateId(variant, state, selected)}`,
+    );
+  return {
+    hover: ids("Hover"),
+    active: ids("Active"),
+    focusVisible: ids("Focus"),
+  };
+};
 
-        <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>
+const capitalize = (value: string) =>
+  value.charAt(0).toUpperCase() + value.slice(1);
 
-        <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>
+const cardStatesTemplate = (variant: "primary" | "secondary") => {
+  const card = (selected: boolean, id = "", attrs = "") => `
+          <label tedi-checkbox-card variant="${variant}">
+            <input tedi-checkbox type="checkbox" ${id ? `id="${id}"` : ""} ${selected ? "checked" : ""} ${attrs} />
+            Tekst
+          </label>`;
+  const errorGroup = (selected: boolean, message: string) => `
+        <div class="flex flex-column gap-1 state-matrix__error">
+          <tedi-checkbox-card-group>${card(selected)}${card(false)}
+          </tedi-checkbox-card-group>
+          <tedi-feedback-text text="${message}" type="error" />
+        </div>`;
 
-        <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>
+  return stateMatrix({
+    headers: ["Unselected", "Selected"],
+    alignItems: "center",
+    mobileLayout: "columns",
+    rows: [
+      ...cardStates.map(({ label, attrs }) => ({
+        label,
+        cells: [false, true].map((selected) =>
+          card(
+            selected,
+            cardStateId(capitalize(variant), label, selected),
+            attrs,
+          ),
+        ),
+      })),
+      {
+        label: "Error",
+        cells: [
+          errorGroup(false, "Kohustuslik on valida vähemalt 1 väärtus"),
+          errorGroup(true, "Kohustuslik on valida vähemalt 2 väärtust"),
+        ],
+      },
+    ],
+  });
+};
 
-        <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>
-    `,
+export const CardStatesPrimary: StoryObj<CheckboxComponent> = {
+  parameters: { pseudo: cardStatesPseudo("Primary") },
+  render: (args) => ({
+    props: args,
+    template: cardStatesTemplate("primary"),
+    styles: stateMatrixStyles,
   }),
 };
 
+export const CardStatesSecondary: StoryObj<CheckboxComponent> = {
+  parameters: { pseudo: cardStatesPseudo("Secondary") },
+  render: (args) => ({
+    props: args,
+    template: cardStatesTemplate("secondary"),
+    styles: stateMatrixStyles,
+  }),
+};
 /**
  * The group supports two form-binding modes:
  *
@@ -856,54 +1006,54 @@ export const WithReactiveForms: StoryObj<CheckboxComponent> = {
       template: `
         <tedi-row cols="1" [gapY]="3">
           <tedi-col>
-            <tedi-checkbox-group label="Tags" [formControl]="tagsControl">
+            <tedi-checkbox-group label="Sildid" [formControl]="tagsControl">
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-checkbox type="checkbox" value="urgent" />
-                Urgent
+                Kiireloomuline
               </label>
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-checkbox type="checkbox" value="review" />
-                Review
+                Ülevaatamisel
               </label>
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-checkbox type="checkbox" value="draft" disabled />
-                Draft
+                Mustand
               </label>
             </tedi-checkbox-group>
           </tedi-col>
 
           <tedi-col>
-            <tedi-checkbox-group label="Features" [formControl]="featuresControl">
+            <tedi-checkbox-group label="Funktsioonid" [formControl]="featuresControl">
               <tedi-checkbox-card-group>
                 <label tedi-checkbox-card variant="primary">
                   <input tedi-checkbox type="checkbox" value="analytics" />
-                  Analytics
+                  Analüütika
                 </label>
                 <label tedi-checkbox-card variant="primary">
                   <input tedi-checkbox type="checkbox" value="export" />
-                  Export
+                  Eksport
                 </label>
                 <label tedi-checkbox-card variant="primary">
                   <input tedi-checkbox type="checkbox" value="audit-log" />
-                  Audit log
+                  Auditilogi
                 </label>
               </tedi-checkbox-card-group>
             </tedi-checkbox-group>
           </tedi-col>
 
           <tedi-col>
-            <tedi-checkbox-group label="Permissions">
+            <tedi-checkbox-group label="Õigused">
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-checkbox type="checkbox" [formControl]="readControl" />
-                Read
+                Lugemine
               </label>
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-checkbox type="checkbox" [formControl]="writeControl" />
-                Write
+                Kirjutamine
               </label>
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-checkbox type="checkbox" [formControl]="adminControl" />
-                Admin
+                Administraator
               </label>
             </tedi-checkbox-group>
           </tedi-col>
diff --git a/src/tedi/components/form/date-picker/date-picker.component.scss b/src/tedi/components/form/date-picker/date-picker.component.scss
index b6e12f7bb..5795bc9ee 100644
--- a/src/tedi/components/form/date-picker/date-picker.component.scss
+++ b/src/tedi/components/form/date-picker/date-picker.component.scss
@@ -308,16 +308,16 @@ tedi-date-picker {
     padding: var(--form-checkbox-radio-card-radio-padding-y)
       var(--form-checkbox-radio-card-radio-padding-x);
     font-size: var(--body-regular-size);
-    color: var(--form-checkbox-radio-card-primary-default-text);
-    background: var(--form-checkbox-radio-card-secondary-default-background);
+    color: var(--form-choice-card-primary-unselected-text-default);
+    background: var(--form-choice-card-secondary-unselected-background-default);
     border: var(--tedi-borders-01) solid
-      var(--form-checkbox-radio-card-secondary-default-border);
+      var(--form-choice-card-secondary-unselected-border-default);
     border-radius: var(--form-checkbox-radio-card-radius);
 
     &:hover {
-      color: var(--form-checkbox-radio-card-secondary-hover-text);
-      background: var(--form-checkbox-radio-card-secondary-hover-background);
-      border-color: var(--form-checkbox-radio-card-secondary-hover-border);
+      color: var(--form-choice-card-secondary-unselected-text-hover);
+      background: var(--form-choice-card-secondary-unselected-background-hover);
+      border-color: var(--form-choice-card-secondary-unselected-border-hover);
     }
 
     &:focus-visible {
@@ -326,34 +326,34 @@ tedi-date-picker {
     }
 
     &:disabled {
-      color: var(--form-checkbox-radio-card-secondary-disabled-default-text);
+      color: var(--form-choice-card-secondary-unselected-text-disabled);
       cursor: not-allowed;
       background: var(
-        --form-checkbox-radio-card-secondary-disabled-default-background
+        --form-choice-card-secondary-unselected-background-disabled
       );
       border-color: var(
-        --form-checkbox-radio-card-secondary-disabled-default-border
+        --form-choice-card-secondary-unselected-border-disabled
       );
     }
 
     &--selected {
-      color: var(--form-checkbox-radio-card-secondary-selected-text);
-      background: var(--form-checkbox-radio-card-secondary-selected-background);
-      border-color: var(--form-checkbox-radio-card-secondary-selected-border);
+      color: var(--form-choice-card-secondary-selected-text-default);
+      background: var(--form-choice-card-secondary-selected-background-default);
+      border-color: var(--form-choice-card-secondary-selected-border-default);
       box-shadow: 0 0 0 1px
-        var(--form-checkbox-radio-card-secondary-selected-border);
+        var(--form-choice-card-secondary-selected-border-default);
 
       &:disabled {
-        color: var(--form-checkbox-radio-card-secondary-disabled-selected-text);
+        color: var(--form-choice-card-secondary-selected-text-disabled);
         cursor: not-allowed;
         background: var(
-          --form-checkbox-radio-card-secondary-disabled-selected-background
+          --form-choice-card-secondary-selected-background-disabled
         );
         border-color: var(
-          --form-checkbox-radio-card-secondary-disabled-selected-border
+          --form-choice-card-secondary-selected-border-disabled
         );
         box-shadow: 0 0 0 1px
-          var(--form-checkbox-radio-card-secondary-disabled-selected-border);
+          var(--form-choice-card-secondary-selected-border-disabled);
       }
     }
   }
diff --git a/src/tedi/components/form/radio-card-group/radio-card-group.component.ts b/src/tedi/components/form/radio-card-group/radio-card-group.component.ts
index bcf2c4a04..1dc5cebf0 100644
--- a/src/tedi/components/form/radio-card-group/radio-card-group.component.ts
+++ b/src/tedi/components/form/radio-card-group/radio-card-group.component.ts
@@ -25,4 +25,12 @@ export class RadioCardGroupComponent {
    * @default false
    */
   readonly grouped = input<boolean>(false);
+
+  /**
+   * Gives primary cards a border in the unselected state. Child
+   * `tedi-radio-card` instances inherit this. Has no effect on grouped cards,
+   * which always have a border.
+   * @default false
+   */
+  readonly bordered = input<boolean>(false);
 }
diff --git a/src/tedi/components/form/radio-card/radio-card.component.scss b/src/tedi/components/form/radio-card/radio-card.component.scss
index 43c975fa9..16146c7cf 100644
--- a/src/tedi/components/form/radio-card/radio-card.component.scss
+++ b/src/tedi/components/form/radio-card/radio-card.component.scss
@@ -1,7 +1,18 @@
+$focus-ring:
+  0 0 0 var(--tedi-borders-01)
+    var(--general-effect-colors-focus-outset-inner-shadow),
+  0 0 0 var(--tedi-borders-03)
+    var(--general-effect-colors-focus-outset-outer-shadow);
+$selected-border-inset: calc(
+  var(--general-border-width-selected) - var(--tedi-borders-01)
+);
+
 label[tedi-radio-card] {
   --_card-bg: transparent;
   --_card-text: inherit;
   --_card-border: transparent;
+  --_card-inset: 0 0 0 0 transparent;
+  --_card-ring: 0 0 0 0 transparent;
 
   display: inline-flex;
   flex-direction: column;
@@ -20,8 +31,9 @@ label[tedi-radio-card] {
   color: var(--_card-text);
   cursor: pointer;
   background-color: var(--_card-bg);
-  border: 1px solid var(--_card-border);
+  border: var(--tedi-borders-01) solid var(--_card-border);
   border-radius: var(--form-checkbox-radio-card-radius);
+  box-shadow: var(--_card-inset), var(--_card-ring);
 
   [tedi-text],
   tedi-icon {
@@ -47,6 +59,16 @@ label[tedi-radio-card] {
     color: inherit;
   }
 
+  // An icon before the label pushes the label text right by the icon and one more
+  // gap, so the description lines up with the text instead of the icon. The icon
+  // keeps its 18px size while the indicator grows on small screens
+  &:has(> .tedi-radio-card__content > tedi-icon) > .tedi-feedback-text {
+    padding-left: calc(
+      var(--form-checkbox-radio-size-responsive) + var(--icon-03) +
+        var(--form-checkbox-radio-card-inner-spacing) * 2
+    );
+  }
+
   &.tedi-radio-card--hide-indicator {
     input[tedi-radio] {
       position: absolute;
@@ -63,27 +85,14 @@ label[tedi-radio-card] {
     > .tedi-feedback-text {
       padding-left: 0;
     }
-  }
 
-  input[tedi-radio] {
-    &:not(:disabled):hover {
-      box-shadow: none;
-    }
-  }
-
-  &:has(input:focus-visible) {
-    outline: var(--tedi-borders-02) solid var(--tedi-primary-500);
-    outline-offset: var(--tedi-borders-01);
-
-    input[tedi-radio]:focus-visible {
-      outline: none;
+    &:has(> .tedi-radio-card__content > tedi-icon) > .tedi-feedback-text {
+      padding-left: calc(
+        var(--icon-03) + var(--form-checkbox-radio-card-inner-spacing)
+      );
     }
   }
 
-  &:has(input:disabled) {
-    cursor: not-allowed;
-  }
-
   &.tedi-radio-card--grouped {
     border-radius: 0;
 
@@ -110,133 +119,244 @@ label[tedi-radio-card] {
     }
   }
 
+  // The focus ring goes on the card, not on the indicator
+  &:has(input:focus-visible) {
+    --_card-ring: #{$focus-ring};
+
+    input[tedi-radio][type="radio"] {
+      --_radio-ring: 0 0 0 0 transparent;
+    }
+  }
+
+  &:has(input:disabled) {
+    cursor: not-allowed;
+  }
+
   &.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-bg: var(--form-choice-card-primary-unselected-background-default);
+    --_card-text: var(--form-choice-card-primary-unselected-text-default);
     --_card-border: var(
-      --form-checkbox-radio-card-primary-default-border-separate
+      --form-choice-card-primary-unselected-border-borderless
     );
 
-    &.tedi-radio-card--grouped {
-      --_card-border: var(
-        --form-checkbox-radio-card-primary-default-border-group
-      );
+    &:has(input:hover:not(:disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-primary-unselected-background-hover);
+      --_card-text: var(--form-choice-card-primary-unselected-text-hover);
+      --_card-border: var(--form-choice-card-primary-unselected-border-hover);
+    }
+
+    &:has(input:active:not(:disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-primary-unselected-background-active);
+      --_card-text: var(--form-choice-card-primary-unselected-text-active);
+      --_card-border: var(--form-choice-card-primary-unselected-border-active);
+    }
+
+    &:has(input:focus-visible:not(:hover, :active, :disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-primary-unselected-background-focus);
+      --_card-text: var(--form-choice-card-primary-unselected-text-focus);
     }
 
     &: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
-      );
+      --_card-bg: var(--form-choice-card-primary-selected-background-default);
+      --_card-text: var(--form-choice-card-primary-selected-text-default);
+      --_card-border: var(--_card-bg);
+
+      input[tedi-radio][type="radio"] {
+        --_radio-bg: var(--form-choice-inverted-indicator-default);
+        --_radio-border: var(--form-choice-radio-selected-border-inverted);
+        --_radio-dot: var(--form-choice-radio-selected-indicator-inverted);
+      }
+    }
 
-      &.tedi-radio-card--grouped {
-        --_card-border: var(
-          --form-checkbox-radio-card-primary-selected-border-group
-        );
+    &:has(input:checked:hover:not(:disabled)) {
+      --_card-bg: var(--form-choice-card-primary-selected-background-hover);
+      --_card-text: var(--form-choice-card-primary-selected-text-hover);
+
+      input[tedi-radio][type="radio"] {
+        --_radio-bg: var(--form-choice-inverted-indicator-hover);
       }
+    }
 
-      input[tedi-radio]:not(:disabled) {
-        background-color: transparent;
-        border-color: var(
-          --form-checkbox-radio-default-border-selected-inverted
-        );
+    &:has(input:checked:active:not(:disabled)) {
+      --_card-bg: var(--form-choice-card-primary-selected-background-active);
+      --_card-text: var(--form-choice-card-primary-selected-text-active);
 
-        &::before {
-          background: var(
-            --form-checkbox-radio-default-check-indicator-default
-          );
-        }
+      input[tedi-radio][type="radio"] {
+        --_radio-bg: var(--form-choice-inverted-indicator-active);
       }
     }
 
-    &: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:checked:focus-visible:not(:hover, :active, :disabled)) {
+      --_card-bg: var(--form-choice-card-primary-selected-background-focus);
+      --_card-text: var(--form-choice-card-primary-selected-text-focus);
+
+      input[tedi-radio][type="radio"] {
+        --_radio-bg: var(--form-choice-inverted-indicator-focus);
+      }
     }
 
     &: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
+        --form-choice-card-primary-unselected-background-disabled
       );
+      --_card-text: var(--form-choice-card-primary-unselected-text-disabled);
       --_card-border: var(
-        --form-checkbox-radio-card-primary-disabled-default-background
+        --form-choice-card-primary-unselected-border-disabled
       );
     }
 
     &: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
-      );
+      --_card-bg: var(--form-choice-card-primary-selected-background-disabled);
+      --_card-text: var(--form-choice-card-primary-selected-text-disabled);
+      --_card-border: var(--_card-bg);
+
+      input[tedi-radio][type="radio"] {
+        --_radio-bg: var(--form-choice-inverted-indicator-disabled);
+        --_radio-border: var(--form-choice-radio-selected-border-inverted);
+        --_radio-dot: var(--form-choice-radio-selected-indicator-inverted);
+      }
+    }
+
+    &.tedi-radio-card--bordered {
+      --_card-border: var(--form-choice-card-primary-unselected-border-default);
 
-      input[tedi-radio] {
-        background-color: transparent;
-        border-color: var(
-          --form-checkbox-radio-default-border-selected-inverted
+      &:has(input:hover:not(:disabled, :checked)) {
+        --_card-border: var(--form-choice-card-primary-unselected-border-hover);
+      }
+
+      &:has(input:active:not(:disabled, :checked)) {
+        --_card-border: var(
+          --form-choice-card-primary-unselected-border-active
+        );
+      }
+
+      &:has(input:checked) {
+        --_card-border: var(--_card-bg);
+      }
+
+      &:has(input:disabled:not(:checked)) {
+        --_card-border: var(
+          --form-choice-card-primary-unselected-border-disabled
+        );
+      }
+    }
+
+    &.tedi-radio-card--grouped {
+      --_card-border: var(--form-choice-card-primary-unselected-border-default);
+
+      &:has(input:hover:not(:disabled, :checked)) {
+        --_card-border: var(
+          --form-choice-card-primary-unselected-border-group-hover
+        );
+      }
+
+      &:has(input:active:not(:disabled, :checked)) {
+        --_card-border: var(
+          --form-choice-card-primary-unselected-border-group-active
+        );
+      }
+
+      &:has(input:checked) {
+        --_card-border: var(--form-choice-card-primary-selected-border-default);
+      }
+
+      &:has(input:checked:hover:not(:disabled)) {
+        --_card-border: var(
+          --form-choice-card-primary-selected-border-group-hover
         );
+      }
 
-        &::before {
-          background: var(
-            --form-checkbox-radio-default-check-indicator-default
-          );
-        }
+      &:has(input:checked:active:not(:disabled)) {
+        --_card-border: var(
+          --form-choice-card-primary-selected-border-group-active
+        );
+      }
+
+      &:has(input:disabled:not(:checked)) {
+        --_card-border: var(
+          --form-choice-card-secondary-unselected-border-disabled
+        );
+      }
+
+      &:has(input:disabled:checked) {
+        --_card-border: var(
+          --form-choice-card-primary-selected-border-group-disabled
+        );
       }
     }
   }
 
   &.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);
+    --_card-bg: var(--form-choice-card-secondary-unselected-background-default);
+    --_card-text: var(--form-choice-card-secondary-unselected-text-default);
+    --_card-border: var(--form-choice-card-secondary-unselected-border-default);
+
+    &:has(input:hover:not(:disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-secondary-unselected-background-hover);
+      --_card-text: var(--form-choice-card-secondary-unselected-text-hover);
+      --_card-border: var(--form-choice-card-secondary-unselected-border-hover);
+    }
+
+    &:has(input:active:not(:disabled, :checked)) {
+      --_card-bg: var(
+        --form-choice-card-secondary-unselected-background-active
+      );
+      --_card-text: var(--form-choice-card-secondary-unselected-text-active);
+      --_card-border: var(
+        --form-choice-card-secondary-unselected-border-active
+      );
+    }
+
+    &:has(input:focus-visible:not(:hover, :active, :disabled, :checked)) {
+      --_card-bg: var(--form-choice-card-secondary-unselected-background-focus);
+      --_card-text: var(--form-choice-card-secondary-unselected-text-focus);
+      --_card-border: var(--form-choice-card-secondary-unselected-border-focus);
+    }
 
     &: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);
+      --_card-bg: var(--form-choice-card-secondary-selected-background-default);
+      --_card-text: var(--form-choice-card-secondary-selected-text-default);
+      --_card-border: var(--form-choice-card-secondary-selected-border-default);
+      --_card-inset: inset 0 0 0 #{$selected-border-inset} var(--_card-border);
+    }
+
+    &:has(input:checked:hover:not(:disabled)) {
+      --_card-bg: var(--form-choice-card-secondary-selected-background-hover);
+      --_card-text: var(--form-choice-card-secondary-selected-text-hover);
+      --_card-border: var(--form-choice-card-secondary-selected-border-hover);
+    }
 
-      box-shadow: inset 0 0 0 var(--tedi-borders-01) var(--_card-border);
+    &:has(input:checked:active:not(:disabled)) {
+      --_card-bg: var(--form-choice-card-secondary-selected-background-active);
+      --_card-text: var(--form-choice-card-secondary-selected-text-active);
+      --_card-border: var(--form-choice-card-secondary-selected-border-active);
     }
 
-    &: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:checked:focus-visible:not(:hover, :active, :disabled)) {
+      --_card-bg: var(--form-choice-card-secondary-selected-background-focus);
+      --_card-text: var(--form-choice-card-secondary-selected-text-focus);
+      --_card-border: var(--form-choice-card-secondary-selected-border-focus);
     }
 
     &: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
+        --form-choice-card-secondary-unselected-background-disabled
       );
+      --_card-text: var(--form-choice-card-secondary-unselected-text-disabled);
       --_card-border: var(
-        --form-checkbox-radio-card-secondary-disabled-default-border
+        --form-choice-card-secondary-unselected-border-disabled
       );
     }
 
     &: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
+        --form-choice-card-secondary-selected-background-disabled
       );
+      --_card-text: var(--form-choice-card-secondary-selected-text-disabled);
       --_card-border: var(
-        --form-checkbox-radio-card-secondary-disabled-selected-border
+        --form-choice-card-secondary-selected-border-disabled
       );
-
-      box-shadow: inset 0 0 0 var(--tedi-borders-01) var(--_card-border);
+      --_card-inset: inset 0 0 0 #{$selected-border-inset} var(--_card-border);
     }
   }
 }
diff --git a/src/tedi/components/form/radio-card/radio-card.component.spec.ts b/src/tedi/components/form/radio-card/radio-card.component.spec.ts
index 65396e6e6..1a5ab6db6 100644
--- a/src/tedi/components/form/radio-card/radio-card.component.spec.ts
+++ b/src/tedi/components/form/radio-card/radio-card.component.spec.ts
@@ -150,3 +150,50 @@ describe("RadioCardComponent — grouped inheritance", () => {
     expect(labelElement.classList).toContain("tedi-radio-card--grouped");
   });
 });
+
+@Component({
+  standalone: true,
+  imports: [RadioCardComponent, RadioCardGroupComponent, RadioComponent],
+  template: `
+    <tedi-radio-card-group [bordered]="groupBordered">
+      <label tedi-radio-card [bordered]="cardBordered">
+        <input tedi-radio type="radio" name="bordered-test" />
+        Option
+      </label>
+    </tedi-radio-card-group>
+  `,
+})
+class BorderedHostComponent {
+  groupBordered = false;
+  cardBordered = false;
+}
+
+describe("RadioCardComponent — bordered", () => {
+  let fixture: ComponentFixture<BorderedHostComponent>;
+  let labelElement: HTMLLabelElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [BorderedHostComponent] });
+    fixture = TestBed.createComponent(BorderedHostComponent);
+    fixture.detectChanges();
+    labelElement = fixture.nativeElement.querySelector(
+      "label[tedi-radio-card]",
+    );
+  });
+
+  it("should not be bordered by default", () => {
+    expect(labelElement.classList).not.toContain("tedi-radio-card--bordered");
+  });
+
+  it("should be bordered when parent group is bordered", () => {
+    fixture.componentInstance.groupBordered = true;
+    fixture.detectChanges();
+    expect(labelElement.classList).toContain("tedi-radio-card--bordered");
+  });
+
+  it("should be bordered when card's own input is set", () => {
+    fixture.componentInstance.cardBordered = true;
+    fixture.detectChanges();
+    expect(labelElement.classList).toContain("tedi-radio-card--bordered");
+  });
+});
diff --git a/src/tedi/components/form/radio-card/radio-card.component.ts b/src/tedi/components/form/radio-card/radio-card.component.ts
index 6b3cb7643..090c35bae 100644
--- a/src/tedi/components/form/radio-card/radio-card.component.ts
+++ b/src/tedi/components/form/radio-card/radio-card.component.ts
@@ -22,6 +22,7 @@ export type RadioCardVariant = "primary" | "secondary";
     "[class.tedi-radio-card--primary]": "variant() === 'primary'",
     "[class.tedi-radio-card--secondary]": "variant() === 'secondary'",
     "[class.tedi-radio-card--grouped]": "isGrouped()",
+    "[class.tedi-radio-card--bordered]": "isBordered()",
     "[class.tedi-radio-card--hide-indicator]": "!showIndicator()",
   },
 })
@@ -32,7 +33,7 @@ export class RadioCardComponent {
    */
   readonly variant = input<RadioCardVariant>("primary");
   /**
-   * Whether the card is part of a button-group style layout. Prefer setting
+   * Show the card as part of a button-group style layout. Prefer setting
    * `grouped` on the enclosing `tedi-radio-card-group` instead; this input
    * is retained for standalone cards outside a group.
    *
@@ -44,8 +45,16 @@ export class RadioCardComponent {
   readonly grouped = input(false);
 
   /**
-   * Whether to show the radio indicator.
-   * When false, the radio is visually hidden but remains functional.
+   * Gives a primary card a border in the unselected state. Can also be set on
+   * the enclosing `tedi-radio-card-group`. Only applies to `variant="primary"`;
+   * has no effect on grouped cards, which always have a border.
+   * @default false
+   */
+  readonly bordered = input(false);
+
+  /**
+   * Show the radio indicator.
+   * When false, the radio is visually hidden but stays functional.
    * @default true
    */
   readonly showIndicator = input<boolean>(true);
@@ -57,4 +66,8 @@ export class RadioCardComponent {
   readonly isGrouped = computed(
     () => this.grouped() || (this.cardGroup?.grouped() ?? false),
   );
+
+  readonly isBordered = computed(
+    () => this.bordered() || (this.cardGroup?.bordered() ?? false),
+  );
 }
diff --git a/src/tedi/components/form/radio-group/radio-group.component.spec.ts b/src/tedi/components/form/radio-group/radio-group.component.spec.ts
index f4251f337..07c217b3d 100644
--- a/src/tedi/components/form/radio-group/radio-group.component.spec.ts
+++ b/src/tedi/components/form/radio-group/radio-group.component.spec.ts
@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
 import { FormControl, ReactiveFormsModule } from "@angular/forms";
 import {
   RadioGroupComponent,
@@ -401,3 +402,60 @@ describe("RadioGroupComponent — card children", () => {
     expect(fixture.componentInstance.control.value).toBe("basic");
   });
 });
+
+describe("RadioGroupComponent — selection checks", () => {
+  it("should report whether a value is selected", () => {
+    TestBed.configureTestingModule({ imports: [FormControlHostComponent] });
+    const fixture = TestBed.createComponent(FormControlHostComponent);
+    fixture.componentInstance.control.setValue("active");
+    fixture.detectChanges();
+    const group: RadioGroupComponent = fixture.debugElement.query(
+      By.directive(RadioGroupComponent),
+    ).componentInstance;
+
+    expect(group.isSelected("active")).toBe(true);
+    expect(group.isSelected("done")).toBe(false);
+    expect(group.isSelected(undefined)).toBe(false);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [RadioGroupComponent, RadioComponent, ReactiveFormsModule],
+  template: `
+    <tedi-radio-group [formControl]="control">
+      <input tedi-radio type="radio" />
+    </tedi-radio-group>
+  `,
+})
+class MissingValueHostComponent {
+  control = new FormControl<string | null>(null);
+}
+
+describe("RadioGroupComponent — missing child value", () => {
+  it("should warn once per instance and drop the change", () => {
+    TestBed.configureTestingModule({ imports: [MissingValueHostComponent] });
+    const fixture = TestBed.createComponent(MissingValueHostComponent);
+    fixture.detectChanges();
+    const input = (
+      fixture.nativeElement as HTMLElement
+    ).querySelector<HTMLInputElement>('input[type="radio"]')!;
+    const warnSpy = jest.spyOn(console, "warn").mockImplementation(() => {});
+
+    input.checked = true;
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    fixture.detectChanges();
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("[tedi-radio-group]"),
+    );
+    expect(fixture.componentInstance.control.value).toBeNull();
+
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    fixture.detectChanges();
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(fixture.componentInstance.control.value).toBeNull();
+
+    warnSpy.mockRestore();
+  });
+});
diff --git a/src/tedi/components/form/radio/radio.component.scss b/src/tedi/components/form/radio/radio.component.scss
index a9ea879ce..73022f123 100644
--- a/src/tedi/components/form/radio/radio.component.scss
+++ b/src/tedi/components/form/radio/radio.component.scss
@@ -1,7 +1,19 @@
 @use "@tedi-design-system/core/bootstrap-utility/breakpoints";
 
+$focus-ring:
+  0 0 0 var(--tedi-borders-01)
+    var(--general-effect-colors-focus-outset-inner-shadow),
+  0 0 0 var(--tedi-borders-03)
+    var(--general-effect-colors-focus-outset-outer-shadow);
+$indicator-border-inset: calc(var(--tedi-borders-02) - var(--tedi-borders-01));
+
 input[tedi-radio][type="radio"] {
   --_radio-dot-size: calc(var(--form-checkbox-radio-size-responsive) * 0.67);
+  --_radio-bg: var(--form-choice-radio-unselected-background-default);
+  --_radio-border: var(--form-choice-radio-unselected-border-default);
+  --_radio-dot: transparent;
+  --_radio-inset: 0 0 0 0 transparent;
+  --_radio-ring: 0 0 0 0 transparent;
 
   position: relative;
   width: var(--form-checkbox-radio-size-responsive);
@@ -12,9 +24,10 @@ input[tedi-radio][type="radio"] {
   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);
+  background-color: var(--_radio-bg);
+  border: var(--tedi-borders-01) solid var(--_radio-border);
   border-radius: var(--form-checkbox-radio-indicator-radius-radio);
+  box-shadow: var(--_radio-inset), var(--_radio-ring);
 
   &::before {
     position: absolute;
@@ -23,63 +36,79 @@ input[tedi-radio][type="radio"] {
     width: var(--_radio-dot-size);
     height: var(--_radio-dot-size);
     content: "";
-    background: transparent;
+    background: var(--_radio-dot);
     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);
+  // Unselected
+  &:not(:disabled, :checked):hover {
+    --_radio-border: var(--form-choice-radio-unselected-border-hover);
+    --_radio-inset: inset 0 0 0 #{$indicator-border-inset} var(--_radio-border);
+  }
+
+  &:not(:disabled, :checked):active {
+    --_radio-border: var(--form-choice-radio-unselected-border-active);
+    --_radio-inset: inset 0 0 0 #{$indicator-border-inset} var(--_radio-border);
   }
 
-  &:not(:disabled):active {
-    border-color: var(--form-checkbox-radio-default-border-active);
-    box-shadow: none;
+  &:focus-visible:not(:disabled) {
+    --_radio-ring: #{$focus-ring};
 
-    &::before {
-      background: var(--form-checkbox-radio-default-background-active);
-    }
+    outline: none;
   }
 
-  &:not(:checked):disabled {
+  &:focus-visible:not(:disabled, :checked) {
+    --_radio-border: var(--form-choice-radio-unselected-border-focus);
+  }
+
+  &:disabled:not(:checked) {
+    --_radio-bg: var(--form-choice-radio-unselected-background-disabled);
+    --_radio-border: var(--form-choice-radio-unselected-border-disabled);
+
     cursor: not-allowed;
-    background-color: var(--form-general-background-disabled);
-    border-color: var(--form-general-border-disabled);
   }
 
+  // Selected
   &:checked {
-    border-color: var(--form-checkbox-radio-default-border-selected);
+    --_radio-bg: var(--form-choice-radio-selected-background-default);
+    --_radio-border: var(--form-choice-radio-selected-border-default);
+    --_radio-dot: var(--form-choice-radio-selected-indicator-default);
 
-    &::before {
-      background: var(--form-checkbox-radio-default-background-selected);
+    &:not(:disabled):hover {
+      --_radio-border: var(--form-choice-radio-selected-border-hover);
+      --_radio-dot: var(--form-choice-radio-selected-indicator-hover);
     }
 
-    &:disabled {
-      cursor: not-allowed;
-      border-color: var(--form-checkbox-radio-default-border-selected-disabled);
+    &:not(:disabled):active {
+      --_radio-border: var(--form-choice-radio-selected-border-active);
+      --_radio-dot: var(--form-choice-radio-selected-indicator-active);
+    }
 
-      &::before {
-        background: var(--form-checkbox-radio-default-background-selected-disabled);
-      }
+    &:focus-visible:not(:disabled, :hover, :active) {
+      --_radio-border: var(--form-choice-radio-selected-border-focus);
+      --_radio-dot: var(--form-choice-radio-selected-indicator-focus);
     }
-  }
 
-  &:focus-visible {
-    outline: var(--tedi-borders-02) solid var(--tedi-primary-500);
-    outline-offset: var(--tedi-borders-01);
+    &:disabled {
+      --_radio-border: var(--form-choice-radio-selected-border-disabled);
+      --_radio-dot: var(--form-choice-radio-selected-indicator-disabled);
+
+      cursor: not-allowed;
+    }
   }
 
+  // Error (selected state keeps its regular colors)
   &:not(:checked, :disabled).tedi-radio--invalid,
   &:not(:checked, :disabled):user-invalid,
   &:not(:checked, :disabled).ng-invalid.ng-touched {
-    background-color: var(--form-checkbox-radio-default-background-error);
-    border-color: var(--form-general-feedback-error-border);
+    --_radio-border: var(--form-choice-radio-unselected-border-error);
 
-    &:hover {
-      border-color: var(--form-general-feedback-error-border);
-      box-shadow: 0 0 0 1px var(--form-general-feedback-error-border);
+    &:hover,
+    &:active {
+      --_radio-inset: inset 0 0 0 #{$indicator-border-inset}
+        var(--_radio-border);
     }
   }
 
diff --git a/src/tedi/components/form/radio/radio.component.ts b/src/tedi/components/form/radio/radio.component.ts
index 5391e5c93..b2f74d0dd 100644
--- a/src/tedi/components/form/radio/radio.component.ts
+++ b/src/tedi/components/form/radio/radio.component.ts
@@ -35,7 +35,7 @@ export class RadioComponent implements OnInit, OnDestroy {
    */
   readonly size = input<RadioSize>("default");
   /**
-   * Is radio invalid?
+   * Show the radio in an invalid state.
    * @default false
    */
   readonly invalid = input(false);
@@ -46,7 +46,7 @@ export class RadioComponent implements OnInit, OnDestroy {
    */
   readonly value = input<string>();
   /**
-   * Disables this radio. An enclosing disabled `<tedi-radio-group>` forces
+   * Disable this radio. An enclosing disabled `<tedi-radio-group>` forces
    * disabled regardless of this input.
    * @default false
    */
diff --git a/src/tedi/components/form/radio/radio.stories.ts b/src/tedi/components/form/radio/radio.stories.ts
index 3ddbfa564..443d2cf71 100644
--- a/src/tedi/components/form/radio/radio.stories.ts
+++ b/src/tedi/components/form/radio/radio.stories.ts
@@ -68,7 +68,7 @@ export default {
     },
     invalid: {
       control: "boolean",
-      description: "Is radio invalid?",
+      description: "Show the radio in an invalid state.",
       table: {
         category: "Radio",
         type: {
@@ -81,7 +81,7 @@ export default {
     },
     disabled: {
       control: "boolean",
-      description: "Is radio disabled?",
+      description: "Disable the radio.",
       table: {
         category: "Radio",
         type: {
@@ -94,7 +94,7 @@ export default {
       options: ["primary", "secondary"],
       description: "Visual variant of the radio card.",
       table: {
-        category: "RadioCard",
+        category: "Radio Card",
         type: {
           summary: "RadioCardVariant",
           detail: "primary \nsecondary",
@@ -106,9 +106,9 @@ export default {
     },
     grouped: {
       control: "boolean",
-      description: "Whether the card is part of a button-group style layout.",
+      description: "Show the card as part of a button-group style layout.",
       table: {
-        category: "RadioCard",
+        category: "Radio Card",
         type: {
           summary: "boolean",
         },
@@ -120,9 +120,9 @@ export default {
     showIndicator: {
       control: "boolean",
       description:
-        "Whether to show the radio indicator. When false, the radio is visually hidden but remains functional.",
+        "Show the radio indicator. When false, the radio is visually hidden but stays functional.",
       table: {
-        category: "RadioCard",
+        category: "Radio Card",
         type: {
           summary: "boolean",
         },
@@ -135,7 +135,7 @@ export default {
       control: "text",
       description: "Label text displayed above the radio group.",
       table: {
-        category: "RadioGroup",
+        category: "Radio Group",
         type: {
           summary: "string",
         },
@@ -146,7 +146,7 @@ export default {
       options: ["horizontal", "vertical"],
       description: "Layout direction of the radios.",
       table: {
-        category: "RadioGroup",
+        category: "Radio Group",
         type: {
           summary: "RadioGroupDirection",
           detail: "horizontal \nvertical",
@@ -171,7 +171,7 @@ export const Default: StoryObj<RadioComponent & { disabled: boolean }> = {
     template: `
       <label tedi-label color="primary" class="flex align-items-center gap-2">
         <input tedi-radio type="radio" ${argsToTemplate(args)} />
-        Text
+        Tekst
       </label>
     `,
   }),
@@ -185,11 +185,25 @@ 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" aria-label="Vaikimisi" />
-        <div>Large</div>
-        <input tedi-radio type="radio" name="size-demo" size="large" aria-label="Suur" />
+      <tedi-row [cols]="12" [gapY]="3">
+        <tedi-col width="9" [md]="{ width: 6 }">
+          <p tedi-text modifiers="bold">Default</p>
+        </tedi-col>
+        <tedi-col width="3" [md]="{ width: 6 }">
+          <input tedi-radio type="radio" name="size-demo" aria-label="Vaikimisi" />
+        </tedi-col>
+        <tedi-col width="9" [md]="{ width: 6 }">
+          <div class="flex flex-column gap-3">
+            <p tedi-text modifiers="bold">Large</p>
+            <tedi-alert type="warning" [showClose]="false">
+              <p tedi-text>Applied automatically on mobile screen sizes.</p>
+              <p tedi-text modifiers="bold">Otherwise, prefer using default size.</p>
+            </tedi-alert>
+          </div>
+        </tedi-col>
+        <tedi-col width="3" [md]="{ width: 6 }">
+          <input tedi-radio type="radio" name="size-demo" size="large" aria-label="Suur" />
+        </tedi-col>
       </tedi-row>
     `,
   }),
@@ -199,18 +213,18 @@ export const Vertical: StoryObj<RadioComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <tedi-radio-group label="Label" direction="vertical">
+      <tedi-radio-group label="Tooraine" direction="vertical">
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-radio type="radio" name="vertical-demo" />
-          Text
+          Kartul
         </label>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-radio type="radio" name="vertical-demo" />
-          Text
+          Kapsas
         </label>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-radio type="radio" name="vertical-demo" checked />
-          Text
+          Peet
         </label>
       </tedi-radio-group>
     `,
@@ -221,18 +235,18 @@ export const Horizontal: StoryObj<RadioComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <tedi-radio-group label="Label">
+      <tedi-radio-group label="Tooraine">
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-radio type="radio" name="horizontal-demo" />
-          Text
+          Kartul
         </label>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-radio type="radio" name="horizontal-demo" />
-          Text
+          Kapsas
         </label>
         <label tedi-label color="primary" class="flex align-items-center gap-2">
           <input tedi-radio type="radio" name="horizontal-demo" checked />
-          Text
+          Peet
         </label>
       </tedi-radio-group>
     `,
@@ -244,28 +258,18 @@ export const Separate: StoryObj<RadioComponent> = {
     props: args,
     template: `
       <tedi-row [cols]="1" [gapY]="4">
-        <div>
-          <label tedi-label color="primary" class="flex align-items-center gap-2">
-            <input tedi-radio type="radio" name="separate-demo" />
-            Text
-          </label>
-          <tedi-feedback-text text="Hint text" />
-        </div>
-        <div>
-          <label tedi-label color="primary" class="flex align-items-center gap-2">
-            <input tedi-radio type="radio" name="separate-error" [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-radio type="radio" name="separate-required" />
-          Text
+        <label tedi-label color="primary" class="flex align-items-center gap-2">
+          <input tedi-radio type="radio" name="separate-demo" />
+          Tekst
+        </label>
+        <label tedi-label color="primary" [required]="true" class="flex align-items-center">
+          <input tedi-radio type="radio" style="margin-right: var(--form-checkbox-radio-inner-spacing)" name="separate-required" />
+          Tekst
         </label>
         <div class="flex align-items-center gap-1">
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-radio type="radio" name="separate-tooltip" />
-            Text
+            Tekst
           </label>
           <tedi-tooltip>
             <tedi-tooltip-trigger>
@@ -279,9 +283,9 @@ export const Separate: StoryObj<RadioComponent> = {
         <div>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-radio type="radio" name="separate-desc" />
-            Text
+            Tekst
           </label>
-          <tedi-feedback-text text="Description" />
+          <tedi-feedback-text text="Kirjeldus" />
         </div>
       </tedi-row>
     `,
@@ -292,181 +296,111 @@ export const Group: StoryObj<RadioComponent> = {
   render: (args) => ({
     props: args,
     template: `
-      <tedi-row [cols]="2" [gapY]="3">
-        <tedi-radio-group label="Label" direction="vertical">
+      <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
+        <tedi-radio-group label="Tooraine" direction="vertical">
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-radio type="radio" name="group-hint" />
-            Text
+            Kartul
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-radio type="radio" name="group-hint" />
-            Text
+            Kapsas
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-radio type="radio" name="group-hint" />
-            Text
+            Peet
           </label>
-          <tedi-feedback-text text="Hint text" />
+          <tedi-feedback-text text="Tegemist on veidi veidra valikuga, kuid vähemalt ühe baaselemendi peab valima" />
         </tedi-radio-group>
-        <tedi-radio-group label="Label" direction="vertical">
+        <tedi-radio-group label="Tooraine">
           <label tedi-label color="primary" class="flex align-items-center gap-2">
-            <input tedi-radio type="radio" name="group-error" />
-            Text
+            <input tedi-radio type="radio" name="group-h-hint" />
+            Kartul
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
-            <input tedi-radio type="radio" name="group-error" />
-            Text
+            <input tedi-radio type="radio" name="group-h-hint" />
+            Kapsas
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
-            <input tedi-radio type="radio" name="group-error" />
-            Text
+            <input tedi-radio type="radio" name="group-h-hint" />
+            Peet
           </label>
-          <tedi-feedback-text text="Feedback text" type="error" />
+          <tedi-feedback-text text="Eestis levinud köögiviljad" />
         </tedi-radio-group>
-        <tedi-radio-group label="Label">
+        <tedi-radio-group label="Tooraine" direction="vertical">
           <label tedi-label color="primary" class="flex align-items-center gap-2">
-            <input tedi-radio type="radio" name="group-h-hint" />
-            Text
+            <input tedi-radio type="radio" name="group-error" />
+            Kartul
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
-            <input tedi-radio type="radio" name="group-h-hint" />
-            Text
+            <input tedi-radio type="radio" name="group-error" />
+            Kapsas
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
-            <input tedi-radio type="radio" name="group-h-hint" />
-            Text
+            <input tedi-radio type="radio" name="group-error" />
+            Peet
           </label>
-          <tedi-feedback-text text="Hint text" />
+          <tedi-feedback-text text="Vähemalt 1 tooraine on kohustuslik valida" type="error" />
         </tedi-radio-group>
-        <tedi-radio-group label="Label">
+        <tedi-radio-group label="Tooraine">
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-radio type="radio" name="group-h-error" />
-            Text
+            Kartul
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-radio type="radio" name="group-h-error" />
-            Text
+            Kapsas
           </label>
           <label tedi-label color="primary" class="flex align-items-center gap-2">
             <input tedi-radio type="radio" name="group-h-error" />
-            Text
+            Peet
           </label>
-          <tedi-feedback-text text="Feedback text" type="error" />
+          <tedi-feedback-text text="Vähemalt 1 tooraine on kohustuslik valida" type="error" />
         </tedi-radio-group>
       </tedi-row>
     `,
   }),
 };
 
-/**
- * All visual states of the radio component.
- */
-export const States: StoryObj<RadioComponent> = {
-  parameters: {
-    pseudo: {
-      hover: "#Hover",
-      active: "#Active",
-      focusVisible: "#Focus",
-    },
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <tedi-row [cols]="2" [gapY]="3">
-        <strong>Default</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-radio type="radio" name="state-default" />
-          Text
-        </label>
-
-        <strong>Hover</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-radio type="radio" name="state-hover" id="Hover" />
-          Text
-        </label>
-
-        <strong>Selected</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-radio type="radio" name="state-selected" checked />
-          Text
-        </label>
-
-        <strong>Active</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-radio type="radio" name="state-active" id="Active" />
-          Text
-        </label>
-
-        <strong>Focus</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-radio type="radio" name="state-focus" id="Focus" />
-          Text
-        </label>
-
-        <strong>Error</strong>
-        <div>
-          <label tedi-label color="primary" class="flex align-items-center gap-2">
-            <input tedi-radio type="radio" name="state-error" [invalid]="true" />
-            Text
-          </label>
-          <tedi-feedback-text text="Feedback text" type="error" />
-        </div>
-
-        <strong>Disabled</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <input tedi-radio type="radio" name="state-disabled" disabled />
-          Text
-        </label>
-
-        <strong>Disabled selected</strong>
-        <label tedi-label color="primary" class="flex align-items-center gap-2">
-          <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> = {
+export const CardsSeparate: StoryObj<RadioComponent> = {
   render: (args) => ({
     props: args,
     template: `
       <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Primary</p>
+          <p tedi-text modifiers="bold">Primary</p>
           <tedi-radio-card-group>
             <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-primary" checked />
-              Text
+              <input tedi-radio type="radio" name="card-primary" />
+              Kartul
             </label>
             <label tedi-radio-card variant="primary">
               <input tedi-radio type="radio" name="card-primary" />
-              Text
+              Kapsas
             </label>
             <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-primary" />
-              Text
+              <input tedi-radio type="radio" name="card-primary" checked />
+              Peet
             </label>
           </tedi-radio-card-group>
         </tedi-col>
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Secondary</p>
+          <p tedi-text modifiers="bold">Secondary</p>
           <tedi-radio-card-group>
             <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-secondary" checked />
-              Text
+              <input tedi-radio type="radio" name="card-secondary" />
+              Kartul
             </label>
             <label tedi-radio-card variant="secondary">
               <input tedi-radio type="radio" name="card-secondary" />
-              Text
+              Kapsas
             </label>
             <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-secondary" />
-              Text
+              <input tedi-radio type="radio" name="card-secondary" checked />
+              Peet
             </label>
           </tedi-radio-card-group>
         </tedi-col>
@@ -475,53 +409,78 @@ export const RadioCards: StoryObj<RadioComponent> = {
   }),
 };
 
+/**
+ * `bordered` gives separated primary cards a border in the unselected state.
+ */
+export const CardsHasBorder: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <tedi-radio-card-group [bordered]="true">
+        <label tedi-radio-card variant="primary">
+          <input tedi-radio type="radio" name="card-bordered" />
+          Kartul
+        </label>
+        <label tedi-radio-card variant="primary">
+          <input tedi-radio type="radio" name="card-bordered" />
+          Kapsas
+        </label>
+        <label tedi-radio-card variant="primary">
+          <input tedi-radio type="radio" name="card-bordered" checked />
+          Peet
+        </label>
+      </tedi-radio-card-group>
+    `,
+  }),
+};
+
 /**
  * Radio cards in a grouped layout, joined like a button group with shared borders and no gap.
  */
-export const RadioCardsGrouped: StoryObj<RadioComponent> = {
+export const CardsGrouped: StoryObj<RadioComponent> = {
   render: (args) => ({
     props: args,
     template: `
       <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Primary</p>
+          <p tedi-text modifiers="bold">Primary</p>
           <tedi-radio-card-group [grouped]="true">
             <label tedi-radio-card variant="primary">
               <input tedi-radio type="radio" name="card-group-primary" />
-              Text
+              Kartul
             </label>
             <label tedi-radio-card variant="primary">
               <input tedi-radio type="radio" name="card-group-primary" />
-              Text
+              Kapsas
             </label>
             <label tedi-radio-card variant="primary">
               <input tedi-radio type="radio" name="card-group-primary" checked />
-              Text
+              Peet
             </label>
             <label tedi-radio-card variant="primary">
               <input tedi-radio type="radio" name="card-group-primary" />
-              Text
+              Kaalikas
             </label>
           </tedi-radio-card-group>
         </tedi-col>
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Secondary</p>
+          <p tedi-text modifiers="bold">Secondary</p>
           <tedi-radio-card-group [grouped]="true">
             <label tedi-radio-card variant="secondary">
               <input tedi-radio type="radio" name="card-group-secondary" />
-              Text
+              Kartul
             </label>
             <label tedi-radio-card variant="secondary">
               <input tedi-radio type="radio" name="card-group-secondary" checked />
-              Text
+              Kapsas
             </label>
             <label tedi-radio-card variant="secondary">
               <input tedi-radio type="radio" name="card-group-secondary" />
-              Text
+              Peet
             </label>
             <label tedi-radio-card variant="secondary">
               <input tedi-radio type="radio" name="card-group-secondary" />
-              Text
+              Kaalikas
             </label>
           </tedi-radio-card-group>
         </tedi-col>
@@ -531,331 +490,563 @@ export const RadioCardsGrouped: StoryObj<RadioComponent> = {
 };
 
 /**
- * Radio cards with a description below the label text.
+ * Radio cards with a description below the label text, shown separate and grouped for both variants.
  */
-export const RadioCardsWithDescription: StoryObj<RadioComponent> = {
+export const CardsWithDescription: StoryObj<RadioComponent> = {
   render: (args) => ({
     props: args,
-    template: `
-      <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Primary</p>
-          <tedi-radio-card-group>
-            <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-desc-primary" checked />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-desc-primary" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-desc-primary" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-          </tedi-radio-card-group>
-        </tedi-col>
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Secondary</p>
-          <tedi-radio-card-group>
-            <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-desc-secondary" checked />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-desc-secondary" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-desc-secondary" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-          </tedi-radio-card-group>
-        </tedi-col>
-      </tedi-row>
-    `,
-  }),
-};
+    styles: [
+      `
+        .cards-with-description tedi-radio-card-group {
+          display: flex;
+        }
 
-/**
- * Grouped radio cards with description text.
- */
-export const RadioCardsGroupedWithDescription: StoryObj<RadioComponent> = {
-  render: (args) => ({
-    props: args,
+        .cards-with-description label[tedi-radio-card] {
+          flex: 1 1 12rem;
+        }
+      `,
+    ],
     template: `
-      <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Primary</p>
-          <tedi-radio-card-group [grouped]="true">
-            <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-group-desc-primary" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-group-desc-primary" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-group-desc-primary" checked />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-          </tedi-radio-card-group>
-        </tedi-col>
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Secondary</p>
-          <tedi-radio-card-group [grouped]="true">
-            <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-group-desc-secondary" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-group-desc-secondary" checked />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-group-desc-secondary" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-          </tedi-radio-card-group>
-        </tedi-col>
-      </tedi-row>
+    <div class="cards-with-description flex flex-column gap-4">
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Primary</p>
+        <tedi-radio-card-group [bordered]="true">
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-desc-primary" />
+            Kartul
+            <tedi-feedback-text text="Tärkliserikas mugulköögivili, mida kasutatakse laialt toiduks." />
+          </label>
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-desc-primary" checked />
+            Peet
+            <tedi-feedback-text text="Magusamaitseline juurvili, mida süüakse nii toorelt kui ka kuumtöödeldult." />
+          </label>
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-desc-primary" />
+            Kapsas
+            <tedi-feedback-text text="Lehtköögivili, mille tihedaid lehti kasutatakse mitmesugustes roogades." />
+          </label>
+        </tedi-radio-card-group>
+      </div>
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Primary grouped</p>
+        <tedi-radio-card-group [grouped]="true">
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-desc-primary-grouped" />
+            Kartul
+            <tedi-feedback-text text="Tärkliserikas mugulköögivili, mida kasutatakse laialt toiduks." />
+          </label>
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-desc-primary-grouped" checked />
+            Peet
+            <tedi-feedback-text text="Magusamaitseline juurvili, mida süüakse nii toorelt kui ka kuumtöödeldult." />
+          </label>
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-desc-primary-grouped" />
+            Kapsas
+            <tedi-feedback-text text="Lehtköögivili, mille tihedaid lehti kasutatakse mitmesugustes roogades." />
+          </label>
+        </tedi-radio-card-group>
+      </div>
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Secondary</p>
+        <tedi-radio-card-group>
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-desc-secondary" />
+            Kartul
+            <tedi-feedback-text text="Tärkliserikas mugulköögivili, mida kasutatakse laialt toiduks." />
+          </label>
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-desc-secondary" checked />
+            Peet
+            <tedi-feedback-text text="Magusamaitseline juurvili, mida süüakse nii toorelt kui ka kuumtöödeldult." />
+          </label>
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-desc-secondary" />
+            Kapsas
+            <tedi-feedback-text text="Lehtköögivili, mille tihedaid lehti kasutatakse mitmesugustes roogades." />
+          </label>
+        </tedi-radio-card-group>
+      </div>
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Secondary grouped</p>
+        <tedi-radio-card-group [grouped]="true">
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-desc-secondary-grouped" />
+            Kartul
+            <tedi-feedback-text text="Tärkliserikas mugulköögivili, mida kasutatakse laialt toiduks." />
+          </label>
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-desc-secondary-grouped" checked />
+            Peet
+            <tedi-feedback-text text="Magusamaitseline juurvili, mida süüakse nii toorelt kui ka kuumtöödeldult." />
+          </label>
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-desc-secondary-grouped" />
+            Kapsas
+            <tedi-feedback-text text="Lehtköögivili, mille tihedaid lehti kasutatakse mitmesugustes roogades." />
+          </label>
+        </tedi-radio-card-group>
+      </div>
+    </div>
     `,
   }),
 };
 
 /**
- * Radio cards with icons before the label text.
+ * Radio cards with icons before the label text, with and without a description.
  */
-export const RadioCardsWithIcons: StoryObj<RadioComponent> = {
+export const CardsWithIcons: StoryObj<RadioComponent> = {
   render: (args) => ({
     props: args,
+    styles: [
+      `
+        .cards-with-icons__stretch {
+          display: flex;
+        }
+
+        .cards-with-icons__stretch label[tedi-radio-card] {
+          flex: 1 1 12rem;
+        }
+      `,
+    ],
     template: `
+    <div class="flex flex-column gap-4">
       <tedi-row [gapY]="3" [xs]="{cols: 1}" [md]="{cols: 2}">
         <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Primary</p>
-          <tedi-radio-card-group>
-            <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>
-          </tedi-radio-card-group>
-        </tedi-col>
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Secondary</p>
-          <tedi-radio-card-group>
-            <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>
-          </tedi-radio-card-group>
-        </tedi-col>
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Primary with description</p>
-          <tedi-radio-card-group>
-            <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-icon-desc-primary" checked />
-              <tedi-icon name="apartment" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-icon-desc-primary" />
-              <tedi-icon name="stethoscope" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="primary">
-              <input tedi-radio type="radio" name="card-icon-desc-primary" />
-              <tedi-icon name="home" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-          </tedi-radio-card-group>
-        </tedi-col>
-        <tedi-col class="flex flex-column gap-2">
-          <p tedi-text>Secondary with description</p>
-          <tedi-radio-card-group>
-            <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-icon-desc-secondary" checked />
-              <tedi-icon name="apartment" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-icon-desc-secondary" />
-              <tedi-icon name="stethoscope" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-            <label tedi-radio-card variant="secondary">
-              <input tedi-radio type="radio" name="card-icon-desc-secondary" />
-              <tedi-icon name="home" [size]="18" />
-              Text
-              <tedi-feedback-text text="Description" />
-            </label>
-          </tedi-radio-card-group>
-        </tedi-col>
-      </tedi-row>
-    `,
-  }),
-};
-
-/**
- * All visual states of the radio card component for both primary and secondary variants.
- */
-export const RadioCardStates: StoryObj<RadioComponent> = {
-  parameters: {
-    pseudo: {
-      hover: ["#PrimaryHover", "#SecondaryHover"],
-      active: ["#PrimaryActive", "#SecondaryActive"],
-      focusVisible: ["#PrimaryFocus", "#SecondaryFocus"],
-    },
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <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>
+          <p tedi-text modifiers="bold">Primary</p>
+        <tedi-radio-card-group [bordered]="true">
           <label tedi-radio-card variant="primary">
-            <input tedi-radio type="radio" name="card-state-p-default" />
-            Text
+            <input tedi-radio type="radio" name="card-icon-primary" />
+            <tedi-icon name="directions_subway" [size]="18" />
+            Trammiga
           </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><strong>Hover</strong></tedi-col>
-        <tedi-col>
           <label tedi-radio-card variant="primary">
-            <input tedi-radio type="radio" name="card-state-p-hover" id="PrimaryHover" />
-            Text
+            <input tedi-radio type="radio" name="card-icon-primary" checked />
+            <tedi-icon name="directions_walk" [size]="18" />
+            Jalgsi
           </label>
-        </tedi-col>
-        <tedi-col>
-          <label tedi-radio-card variant="secondary">
-            <input tedi-radio type="radio" name="card-state-s-hover" id="SecondaryHover" />
-            Text
-          </label>
-        </tedi-col>
-
-        <tedi-col><strong>Selected</strong></tedi-col>
-        <tedi-col>
           <label tedi-radio-card variant="primary">
-            <input tedi-radio type="radio" name="card-state-p-selected" checked />
-            Text
+            <input tedi-radio type="radio" name="card-icon-primary" />
+            <tedi-icon name="directions_car" [size]="18" />
+            Autoga
           </label>
+        </tedi-radio-card-group>
         </tedi-col>
-        <tedi-col>
+        <tedi-col class="flex flex-column gap-2">
+          <p tedi-text modifiers="bold">Secondary</p>
+        <tedi-radio-card-group>
           <label tedi-radio-card variant="secondary">
-            <input tedi-radio type="radio" name="card-state-s-selected" checked />
-            Text
+            <input tedi-radio type="radio" name="card-icon-secondary" />
+            <tedi-icon name="directions_subway" [size]="18" />
+            Trammiga
           </label>
-        </tedi-col>
-
-        <tedi-col><strong>Active</strong></tedi-col>
-        <tedi-col>
-          <label tedi-radio-card variant="primary">
-            <input tedi-radio type="radio" name="card-state-p-active" checked id="PrimaryActive" />
-            Text
+          <label tedi-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-icon-secondary" checked />
+            <tedi-icon name="directions_walk" [size]="18" />
+            Jalgsi
           </label>
-        </tedi-col>
-        <tedi-col>
           <label tedi-radio-card variant="secondary">
-            <input tedi-radio type="radio" name="card-state-s-active" checked id="SecondaryActive" />
-            Text
+            <input tedi-radio type="radio" name="card-icon-secondary" />
+            <tedi-icon name="directions_car" [size]="18" />
+            Autoga
           </label>
+        </tedi-radio-card-group>
         </tedi-col>
-
-        <tedi-col><strong>Focus</strong></tedi-col>
-        <tedi-col>
+      </tedi-row>
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Primary with description</p>
+        <tedi-radio-card-group [bordered]="true" class="cards-with-icons__stretch">
           <label tedi-radio-card variant="primary">
-            <input tedi-radio type="radio" name="card-state-p-focus" id="PrimaryFocus" />
-            Text
+            <input tedi-radio type="radio" name="card-icon-desc-primary" />
+            <tedi-icon name="directions_subway" [size]="18" />
+            Trammiga
+            <tedi-feedback-text text="Soovitatud variant, vähendab ummikuid" />
           </label>
-        </tedi-col>
-        <tedi-col>
-          <label tedi-radio-card variant="secondary">
-            <input tedi-radio type="radio" name="card-state-s-focus" id="SecondaryFocus" />
-            Text
+          <label tedi-radio-card variant="primary">
+            <input tedi-radio type="radio" name="card-icon-desc-primary" checked />
+            <tedi-icon name="directions_walk" [size]="18" />
+            Jalgsi
+            <tedi-feedback-text text="Soovitatud variant, vähendab ummikuid" />
           </label>
-        </tedi-col>
-
-        <tedi-col><strong>Disabled</strong></tedi-col>
-        <tedi-col>
           <label tedi-radio-card variant="primary">
-            <input tedi-radio type="radio" name="card-state-p-disabled" disabled />
-            Text
+            <input tedi-radio type="radio" name="card-icon-desc-primary" />
+            <tedi-icon name="directions_car" [size]="18" />
+            Autoga
+            <tedi-feedback-text text="Kui soovid kiiremini kohale jõuda, tekitab ummikuid" />
           </label>
-        </tedi-col>
-        <tedi-col>
+        </tedi-radio-card-group>
+      </div>
+      <div class="flex flex-column gap-2">
+        <p tedi-text modifiers="bold">Secondary with description</p>
+        <tedi-radio-card-group class="cards-with-icons__stretch">
           <label tedi-radio-card variant="secondary">
-            <input tedi-radio type="radio" name="card-state-s-disabled" disabled />
-            Text
+            <input tedi-radio type="radio" name="card-icon-desc-secondary" />
+            <tedi-icon name="directions_subway" [size]="18" />
+            Trammiga
+            <tedi-feedback-text text="Soovitatud variant, vähendab ummikuid" />
           </label>
-        </tedi-col>
-
-        <tedi-col><strong>Disabled selected</strong></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-radio-card variant="secondary">
+            <input tedi-radio type="radio" name="card-icon-desc-secondary" checked />
+            <tedi-icon name="directions_walk" [size]="18" />
+            Jalgsi
+            <tedi-feedback-text text="Soovitatud variant, vähendab ummikuid" />
           </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
+            <input tedi-radio type="radio" name="card-icon-desc-secondary" />
+            <tedi-icon name="directions_car" [size]="18" />
+            Autoga
+            <tedi-feedback-text text="Kui soovid kiiremini kohale jõuda, tekitab ummikuid" />
           </label>
-        </tedi-col>
-      </tedi-row>
+        </tedi-radio-card-group>
+      </div>
+    </div>
     `,
   }),
 };
 
+type GridPlace = [row: number, column: number | string];
+
+/**
+ * Lays a state matrix out on a grid whose columns never wrap into the row labels.
+ * Every item gets a desktop and a mobile grid position, swapped below `md`:
+ * `mobileLayout="rows"` puts each row label on its own line above cells that
+ * share the width;
+ * `mobileLayout="columns"` splits the matrix into one section per column.
+ * Each cell is rendered once, so input ids and radio names stay unique. Card
+ * groups in error cells (`.state-matrix__error`) keep their natural width, while
+ * the message may widen the column to stay on one line, and wraps only when the
+ * matrix runs out of room. `desktopGrid` sets a minimum column width, row height
+ * and gaps for the desktop layout.
+ */
+const stateMatrix = ({
+  headers,
+  rows,
+  alignItems = "start",
+  mobileLayout = "rows",
+  desktopGrid,
+}: {
+  headers: string[];
+  rows: { label: string; cells: string[] }[];
+  alignItems?: "start" | "center";
+  mobileLayout?: "rows" | "columns";
+  desktopGrid?: {
+    columnWidth: string;
+    rowHeight: string;
+    columnGap: string;
+    rowGap: string;
+  };
+}) => {
+  const columns = headers.length;
+  const sectionSize = rows.length + 1;
+  const byColumns = mobileLayout === "columns";
+
+  const item = (
+    tag: string,
+    content: string,
+    desktop: GridPlace | null,
+    mobile: GridPlace | null,
+    className = "",
+  ) => {
+    const classes = [
+      className,
+      desktop ? "" : "state-matrix__mobile-only",
+      mobile ? "" : "state-matrix__desktop-only",
+    ].join(" ");
+    const style = [
+      desktop ? `--d-row: ${desktop[0]}; --d-col: ${desktop[1]};` : "",
+      mobile ? `--m-row: ${mobile[0]}; --m-col: ${mobile[1]};` : "",
+    ].join(" ");
+    return `<${tag} class="${classes.trim()}" style="${style.trim()}">${content}</${tag}>`;
+  };
+
+  const headerItems = headers.map((header, c) =>
+    item(
+      "strong",
+      header,
+      [1, c + 2],
+      byColumns ? [c * sectionSize + 1, "1 / -1"] : [1, c + 1],
+      byColumns && c > 0 ? "state-matrix__section-title" : "",
+    ),
+  );
+
+  const rowItems = rows.map(({ label, cells }, r) => {
+    const labels = byColumns
+      ? headers.map((_, c) =>
+          item("strong", label, c === 0 ? [r + 2, 1] : null, [
+            c * sectionSize + r + 2,
+            1,
+          ]),
+        )
+      : [
+          item(
+            "strong",
+            label,
+            [r + 2, 1],
+            [2 * r + 2, "1 / -1"],
+            "state-matrix__row-label",
+          ),
+        ];
+    const cellItems = cells.map((cell, c) =>
+      item(
+        "div",
+        cell,
+        [r + 2, c + 2],
+        byColumns ? [c * sectionSize + r + 2, 2] : [2 * r + 3, c + 1],
+      ),
+    );
+    return [...labels, ...cellItems].join("");
+  });
+
+  return `
+    <div class="state-matrix state-matrix--${mobileLayout} ${desktopGrid ? "state-matrix--fixed" : ""}" style="--_columns: ${columns}; --_align: ${alignItems}; ${desktopGrid ? `--_column-width: ${desktopGrid.columnWidth}; --_row-height: ${desktopGrid.rowHeight}; --_column-gap: ${desktopGrid.columnGap}; --_row-gap: ${desktopGrid.rowGap};` : ""}">
+      <div class="state-matrix__grid">
+        ${item("span", "", [1, 1], null)}
+        ${headerItems.join("")}
+        ${rowItems.join("")}
+      </div>
+    </div>`;
+};
+
+const stateMatrixStyles = [
+  `
+  .state-matrix__grid {
+    display: grid;
+    grid-template-columns: max-content repeat(
+        var(--_columns),
+        minmax(min-content, max-content)
+      );
+    gap: var(--layout-grid-gutters-16) var(--layout-grid-gutters-24);
+    align-items: var(--_align);
+  }
+
+  .state-matrix__grid > * {
+    grid-row: var(--d-row);
+    grid-column: var(--d-col);
+  }
+
+  .state-matrix__grid > .state-matrix__mobile-only {
+    display: none;
+  }
+
+  .state-matrix__error > :first-child {
+    width: max-content;
+  }
+
+  @media (min-width: 48rem) {
+    .state-matrix--fixed .state-matrix__grid {
+      grid-template-columns:
+        minmax(var(--_column-width), max-content)
+        repeat(var(--_columns), minmax(var(--_column-width), max-content));
+      grid-auto-rows: minmax(var(--_row-height), auto);
+      gap: var(--_row-gap) var(--_column-gap);
+    }
+  }
+
+  @media (max-width: 47.98rem) {
+    .state-matrix--rows .state-matrix__grid {
+      grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
+    }
+
+    .state-matrix--columns .state-matrix__grid {
+      grid-template-columns: max-content minmax(0, 1fr);
+    }
+
+    .state-matrix__grid > * {
+      grid-row: var(--m-row);
+      grid-column: var(--m-col);
+    }
+
+    .state-matrix__grid > .state-matrix__mobile-only {
+      display: block;
+    }
+
+    .state-matrix__grid > .state-matrix__desktop-only {
+      display: none;
+    }
+
+    .state-matrix__row-label,
+    .state-matrix__section-title {
+      margin-top: var(--layout-grid-gutters-08);
+    }
+  }
+`,
+];
+
+const stateRows: {
+  label: string;
+  id: string;
+  attrs?: string;
+  labelAttrs?: string;
+  feedback?: boolean;
+}[] = [
+  { label: "Default", id: "Default" },
+  { label: "Hover", id: "Hover" },
+  { label: "Active", id: "Active" },
+  { label: "Disabled", id: "Disabled", attrs: "disabled" },
+  { label: "Focus", id: "Focus" },
+  { label: "Error", id: "Error", attrs: '[invalid]="true"', feedback: true },
+  { label: "Mandatory", id: "Mandatory", labelAttrs: '[required]="true"' },
+];
+
+const stateCell = (
+  { id, attrs = "", labelAttrs = "", feedback }: (typeof stateRows)[number],
+  selected: boolean,
+) => {
+  const radioId = `${id}${selected ? "Selected" : "Unselected"}`;
+  return `
+  <div>
+    <label tedi-label color="primary" class="flex align-items-center" ${labelAttrs}>
+      <input tedi-radio type="radio" style="margin-right: var(--form-checkbox-radio-inner-spacing)" name="state-${radioId}" id="${radioId}" ${selected ? "checked" : ""} ${attrs} />
+      Tekst
+    </label>
+    ${feedback ? '<tedi-feedback-text text="Kohustuslik väli" type="error" />' : ""}
+  </div>`;
+};
+
+/** Gives the States matrix more room between columns and rows on desktop. */
+const statesDesktopGrid = {
+  columnWidth: "10.375rem",
+  rowHeight: "2.5rem",
+  columnGap: "var(--layout-grid-gutters-16)",
+  rowGap: "var(--layout-grid-gutters-08)",
+};
+
+export const States: StoryObj<RadioComponent> = {
+  parameters: {
+    pseudo: {
+      hover: ["#HoverUnselected", "#HoverSelected"],
+      active: ["#ActiveUnselected", "#ActiveSelected"],
+      focusVisible: ["#FocusUnselected", "#FocusSelected"],
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: stateMatrix({
+      headers: ["Unselected", "Selected"],
+      alignItems: "center",
+      desktopGrid: statesDesktopGrid,
+      rows: stateRows.map((row) => ({
+        label: row.label,
+        cells: [stateCell(row, false), stateCell(row, true)],
+      })),
+    }),
+    styles: stateMatrixStyles,
+  }),
+};
+
+type CardColumn = "Unselected" | "Borderless" | "Selected" | "Grouped";
+
+const cardColumns: Record<
+  "primary" | "secondary",
+  { column: CardColumn; title: string }[]
+> = {
+  primary: [
+    { column: "Unselected", title: "Unselected" },
+    { column: "Borderless", title: "Unselected borderless" },
+    { column: "Selected", title: "Selected" },
+    { column: "Grouped", title: "Grouped" },
+  ],
+  secondary: [
+    { column: "Unselected", title: "Unselected" },
+    { column: "Selected", title: "Selected" },
+    { column: "Grouped", title: "Grouped" },
+  ],
+};
+
+const cardStates: { label: string; attrs?: string }[] = [
+  { label: "Default" },
+  { label: "Hover" },
+  { label: "Active" },
+  { label: "Focus" },
+  { label: "Disabled", attrs: "disabled" },
+];
+
+const capitalize = (value: string) =>
+  value.charAt(0).toUpperCase() + value.slice(1);
+
+const cardStateId = (variant: string, column: CardColumn, state: string) =>
+  `Radio${capitalize(variant)}${column}${state}`;
+
+const cardStatesPseudo = (variant: "primary" | "secondary") => {
+  const ids = (state: string) =>
+    cardColumns[variant].map(
+      ({ column }) => `#${cardStateId(variant, column, state)}`,
+    );
+  return {
+    hover: ids("Hover"),
+    active: ids("Active"),
+    focusVisible: ids("Focus"),
+  };
+};
+
+const cardStatesTemplate = (variant: "primary" | "secondary") => {
+  const card = (
+    name: string,
+    selected: boolean,
+    id = "",
+    attrs = "",
+    labelAttrs = "",
+  ) => `
+          <label tedi-radio-card variant="${variant}" ${labelAttrs}>
+            <input tedi-radio type="radio" name="${name}" ${id ? `id="${id}"` : ""} ${selected ? "checked" : ""} ${attrs} />
+            Tekst
+          </label>`;
+
+  const cell = (column: CardColumn, state: string, attrs = "") => {
+    const id = cardStateId(variant, column, state);
+    const isError = state === "Error";
+    const selected = column === "Selected" || column === "Grouped";
+    const bordered = column === "Unselected" ? '[bordered]="true"' : "";
+
+    if (column !== "Grouped" && !isError) {
+      return `<div>${card(id, selected, id, attrs, bordered)}</div>`;
+    }
+
+    const grouped = column === "Grouped" ? '[grouped]="true"' : "";
+    const message = selected
+      ? "Valitud väärtus ei sobi ajavahemikuga"
+      : "Kohustuslik on valida vähemalt 1 väärtus";
+    return `
+        <div class="flex flex-column gap-1 state-matrix__error">
+          <tedi-radio-card-group ${grouped} ${bordered}>${card(id, selected, isError ? "" : id, attrs)}${card(id, false, "", attrs)}
+          </tedi-radio-card-group>
+          ${isError ? `<tedi-feedback-text text="${message}" type="error" />` : ""}
+        </div>`;
+  };
+
+  const columns = cardColumns[variant];
+  return stateMatrix({
+    headers: columns.map(({ title }) => title),
+    alignItems: "center",
+    mobileLayout: "columns",
+    rows: [...cardStates, { label: "Error" }].map(
+      ({ label, attrs }: { label: string; attrs?: string }) => ({
+        label,
+        cells: columns.map(({ column }) => cell(column, label, attrs)),
+      }),
+    ),
+  });
+};
+
+export const CardStatesPrimary: StoryObj<RadioComponent> = {
+  parameters: { pseudo: cardStatesPseudo("primary") },
+  render: (args) => ({
+    props: args,
+    template: cardStatesTemplate("primary"),
+    styles: stateMatrixStyles,
+  }),
+};
+
+export const CardStatesSecondary: StoryObj<RadioComponent> = {
+  parameters: { pseudo: cardStatesPseudo("secondary") },
+  render: (args) => ({
+    props: args,
+    template: cardStatesTemplate("secondary"),
+    styles: stateMatrixStyles,
+  }),
+};
+
 /**
  * The group supports two form-binding modes:
  *
@@ -878,28 +1069,28 @@ export const WithReactiveForms: StoryObj<RadioComponent> = {
       template: `
         <tedi-row cols="1" [gapY]="3">
           <tedi-col>
-            <tedi-radio-group label="Status" name="status" [formControl]="statusControl">
+            <tedi-radio-group label="Staatus" name="status" [formControl]="statusControl">
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-radio type="radio" value="all" />
-                All
+                Kõik
               </label>
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-radio type="radio" value="active" />
-                Active
+                Aktiivne
               </label>
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-radio type="radio" value="done" />
-                Done
+                Lõpetatud
               </label>
             </tedi-radio-group>
           </tedi-col>
 
           <tedi-col>
-            <tedi-radio-group label="Plan" name="plan" [formControl]="planControl">
+            <tedi-radio-group label="Pakett" name="plan" [formControl]="planControl">
               <tedi-radio-card-group [grouped]="true">
                 <label tedi-radio-card variant="primary">
                   <input tedi-radio type="radio" value="basic" />
-                  Basic
+                  Põhi
                 </label>
                 <label tedi-radio-card variant="primary">
                   <input tedi-radio type="radio" value="pro" />
@@ -907,25 +1098,25 @@ export const WithReactiveForms: StoryObj<RadioComponent> = {
                 </label>
                 <label tedi-radio-card variant="primary">
                   <input tedi-radio type="radio" value="enterprise" />
-                  Enterprise
+                  Ettevõte
                 </label>
               </tedi-radio-card-group>
             </tedi-radio-group>
           </tedi-col>
 
           <tedi-col>
-            <tedi-radio-group label="Priority">
+            <tedi-radio-group label="Prioriteet">
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-radio type="radio" [formControl]="priorityControl" name="priority" value="low" />
-                Low
+                Madal
               </label>
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-radio type="radio" [formControl]="priorityControl" name="priority" value="medium" />
-                Medium
+                Keskmine
               </label>
               <label tedi-label color="primary" class="flex align-items-center gap-2">
                 <input tedi-radio type="radio" [formControl]="priorityControl" name="priority" value="high" />
-                High
+                Kõrge
               </label>
             </tedi-radio-group>
           </tedi-col>
diff --git a/src/tedi/components/form/toggle/toggle.component.scss b/src/tedi/components/form/toggle/toggle.component.scss
index 18a26e2a6..492c567e5 100644
--- a/src/tedi/components/form/toggle/toggle.component.scss
+++ b/src/tedi/components/form/toggle/toggle.component.scss
@@ -1,26 +1,26 @@
 @mixin toggle-style($variant, $type) {
   @if $type == "filled" {
-    background-color: var(--form-toggle-#{$variant}-inactive-default);
+    background-color: var(--form-toggle-#{$variant}-unselected-default);
 
     &:hover {
-      background-color: var(--form-toggle-#{$variant}-inactive-hover);
+      background-color: var(--form-toggle-#{$variant}-unselected-hover);
     }
 
     &:active {
-      background-color: var(--form-toggle-#{$variant}-inactive-active);
+      background-color: var(--form-toggle-#{$variant}-unselected-active);
     }
 
     &:focus-visible {
       outline: calc(2 * var(--tedi-borders-01))
         solid
-        var(--form-toggle-primary-active-default);
+        var(--form-toggle-primary-selected-default);
       outline-offset: var(--tedi-borders-01);
-      background-color: var(--form-toggle-#{$variant}-inactive-default);
+      background-color: var(--form-toggle-#{$variant}-unselected-default);
     }
 
     &:disabled {
       cursor: not-allowed;
-      background-color: var(--form-toggle-#{$variant}-inactive-default);
+      background-color: var(--form-toggle-#{$variant}-unselected-default);
       opacity: 0.5;
 
       + .tedi-toggle__slider .tedi-toggle__icon {
@@ -29,31 +29,31 @@
     }
 
     + .tedi-toggle__slider {
-      background-color: var(--form-toggle-#{$variant}-inactive-indicator);
+      background-color: var(--form-toggle-#{$variant}-unselected-indicator);
     }
 
     &:checked {
-      background-color: var(--form-toggle-#{$variant}-active-default);
+      background-color: var(--form-toggle-#{$variant}-selected-default);
 
       &:hover {
-        background-color: var(--form-toggle-#{$variant}-active-hover);
+        background-color: var(--form-toggle-#{$variant}-selected-hover);
       }
 
       &:active {
-        background-color: var(--form-toggle-#{$variant}-active-active);
+        background-color: var(--form-toggle-#{$variant}-selected-active);
       }
 
       &:focus-visible {
         outline: calc(2 * var(--tedi-borders-01))
           solid
-          var(--form-toggle-primary-active-default);
+          var(--form-toggle-primary-selected-default);
         outline-offset: var(--tedi-borders-01);
-        background-color: var(--form-toggle-#{$variant}-active-default);
+        background-color: var(--form-toggle-#{$variant}-selected-default);
       }
 
       &:disabled {
         cursor: not-allowed;
-        background-color: var(--form-toggle-#{$variant}-active-default);
+        background-color: var(--form-toggle-#{$variant}-selected-default);
         opacity: 0.5;
 
         + .tedi-toggle__slider .tedi-toggle__icon {
@@ -62,7 +62,7 @@
       }
 
       + .tedi-toggle__slider {
-        background-color: var(--form-toggle-#{$variant}-active-indicator);
+        background-color: var(--form-toggle-#{$variant}-selected-indicator);
       }
     }
   }
@@ -70,43 +70,43 @@
   @if $type == "outlined" {
     border: var(--tedi-borders-01)
       solid
-      var(--form-toggle-#{$variant}-inactive-default);
+      var(--form-toggle-#{$variant}-unselected-default);
 
     + .tedi-toggle__slider {
-      background-color: var(--form-toggle-#{$variant}-inactive-default);
+      background-color: var(--form-toggle-#{$variant}-unselected-default);
     }
 
     &:hover {
       border: var(--tedi-borders-01)
         solid
-        var(--form-toggle-#{$variant}-inactive-hover);
+        var(--form-toggle-#{$variant}-unselected-hover);
 
       + .tedi-toggle__slider {
-        background-color: var(--form-toggle-#{$variant}-inactive-hover);
+        background-color: var(--form-toggle-#{$variant}-unselected-hover);
       }
     }
 
     &:active {
       border: var(--tedi-borders-01)
         solid
-        var(--form-toggle-#{$variant}-inactive-active);
+        var(--form-toggle-#{$variant}-unselected-active);
 
       + .tedi-toggle__slider {
-        background-color: var(--form-toggle-#{$variant}-inactive-active);
+        background-color: var(--form-toggle-#{$variant}-unselected-active);
       }
     }
 
     &:focus-visible {
       outline: calc(2 * var(--tedi-borders-01))
         solid
-        var(--form-toggle-primary-active-default);
+        var(--form-toggle-primary-selected-default);
       outline-offset: var(--tedi-borders-01);
       border: var(--tedi-borders-01)
         solid
-        var(--form-toggle-#{$variant}-inactive-default);
+        var(--form-toggle-#{$variant}-unselected-default);
 
       + .tedi-toggle__slider {
-        background-color: var(--form-toggle-#{$variant}-inactive-default);
+        background-color: var(--form-toggle-#{$variant}-unselected-default);
       }
     }
 
@@ -114,11 +114,11 @@
       cursor: not-allowed;
       border: var(--tedi-borders-01)
         solid
-        var(--form-toggle-#{$variant}-inactive-default);
+        var(--form-toggle-#{$variant}-unselected-default);
       opacity: 0.5;
 
       + .tedi-toggle__slider {
-        background-color: var(--form-toggle-#{$variant}-inactive-default);
+        background-color: var(--form-toggle-#{$variant}-unselected-default);
       }
 
       + .tedi-toggle__slider {
@@ -129,43 +129,43 @@
     &:checked {
       border: var(--tedi-borders-01)
         solid
-        var(--form-toggle-#{$variant}-active-default);
+        var(--form-toggle-#{$variant}-selected-default);
 
       + .tedi-toggle__slider {
-        background-color: var(--form-toggle-#{$variant}-active-default);
+        background-color: var(--form-toggle-#{$variant}-selected-default);
       }
 
       &:hover {
         border: var(--tedi-borders-01)
           solid
-          var(--form-toggle-#{$variant}-active-hover);
+          var(--form-toggle-#{$variant}-selected-hover);
 
         + .tedi-toggle__slider {
-          background-color: var(--form-toggle-#{$variant}-active-hover);
+          background-color: var(--form-toggle-#{$variant}-selected-hover);
         }
       }
 
       &:active {
         border: var(--tedi-borders-01)
           solid
-          var(--form-toggle-#{$variant}-active-active);
+          var(--form-toggle-#{$variant}-selected-active);
 
         + .tedi-toggle__slider {
-          background-color: var(--form-toggle-#{$variant}-active-active);
+          background-color: var(--form-toggle-#{$variant}-selected-active);
         }
       }
 
       &:focus-visible {
         outline: calc(2 * var(--tedi-borders-01))
           solid
-          var(--form-toggle-primary-active-default);
+          var(--form-toggle-primary-selected-default);
         outline-offset: var(--tedi-borders-01);
         border: var(--tedi-borders-01)
           solid
-          var(--form-toggle-#{$variant}-active-default);
+          var(--form-toggle-#{$variant}-selected-default);
 
         + .tedi-toggle__slider {
-          background-color: var(--form-toggle-#{$variant}-active-default);
+          background-color: var(--form-toggle-#{$variant}-selected-default);
         }
       }
 
@@ -173,11 +173,11 @@
         cursor: not-allowed;
         border: var(--tedi-borders-01)
           solid
-          var(--form-toggle-#{$variant}-active-default);
+          var(--form-toggle-#{$variant}-selected-default);
         opacity: 0.5;
 
         + .tedi-toggle__slider {
-          background-color: var(--form-toggle-#{$variant}-active-default);
+          background-color: var(--form-toggle-#{$variant}-selected-default);
         }
 
         + .tedi-toggle__slider {
diff --git a/src/tedi/components/navigation/pagination/pagination-option-picker-modal/pagination-option-picker-modal.component.scss b/src/tedi/components/navigation/pagination/pagination-option-picker-modal/pagination-option-picker-modal.component.scss
index 6e49db66f..e3052f853 100644
--- a/src/tedi/components/navigation/pagination/pagination-option-picker-modal/pagination-option-picker-modal.component.scss
+++ b/src/tedi/components/navigation/pagination/pagination-option-picker-modal/pagination-option-picker-modal.component.scss
@@ -65,8 +65,9 @@
     flex-shrink: 0;
     width: var(--form-checkbox-radio-size-responsive);
     height: var(--form-checkbox-radio-size-responsive);
-    background: var(--form-checkbox-radio-default-background-default);
-    border: var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);
+    background: var(--form-choice-radio-unselected-background-default);
+    border: var(--tedi-borders-01) solid
+      var(--form-choice-radio-unselected-border-default);
     border-radius: var(--form-checkbox-radio-indicator-radius-radio);
 
     &--selected {
diff --git a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss b/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss
index c237f7241..ab3b5242e 100644
--- a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss
+++ b/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss
@@ -34,13 +34,14 @@
     vertical-align: middle;
     appearance: none;
     cursor: pointer;
-    background-color: var(--form-checkbox-radio-default-background-default);
-    border: var(--tedi-borders-01) solid var(--form-checkbox-radio-default-border-default);
+    background-color: var(--form-choice-radio-unselected-background-default);
+    border: var(--tedi-borders-01) solid
+      var(--form-choice-radio-unselected-border-default);
     border-radius: var(--form-checkbox-radio-indicator-radius-radio);
 
     &:checked {
-      background-color: var(--form-checkbox-radio-default-background-default);
-      border-color: var(--form-checkbox-radio-default-border-selected);
+      background-color: var(--form-choice-radio-selected-background-default);
+      border-color: var(--form-choice-radio-selected-border-default);
 
       &::before {
         position: absolute;
@@ -49,7 +50,7 @@
         width: calc(var(--form-checkbox-radio-size-responsive) * 0.625);
         height: calc(var(--form-checkbox-radio-size-responsive) * 0.625);
         content: "";
-        background: var(--form-checkbox-radio-default-border-selected);
+        background: var(--form-choice-radio-selected-indicator-default);
         border-radius: 50%;
         transform: translate(-50%, -50%);
       }
@@ -61,11 +62,11 @@
       border-color: var(--form-input-border-disabled);
 
       &:checked {
-        background-color: var(--form-checkbox-radio-default-background-default);
-        border-color: var(--form-checkbox-radio-default-border-selected-disabled);
+        background-color: var(--form-choice-radio-selected-background-default);
+        border-color: var(--form-choice-radio-selected-border-disabled);
 
         &::before {
-          background: var(--form-checkbox-radio-default-border-selected-disabled);
+          background: var(--form-choice-radio-selected-indicator-disabled);
         }
       }
     }
@@ -117,10 +118,8 @@
 
 li[tedi-dropdown-item],
 .tedi-dropdown-item {
-
   &[aria-selected="true"],
   &.tedi-dropdown-item--selected {
-
     .tedi-dropdown-item-value__label,
     .tedi-dropdown-item-value__meta {
       color: inherit;
@@ -128,7 +127,6 @@ li[tedi-dropdown-item],
   }
 
   &:hover:not(.tedi-dropdown-item--disabled, [aria-disabled="true"]) {
-
     .tedi-dropdown-item-value__label,
     .tedi-dropdown-item-value__meta {
       color: inherit;
@@ -137,7 +135,6 @@ li[tedi-dropdown-item],
 
   &[aria-disabled="true"],
   &.tedi-dropdown-item--disabled {
-
     .tedi-dropdown-item-value__label,
     .tedi-dropdown-item-value__meta {
       color: inherit;
@@ -145,7 +142,6 @@ li[tedi-dropdown-item],
   }
 
   &:has(.tedi-dropdown-item-value--checkbox, .tedi-dropdown-item-value--radio) {
-
     &[aria-selected="true"],
     &.tedi-dropdown-item--selected {
       color: var(--dropdown-item-default-text);
@@ -160,8 +156,8 @@ li[tedi-dropdown-item],
 
   &:hover:not(.tedi-dropdown-item--disabled, [aria-disabled="true"]) {
     .tedi-dropdown-item-value__radio {
-      background-color: var(--form-checkbox-radio-default-background-hover);
-      border-color: var(--form-checkbox-radio-default-border-hover);
+      background-color: var(--form-choice-radio-unselected-background-default);
+      border-color: var(--form-choice-radio-unselected-border-hover);
       border-width: var(--tedi-borders-02);
     }
   }

From 16b83d612fb61872cfc419634b65ae2220278f55 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Fri, 23 Oct 2026 18:02:25 +0300
Subject: [PATCH 2/6] fix(checkbox,radio-card,dropdown-item-value): add CR
 fixes #784

---
 .../checkbox/checkbox/checkbox.component.scss   |  3 +++
 .../form/radio-card/radio-card.component.scss   |  2 +-
 src/tedi/components/form/radio/radio.stories.ts | 14 ++++++++++++++
 .../dropdown-item-value.component.scss          | 17 +++++++++++++++--
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/community/components/form/checkbox/checkbox/checkbox.component.scss b/src/community/components/form/checkbox/checkbox/checkbox.component.scss
index 188af0090..23bae9643 100644
--- a/src/community/components/form/checkbox/checkbox/checkbox.component.scss
+++ b/src/community/components/form/checkbox/checkbox/checkbox.component.scss
@@ -68,6 +68,9 @@
 
   &:has(input:active) {
     --_checkbox-border: var(--form-choice-checkbox-unselected-border-active);
+  }
+
+  &:has(input:checked:active, input:indeterminate:active) {
     --_checkbox-bg: var(--form-choice-checkbox-selected-active);
   }
 
diff --git a/src/tedi/components/form/radio-card/radio-card.component.scss b/src/tedi/components/form/radio-card/radio-card.component.scss
index 16146c7cf..f77ed087b 100644
--- a/src/tedi/components/form/radio-card/radio-card.component.scss
+++ b/src/tedi/components/form/radio-card/radio-card.component.scss
@@ -274,7 +274,7 @@ label[tedi-radio-card] {
 
       &:has(input:disabled:not(:checked)) {
         --_card-border: var(
-          --form-choice-card-secondary-unselected-border-disabled
+          --form-choice-card-primary-unselected-border-disabled
         );
       }
 
diff --git a/src/tedi/components/form/radio/radio.stories.ts b/src/tedi/components/form/radio/radio.stories.ts
index 443d2cf71..e5dc243a0 100644
--- a/src/tedi/components/form/radio/radio.stories.ts
+++ b/src/tedi/components/form/radio/radio.stories.ts
@@ -117,6 +117,20 @@ export default {
         },
       },
     },
+    bordered: {
+      control: "boolean",
+      description:
+        "Show a border on an unselected primary card. Has no effect on grouped cards, which always have a border.",
+      table: {
+        category: "Radio Card",
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "false",
+        },
+      },
+    },
     showIndicator: {
       control: "boolean",
       description:
diff --git a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss b/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss
index ab3b5242e..4ed497c7d 100644
--- a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss
+++ b/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss
@@ -156,9 +156,22 @@ li[tedi-dropdown-item],
 
   &:hover:not(.tedi-dropdown-item--disabled, [aria-disabled="true"]) {
     .tedi-dropdown-item-value__radio {
-      background-color: var(--form-choice-radio-unselected-background-default);
-      border-color: var(--form-choice-radio-unselected-border-hover);
       border-width: var(--tedi-borders-02);
+
+      &:not(:checked) {
+        background-color: var(
+          --form-choice-radio-unselected-background-default
+        );
+        border-color: var(--form-choice-radio-unselected-border-hover);
+      }
+
+      &:checked {
+        border-color: var(--form-choice-radio-selected-border-hover);
+
+        &::before {
+          background: var(--form-choice-radio-selected-indicator-hover);
+        }
+      }
     }
   }
 }

From f1e37a651f88eb7e872f3f6f8c5e5a0b40451e1a Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 27 Oct 2026 14:01:40 +0200
Subject: [PATCH 3/6] fix(checkbox,radio): add design review fixes #784

---
 .../checkbox-card.component.scss              |   8 +
 .../form/checkbox/checkbox.stories.ts         | 135 +++++++++++++----
 .../form/radio-card/radio-card.component.scss |   8 +
 .../components/form/radio/radio.stories.ts    | 141 ++++++++++++++----
 4 files changed, 240 insertions(+), 52 deletions(-)

diff --git a/src/tedi/components/form/checkbox-card/checkbox-card.component.scss b/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
index 415d30524..a97da46c4 100644
--- a/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
+++ b/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
@@ -45,6 +45,14 @@ label[tedi-checkbox-card] {
     flex-shrink: 0;
   }
 
+  // The pointer always targets the card label, so the browser keeps forwarding
+  // hover and active to the input. If the input itself could be hovered, moving
+  // from the input back onto the card would drop the input's :hover and the
+  // card's hover styles with it.
+  input[tedi-checkbox] {
+    pointer-events: none;
+  }
+
   .tedi-checkbox-card__content {
     display: flex;
     gap: var(--form-checkbox-radio-card-inner-spacing);
diff --git a/src/tedi/components/form/checkbox/checkbox.stories.ts b/src/tedi/components/form/checkbox/checkbox.stories.ts
index c1bcf1eba..ab882dcd9 100644
--- a/src/tedi/components/form/checkbox/checkbox.stories.ts
+++ b/src/tedi/components/form/checkbox/checkbox.stories.ts
@@ -26,7 +26,8 @@ type StoryCheckboxComponent = CheckboxComponent & {
 };
 
 /**
- * <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.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.102.102?node-id=65246-120117&m=dev" target="_blank">Checkbox Figma ↗</a><br />
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.102.102?node-id=65246-120490&m=dev" target="_blank">Checkbox card Figma ↗</a><br />
  * <a href="https://www.tedi.ee/1ee8444b7/p/796203-checkbox" target="_blank">Zeroheight ↗</a>
  */
 export default {
@@ -481,6 +482,52 @@ export const CardsDefault: StoryObj<CheckboxComponent> = {
   }),
 };
 
+/**
+ * Checkbox cards inside a labelled `tedi-checkbox-group`, with and without an error message.
+ */
+export const CardsWithLabel: StoryObj<CheckboxComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div class="flex flex-wrap gap-4">
+        <tedi-checkbox-group label="Juurvili">
+          <tedi-checkbox-card-group>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" name="cards-label" checked />
+              Kartul
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" name="cards-label" />
+              Peet
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" name="cards-label" />
+              Kapsas
+            </label>
+          </tedi-checkbox-card-group>
+        </tedi-checkbox-group>
+        <tedi-checkbox-group label="Juurvili">
+          <tedi-checkbox-card-group>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" name="cards-label-error" />
+              Kartul
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" name="cards-label-error" />
+              Peet
+            </label>
+            <label tedi-checkbox-card variant="primary">
+              <input tedi-checkbox type="checkbox" name="cards-label-error" />
+              Kapsas
+            </label>
+          </tedi-checkbox-card-group>
+          <tedi-feedback-text text="Valik on kohustuslik" type="error" />
+        </tedi-checkbox-group>
+      </div>
+    `,
+  }),
+};
+
 /**
  * Checkbox cards with a description below the label text.
  */
@@ -664,7 +711,8 @@ type GridPlace = [row: number, column: number | string];
  * Every item gets a desktop and a mobile grid position, swapped below `md`:
  * `mobileLayout="rows"` puts each row label on its own line above cells that
  * share the width;
- * `mobileLayout="columns"` splits the matrix into one section per column.
+ * `mobileLayout="columns"` splits the matrix into one section per column, and
+ * leaves out rows that have no cell in that column.
  * Each cell is rendered once, so input ids and radio names stay unique. Card
  * groups in error cells (`.state-matrix__error`) keep their natural width, while
  * the message may widen the column to stay on one line, and wraps only when the
@@ -690,9 +738,26 @@ const stateMatrix = ({
   };
 }) => {
   const columns = headers.length;
-  const sectionSize = rows.length + 1;
   const byColumns = mobileLayout === "columns";
 
+  const columnRows = headers.map((_, c) => {
+    let next = 0;
+    return rows.map(({ cells }) => (cells[c] ? next++ : null));
+  });
+  const sectionStart = headers.map((_, c) =>
+    columnRows
+      .slice(0, c)
+      .reduce(
+        (start, column) =>
+          start + column.filter((row) => row !== null).length + 1,
+        1,
+      ),
+  );
+  const mobileRow = (c: number, r: number) => {
+    const row = columnRows[c][r];
+    return row === null ? null : sectionStart[c] + row + 1;
+  };
+
   const item = (
     tag: string,
     content: string,
@@ -717,19 +782,21 @@ const stateMatrix = ({
       "strong",
       header,
       [1, c + 2],
-      byColumns ? [c * sectionSize + 1, "1 / -1"] : [1, c + 1],
+      byColumns ? [sectionStart[c], "1 / -1"] : [1, c + 1],
       byColumns && c > 0 ? "state-matrix__section-title" : "",
     ),
   );
 
   const rowItems = rows.map(({ label, cells }, r) => {
     const labels = byColumns
-      ? headers.map((_, c) =>
-          item("strong", label, c === 0 ? [r + 2, 1] : null, [
-            c * sectionSize + r + 2,
-            1,
-          ]),
-        )
+      ? headers.map((_, c) => {
+          const desktop: GridPlace | null = c === 0 ? [r + 2, 1] : null;
+          const row = mobileRow(c, r);
+          const mobile: GridPlace | null = row === null ? null : [row, 1];
+          return desktop || mobile
+            ? item("strong", label, desktop, mobile)
+            : "";
+        })
       : [
           item(
             "strong",
@@ -739,14 +806,15 @@ const stateMatrix = ({
             "state-matrix__row-label",
           ),
         ];
-    const cellItems = cells.map((cell, c) =>
-      item(
+    const cellItems = cells.map((cell, c) => {
+      const row = byColumns ? mobileRow(c, r) : 2 * r + 3;
+      return item(
         "div",
         cell,
         [r + 2, c + 2],
-        byColumns ? [c * sectionSize + r + 2, 2] : [2 * r + 3, c + 1],
-      ),
-    );
+        row === null ? null : [row, byColumns ? 2 : c + 1],
+      );
+    });
     return [...labels, ...cellItems].join("");
   });
 
@@ -830,36 +898,50 @@ const stateRows: {
   id: string;
   attrs?: string;
   labelAttrs?: string;
-  feedback?: boolean;
   unselected?: boolean;
+  error?: boolean;
 }[] = [
   { label: "Default", id: "Default" },
   { label: "Hover", id: "Hover" },
   { label: "Active", id: "Active" },
   { label: "Focus", id: "Focus" },
   { label: "Disabled", id: "Disabled", attrs: "disabled" },
-  { label: "Error", id: "Error", attrs: '[invalid]="true"', feedback: true },
-  { label: "Mandatory", id: "Mandatory", labelAttrs: '[required]="true"' },
+  {
+    label: "Mandatory",
+    id: "Mandatory",
+    labelAttrs: '[required]="true"',
+    error: false,
+  },
   {
     label: "Indeterminate",
     id: "Indeterminate",
     attrs: '[indeterminate]="true"',
     unselected: false,
+    error: false,
   },
 ];
 
+const stateId = (id: string, selected: boolean, error: boolean) =>
+  `${id}${error ? "Error" : ""}${selected ? "Selected" : "Unselected"}`;
+
 const stateCell = (
-  { id, attrs = "", labelAttrs = "", feedback }: (typeof stateRows)[number],
+  { id, attrs = "", labelAttrs = "" }: (typeof stateRows)[number],
   selected: boolean,
+  error = false,
 ) => `
   <div>
     <label tedi-label color="primary" class="flex align-items-center" ${labelAttrs}>
-      <input tedi-checkbox type="checkbox" style="margin-right: var(--form-checkbox-radio-inner-spacing)" id="${id}${selected ? "Selected" : "Unselected"}" ${selected ? "checked" : ""} ${attrs} />
+      <input tedi-checkbox type="checkbox" style="margin-right: var(--form-checkbox-radio-inner-spacing)" id="${stateId(id, selected, error)}" ${selected ? "checked" : ""} ${error ? '[invalid]="true"' : ""} ${attrs} />
       Tekst
     </label>
-    ${feedback ? '<tedi-feedback-text text="Kohustuslik väli" type="error" />' : ""}
+    ${error ? '<tedi-feedback-text text="Kohustuslik väli" type="error" />' : ""}
   </div>`;
 
+const statePseudoIds = (id: string) =>
+  [false, true].flatMap((error) =>
+    [false, true].map((selected) => `#${stateId(id, selected, error)}`),
+  );
+
 /** Gives the States matrix more room between columns and rows on desktop. */
 const statesDesktopGrid = {
   columnWidth: "10.375rem",
@@ -871,22 +953,25 @@ const statesDesktopGrid = {
 export const States: StoryObj<CheckboxComponent> = {
   parameters: {
     pseudo: {
-      hover: ["#HoverUnselected", "#HoverSelected"],
-      active: ["#ActiveUnselected", "#ActiveSelected"],
-      focusVisible: ["#FocusUnselected", "#FocusSelected"],
+      hover: statePseudoIds("Hover"),
+      active: statePseudoIds("Active"),
+      focusVisible: statePseudoIds("Focus"),
     },
   },
   render: (args) => ({
     props: args,
     template: stateMatrix({
-      headers: ["Unselected", "Selected"],
+      headers: ["Unselected", "Selected", "Error unselected", "Error selected"],
       alignItems: "center",
+      mobileLayout: "columns",
       desktopGrid: statesDesktopGrid,
       rows: stateRows.map((row) => ({
         label: row.label,
         cells: [
           row.unselected === false ? "" : stateCell(row, false),
           stateCell(row, true),
+          row.error === false ? "" : stateCell(row, false, true),
+          row.error === false ? "" : stateCell(row, true, true),
         ],
       })),
     }),
diff --git a/src/tedi/components/form/radio-card/radio-card.component.scss b/src/tedi/components/form/radio-card/radio-card.component.scss
index f77ed087b..32ea3aefa 100644
--- a/src/tedi/components/form/radio-card/radio-card.component.scss
+++ b/src/tedi/components/form/radio-card/radio-card.component.scss
@@ -45,6 +45,14 @@ label[tedi-radio-card] {
     flex-shrink: 0;
   }
 
+  // The pointer always targets the card label, so the browser keeps forwarding
+  // hover and active to the input. If the input itself could be hovered, moving
+  // from the input back onto the card would drop the input's :hover and the
+  // card's hover styles with it.
+  input[tedi-radio] {
+    pointer-events: none;
+  }
+
   .tedi-radio-card__content {
     display: flex;
     gap: var(--form-checkbox-radio-card-inner-spacing);
diff --git a/src/tedi/components/form/radio/radio.stories.ts b/src/tedi/components/form/radio/radio.stories.ts
index e5dc243a0..3c44b708a 100644
--- a/src/tedi/components/form/radio/radio.stories.ts
+++ b/src/tedi/components/form/radio/radio.stories.ts
@@ -22,7 +22,8 @@ import { FeedbackTextComponent } from "../feedback-text/feedback-text.component"
 import { AlertComponent } from "../../notifications/alert/alert.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.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.102.102?node-id=65724-11106&m=dev" target="_blank">Radio Figma ↗</a><br />
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.102.102?node-id=65725-251541&m=dev" target="_blank">Radio card Figma ↗</a><br />
  * <a href="https://www.tedi.ee/1ee8444b7/p/93e423-radio" target="_blank">Zeroheight ↗</a>
  */
 export default {
@@ -423,6 +424,52 @@ export const CardsSeparate: StoryObj<RadioComponent> = {
   }),
 };
 
+/**
+ * Radio cards inside a labelled `tedi-radio-group`, with and without an error message.
+ */
+export const CardsWithLabel: StoryObj<RadioComponent> = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div class="flex flex-wrap gap-4">
+        <tedi-radio-group label="Juurvili">
+          <tedi-radio-card-group>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="cards-label" checked />
+              Kartul
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="cards-label" />
+              Peet
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="cards-label" />
+              Kapsas
+            </label>
+          </tedi-radio-card-group>
+        </tedi-radio-group>
+        <tedi-radio-group label="Juurvili">
+          <tedi-radio-card-group>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="cards-label-error" />
+              Kartul
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="cards-label-error" />
+              Peet
+            </label>
+            <label tedi-radio-card variant="primary">
+              <input tedi-radio type="radio" name="cards-label-error" />
+              Kapsas
+            </label>
+          </tedi-radio-card-group>
+          <tedi-feedback-text text="Valik on kohustuslik" type="error" />
+        </tedi-radio-group>
+      </div>
+    `,
+  }),
+};
+
 /**
  * `bordered` gives separated primary cards a border in the unselected state.
  */
@@ -726,7 +773,8 @@ type GridPlace = [row: number, column: number | string];
  * Every item gets a desktop and a mobile grid position, swapped below `md`:
  * `mobileLayout="rows"` puts each row label on its own line above cells that
  * share the width;
- * `mobileLayout="columns"` splits the matrix into one section per column.
+ * `mobileLayout="columns"` splits the matrix into one section per column, and
+ * leaves out rows that have no cell in that column.
  * Each cell is rendered once, so input ids and radio names stay unique. Card
  * groups in error cells (`.state-matrix__error`) keep their natural width, while
  * the message may widen the column to stay on one line, and wraps only when the
@@ -752,9 +800,26 @@ const stateMatrix = ({
   };
 }) => {
   const columns = headers.length;
-  const sectionSize = rows.length + 1;
   const byColumns = mobileLayout === "columns";
 
+  const columnRows = headers.map((_, c) => {
+    let next = 0;
+    return rows.map(({ cells }) => (cells[c] ? next++ : null));
+  });
+  const sectionStart = headers.map((_, c) =>
+    columnRows
+      .slice(0, c)
+      .reduce(
+        (start, column) =>
+          start + column.filter((row) => row !== null).length + 1,
+        1,
+      ),
+  );
+  const mobileRow = (c: number, r: number) => {
+    const row = columnRows[c][r];
+    return row === null ? null : sectionStart[c] + row + 1;
+  };
+
   const item = (
     tag: string,
     content: string,
@@ -779,19 +844,21 @@ const stateMatrix = ({
       "strong",
       header,
       [1, c + 2],
-      byColumns ? [c * sectionSize + 1, "1 / -1"] : [1, c + 1],
+      byColumns ? [sectionStart[c], "1 / -1"] : [1, c + 1],
       byColumns && c > 0 ? "state-matrix__section-title" : "",
     ),
   );
 
   const rowItems = rows.map(({ label, cells }, r) => {
     const labels = byColumns
-      ? headers.map((_, c) =>
-          item("strong", label, c === 0 ? [r + 2, 1] : null, [
-            c * sectionSize + r + 2,
-            1,
-          ]),
-        )
+      ? headers.map((_, c) => {
+          const desktop: GridPlace | null = c === 0 ? [r + 2, 1] : null;
+          const row = mobileRow(c, r);
+          const mobile: GridPlace | null = row === null ? null : [row, 1];
+          return desktop || mobile
+            ? item("strong", label, desktop, mobile)
+            : "";
+        })
       : [
           item(
             "strong",
@@ -801,14 +868,15 @@ const stateMatrix = ({
             "state-matrix__row-label",
           ),
         ];
-    const cellItems = cells.map((cell, c) =>
-      item(
+    const cellItems = cells.map((cell, c) => {
+      const row = byColumns ? mobileRow(c, r) : 2 * r + 3;
+      return item(
         "div",
         cell,
         [r + 2, c + 2],
-        byColumns ? [c * sectionSize + r + 2, 2] : [2 * r + 3, c + 1],
-      ),
-    );
+        row === null ? null : [row, byColumns ? 2 : c + 1],
+      );
+    });
     return [...labels, ...cellItems].join("");
   });
 
@@ -892,32 +960,45 @@ const stateRows: {
   id: string;
   attrs?: string;
   labelAttrs?: string;
-  feedback?: boolean;
+  error?: boolean;
 }[] = [
   { label: "Default", id: "Default" },
   { label: "Hover", id: "Hover" },
   { label: "Active", id: "Active" },
   { label: "Disabled", id: "Disabled", attrs: "disabled" },
   { label: "Focus", id: "Focus" },
-  { label: "Error", id: "Error", attrs: '[invalid]="true"', feedback: true },
-  { label: "Mandatory", id: "Mandatory", labelAttrs: '[required]="true"' },
+  {
+    label: "Mandatory",
+    id: "Mandatory",
+    labelAttrs: '[required]="true"',
+    error: false,
+  },
 ];
 
+const stateId = (id: string, selected: boolean, error: boolean) =>
+  `${id}${error ? "Error" : ""}${selected ? "Selected" : "Unselected"}`;
+
 const stateCell = (
-  { id, attrs = "", labelAttrs = "", feedback }: (typeof stateRows)[number],
+  { id, attrs = "", labelAttrs = "" }: (typeof stateRows)[number],
   selected: boolean,
+  error = false,
 ) => {
-  const radioId = `${id}${selected ? "Selected" : "Unselected"}`;
+  const radioId = stateId(id, selected, error);
   return `
   <div>
     <label tedi-label color="primary" class="flex align-items-center" ${labelAttrs}>
-      <input tedi-radio type="radio" style="margin-right: var(--form-checkbox-radio-inner-spacing)" name="state-${radioId}" id="${radioId}" ${selected ? "checked" : ""} ${attrs} />
+      <input tedi-radio type="radio" style="margin-right: var(--form-checkbox-radio-inner-spacing)" name="state-${radioId}" id="${radioId}" ${selected ? "checked" : ""} ${error ? '[invalid]="true"' : ""} ${attrs} />
       Tekst
     </label>
-    ${feedback ? '<tedi-feedback-text text="Kohustuslik väli" type="error" />' : ""}
+    ${error ? '<tedi-feedback-text text="Kohustuslik väli" type="error" />' : ""}
   </div>`;
 };
 
+const statePseudoIds = (id: string) =>
+  [false, true].flatMap((error) =>
+    [false, true].map((selected) => `#${stateId(id, selected, error)}`),
+  );
+
 /** Gives the States matrix more room between columns and rows on desktop. */
 const statesDesktopGrid = {
   columnWidth: "10.375rem",
@@ -929,20 +1010,26 @@ const statesDesktopGrid = {
 export const States: StoryObj<RadioComponent> = {
   parameters: {
     pseudo: {
-      hover: ["#HoverUnselected", "#HoverSelected"],
-      active: ["#ActiveUnselected", "#ActiveSelected"],
-      focusVisible: ["#FocusUnselected", "#FocusSelected"],
+      hover: statePseudoIds("Hover"),
+      active: statePseudoIds("Active"),
+      focusVisible: statePseudoIds("Focus"),
     },
   },
   render: (args) => ({
     props: args,
     template: stateMatrix({
-      headers: ["Unselected", "Selected"],
+      headers: ["Unselected", "Selected", "Error unselected", "Error selected"],
       alignItems: "center",
+      mobileLayout: "columns",
       desktopGrid: statesDesktopGrid,
       rows: stateRows.map((row) => ({
         label: row.label,
-        cells: [stateCell(row, false), stateCell(row, true)],
+        cells: [
+          stateCell(row, false),
+          stateCell(row, true),
+          row.error === false ? "" : stateCell(row, false, true),
+          row.error === false ? "" : stateCell(row, true, true),
+        ],
       })),
     }),
     styles: stateMatrixStyles,

From 5367b568050ca2ea69b52666d185ab01a69f72c0 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 27 Oct 2026 14:44:52 +0200
Subject: [PATCH 4/6] fix(checkbox,radio): keep cards at their content height
 by default #784

---
 .../checkbox-card-group.component.scss               |  2 ++
 .../form/checkbox-card/checkbox-card.component.scss  | 12 +++++++++++-
 .../components/form/checkbox/checkbox.stories.ts     |  2 ++
 .../radio-card-group/radio-card-group.component.scss |  4 ++++
 .../form/radio-card/radio-card.component.scss        | 12 +++++++++++-
 src/tedi/components/form/radio/radio.stories.ts      |  2 ++
 6 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/tedi/components/form/checkbox-card-group/checkbox-card-group.component.scss b/src/tedi/components/form/checkbox-card-group/checkbox-card-group.component.scss
index 84cc5c9e8..cb46b0e61 100644
--- a/src/tedi/components/form/checkbox-card-group/checkbox-card-group.component.scss
+++ b/src/tedi/components/form/checkbox-card-group/checkbox-card-group.component.scss
@@ -1,5 +1,7 @@
+// Cards keep their own content height by default; stretch them where equal heights are needed
 .tedi-checkbox-card-group {
   display: flex;
   flex-wrap: wrap;
   gap: var(--form-checkbox-radio-card-gutter);
+  align-items: flex-start;
 }
diff --git a/src/tedi/components/form/checkbox-card/checkbox-card.component.scss b/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
index a97da46c4..179ebcccc 100644
--- a/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
+++ b/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
@@ -17,7 +17,7 @@ label[tedi-checkbox-card] {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: flex-start;
   min-height: var(--form-field-height);
   padding: calc(
       var(--form-checkbox-radio-card-checkbox-padding-y) - var(
@@ -35,6 +35,16 @@ label[tedi-checkbox-card] {
   border-radius: var(--form-checkbox-radio-card-radius);
   box-shadow: var(--_card-inset), var(--_card-ring);
 
+  &::before,
+  &::after {
+    flex: 1 1 0;
+    max-height: calc(
+      (var(--form-field-height) - var(--body-regular-line-height)) /
+        2 - var(--form-checkbox-radio-card-checkbox-padding-y)
+    );
+    content: "";
+  }
+
   [tedi-text],
   tedi-icon {
     color: inherit;
diff --git a/src/tedi/components/form/checkbox/checkbox.stories.ts b/src/tedi/components/form/checkbox/checkbox.stories.ts
index ab882dcd9..f5110a799 100644
--- a/src/tedi/components/form/checkbox/checkbox.stories.ts
+++ b/src/tedi/components/form/checkbox/checkbox.stories.ts
@@ -538,6 +538,7 @@ export const CardsWithDescription: StoryObj<CheckboxComponent> = {
       `
         .cards-with-description__stretch {
           display: flex;
+          align-items: stretch;
         }
 
         .cards-with-description__stretch label[tedi-checkbox-card] {
@@ -602,6 +603,7 @@ export const CardsWithIcons: StoryObj<CheckboxComponent> = {
       `
         .cards-with-icons__stretch {
           display: flex;
+          align-items: stretch;
         }
 
         .cards-with-icons__stretch label[tedi-checkbox-card] {
diff --git a/src/tedi/components/form/radio-card-group/radio-card-group.component.scss b/src/tedi/components/form/radio-card-group/radio-card-group.component.scss
index 57f0f5cce..3c995bf54 100644
--- a/src/tedi/components/form/radio-card-group/radio-card-group.component.scss
+++ b/src/tedi/components/form/radio-card-group/radio-card-group.component.scss
@@ -1,11 +1,15 @@
+// Cards keep their own content height by default; stretch them where equal heights are needed
 .tedi-radio-card-group {
   display: flex;
   flex-wrap: wrap;
   gap: var(--form-checkbox-radio-card-gutter);
+  align-items: flex-start;
 
+  // Grouped cards share borders, so they always fill the row height
   &--grouped {
     display: inline-flex;
     flex-wrap: nowrap;
     gap: 0;
+    align-items: stretch;
   }
 }
diff --git a/src/tedi/components/form/radio-card/radio-card.component.scss b/src/tedi/components/form/radio-card/radio-card.component.scss
index 32ea3aefa..c8f4a91f6 100644
--- a/src/tedi/components/form/radio-card/radio-card.component.scss
+++ b/src/tedi/components/form/radio-card/radio-card.component.scss
@@ -17,7 +17,7 @@ label[tedi-radio-card] {
   display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
-  justify-content: center;
+  justify-content: flex-start;
   min-height: var(--form-field-height);
   padding: calc(
       var(--form-checkbox-radio-card-checkbox-padding-y) - var(
@@ -35,6 +35,16 @@ label[tedi-radio-card] {
   border-radius: var(--form-checkbox-radio-card-radius);
   box-shadow: var(--_card-inset), var(--_card-ring);
 
+  &::before,
+  &::after {
+    flex: 1 1 0;
+    max-height: calc(
+      (var(--form-field-height) - var(--body-regular-line-height)) /
+        2 - var(--form-checkbox-radio-card-checkbox-padding-y)
+    );
+    content: "";
+  }
+
   [tedi-text],
   tedi-icon {
     color: inherit;
diff --git a/src/tedi/components/form/radio/radio.stories.ts b/src/tedi/components/form/radio/radio.stories.ts
index 3c44b708a..2100b869e 100644
--- a/src/tedi/components/form/radio/radio.stories.ts
+++ b/src/tedi/components/form/radio/radio.stories.ts
@@ -560,6 +560,7 @@ export const CardsWithDescription: StoryObj<RadioComponent> = {
       `
         .cards-with-description tedi-radio-card-group {
           display: flex;
+          align-items: stretch;
         }
 
         .cards-with-description label[tedi-radio-card] {
@@ -664,6 +665,7 @@ export const CardsWithIcons: StoryObj<RadioComponent> = {
       `
         .cards-with-icons__stretch {
           display: flex;
+          align-items: stretch;
         }
 
         .cards-with-icons__stretch label[tedi-radio-card] {

From 0cadb909d2468b3f34861d1aa0648d48ff4c3331 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 27 Oct 2026 14:58:40 +0200
Subject: [PATCH 5/6] fix(checkbox): keep selected error and disabled
 indeterminate colors in community Checkbox #784

---
 .../form/checkbox/checkbox/checkbox.component.scss           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/community/components/form/checkbox/checkbox/checkbox.component.scss b/src/community/components/form/checkbox/checkbox/checkbox.component.scss
index 23bae9643..a7bf3d30d 100644
--- a/src/community/components/form/checkbox/checkbox/checkbox.component.scss
+++ b/src/community/components/form/checkbox/checkbox/checkbox.component.scss
@@ -81,12 +81,13 @@
     --_checkbox-border: var(--form-input-border-disabled);
   }
 
-  &:has(input:disabled:checked) {
+  &:has(input:disabled:checked, input:disabled:indeterminate) {
     --_checkbox-bg: var(--form-choice-checkbox-selected-disabled);
     --_checkbox-border: var(--form-choice-checkbox-selected-border-disabled);
   }
 
-  &--error {
+  // Error colours apply to unselected boxes only; selected ones keep their fill
+  &--error:has(input:not(:checked, :indeterminate, :disabled)) {
     --_checkbox-bg: var(--form-choice-checkbox-unselected-default);
     --_checkbox-border: var(--form-general-feedback-error-border);
   }

From 6ce982a26efa6defc294200a3aeec2b50af40db6 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 28 Oct 2026 11:09:50 +0200
Subject: [PATCH 6/6] fix(checkbox,radio): keep default indicator size inside
 cards on mobile #784

---
 .../form/checkbox-card/checkbox-card.component.scss         | 6 ++++--
 .../components/form/radio-card/radio-card.component.scss    | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/tedi/components/form/checkbox-card/checkbox-card.component.scss b/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
index 179ebcccc..acd599486 100644
--- a/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
+++ b/src/tedi/components/form/checkbox-card/checkbox-card.component.scss
@@ -8,6 +8,7 @@ $selected-border-inset: calc(
 );
 
 label[tedi-checkbox-card] {
+  --form-checkbox-radio-size-responsive: var(--form-checkbox-radio-size-fixed);
   --_card-bg: transparent;
   --_card-text: inherit;
   --_card-border: transparent;
@@ -60,6 +61,8 @@ label[tedi-checkbox-card] {
   // from the input back onto the card would drop the input's :hover and the
   // card's hover styles with it.
   input[tedi-checkbox] {
+    --_checkbox-icon-size: 1rem;
+
     pointer-events: none;
   }
 
@@ -78,8 +81,7 @@ label[tedi-checkbox-card] {
   }
 
   // An icon before the label pushes the label text right by the icon and one more
-  // gap, so the description lines up with the text instead of the icon. The icon
-  // keeps its 18px size while the indicator grows on small screens
+  // gap, so the description lines up with the text instead of the icon
   &:has(> .tedi-checkbox-card__content > tedi-icon) > .tedi-feedback-text {
     padding-left: calc(
       var(--form-checkbox-radio-size-responsive) + var(--icon-03) +
diff --git a/src/tedi/components/form/radio-card/radio-card.component.scss b/src/tedi/components/form/radio-card/radio-card.component.scss
index c8f4a91f6..612e286e3 100644
--- a/src/tedi/components/form/radio-card/radio-card.component.scss
+++ b/src/tedi/components/form/radio-card/radio-card.component.scss
@@ -8,6 +8,7 @@ $selected-border-inset: calc(
 );
 
 label[tedi-radio-card] {
+  --form-checkbox-radio-size-responsive: var(--form-checkbox-radio-size-fixed);
   --_card-bg: transparent;
   --_card-text: inherit;
   --_card-border: transparent;
@@ -78,8 +79,7 @@ label[tedi-radio-card] {
   }
 
   // An icon before the label pushes the label text right by the icon and one more
-  // gap, so the description lines up with the text instead of the icon. The icon
-  // keeps its 18px size while the indicator grows on small screens
+  // gap, so the description lines up with the text instead of the icon
   &:has(> .tedi-radio-card__content > tedi-icon) > .tedi-feedback-text {
     padding-left: calc(
       var(--form-checkbox-radio-size-responsive) + var(--icon-03) +