siemens · danielleroux · Nov 30, 2022 · Nov 25, 2022 · Nov 28, 2022 · Nov 28, 2022
diff --git a/packages/core/scss/components/_checkboxes.scss b/packages/core/scss/components/_checkboxes.scss
@@ -15,6 +15,7 @@
   [type='checkbox']:checked {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .ag-checkbox-input-wrapper {

diff --git a/packages/core/scss/components/_radiobuttons.scss b/packages/core/scss/components/_radiobuttons.scss
@@ -8,13 +8,14 @@
  */
 
 @mixin radio-basic() {
-  $size: $large-space;
+  $size: 1.25rem;
 
   /* Base for label styling */
   [type='radio']:not(:checked),
   [type='radio']:checked {
     position: absolute;
-    opacity: 0;
+    display: none;
+    pointer-events: none;
   }
 
   [type='radio']:not(:checked) + label,
@@ -47,14 +48,14 @@
 
   [type='radio'] + label:focus-visible {
     &:before {
-      outline: 1px solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--focus--border-color);
       outline-offset: var(--theme-radiobtn--focus--outline-offset);
     }
   }
 
   [type='radio']:focus-visible + label {
     &:before {
-      outline: 1px solid var(--focus--border-color);
+      outline: 0.0625rem solid var(--focus--border-color);
       outline-offset: var(--theme-radiobtn--focus--outline-offset);
     }
   }
@@ -94,15 +95,14 @@
 
     & + label:after {
       content: '';
-      width: 10px;
-      height: 10px;
+      width: 0.625rem;
+      height: 0.625rem;
       display: block;
       background-color: var(--theme-radiobtn-checked--color);
       border-radius: 100%;
-      transform: scale(1.5);
       position: absolute;
-      top: 7px;
-      left: 7px;
+      top: 0.3125rem;
+      left: 0.3125rem;
     }
 
     &:hover + label:before {
@@ -138,10 +138,10 @@
       content: '';
       position: relative;
       display: block;
-      width: 14px;
-      height: 1px;
-      border-bottom: 2px solid var(--theme-radiobtn-mixed--color);
-      transform: translateX(5px) translateY(-0.8rem);
+      width: 0.875rem;
+      height: 0.0625rem;
+      border-bottom: 0.125rem solid var(--theme-radiobtn-mixed--color);
+      transform: translateX(0.3125rem) translateY(-0.8rem);
     }
 
     & + label:before {

diff --git a/packages/core/src/components/radiobutton/test/basic/index.html b/packages/core/src/components/radiobutton/test/basic/index.html
@@ -0,0 +1,27 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <input checked id="checkbox_1_1" name="group_1" type="radio" />
+    <label for="checkbox_1_1"> Checked </label>
+
+    <input id="checkbox_1_2" name="group_1" type="radio" />
+    <label for="checkbox_1_2"> Normal </label>
+
+    <input disabled id="checkbox_1_3" name="group_1" type="radio" />
+    <label for="checkbox_1_3"> Disabled </label>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts b/packages/core/src/components/radiobutton/test/radiobutton.e2e.ts
@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest.describe('radiobutton', () => {
+  regressionTest('basic', async ({ page }) => {
+    await page.goto(`radiobutton/test/basic`);
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('basic hover checked', async ({ page }) => {
+    await page.goto(`radiobutton/test/basic`);
+
+    const noCheckedCheckbox = await page.waitForSelector(
+      'label[for="checkbox_1_1"]'
+    );
+
+    await noCheckedCheckbox.hover();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('basic hover unchecked', async ({ page }) => {
+    await page.goto(`radiobutton/test/basic`);
+
+    const noCheckedCheckbox = await page.waitForSelector(
+      'label[for="checkbox_1_2"]'
+    );
+
+    await noCheckedCheckbox.hover();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/...on.e2e.ts-snapshots/radiobutton-basic-1-chromium---theme-classic-dark-linux.png b/...on.e2e.ts-snapshots/radiobutton-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...n.e2e.ts-snapshots/radiobutton-basic-1-chromium---theme-classic-light-linux.png b/...n.e2e.ts-snapshots/radiobutton-basic-1-chromium---theme-classic-light-linux.png
diff --git a/....ts-snapshots/radiobutton-basic-hover-1-chromium---theme-classic-dark-linux.png b/....ts-snapshots/radiobutton-basic-hover-1-chromium---theme-classic-dark-linux.png
diff --git a/...ts-snapshots/radiobutton-basic-hover-1-chromium---theme-classic-light-linux.png b/...ts-snapshots/radiobutton-basic-hover-1-chromium---theme-classic-light-linux.png
diff --git a/...shots/radiobutton-basic-hover-checked-1-chromium---theme-classic-dark-linux.png b/...shots/radiobutton-basic-hover-checked-1-chromium---theme-classic-dark-linux.png
diff --git a/...hots/radiobutton-basic-hover-checked-1-chromium---theme-classic-light-linux.png b/...hots/radiobutton-basic-hover-checked-1-chromium---theme-classic-light-linux.png
diff --git a/...ots/radiobutton-basic-hover-unchecked-1-chromium---theme-classic-dark-linux.png b/...ots/radiobutton-basic-hover-unchecked-1-chromium---theme-classic-dark-linux.png
diff --git a/...ts/radiobutton-basic-hover-unchecked-1-chromium---theme-classic-light-linux.png b/...ts/radiobutton-basic-hover-unchecked-1-chromium---theme-classic-light-linux.png