From 7a40cf59f9c523d5dfeba6dceaa612ab0e039718 Mon Sep 17 00:00:00 2001
From: "fabian.wilms" <fabian.wilms@muenchen.de>
Date: Thu, 25 Sep 2025 12:50:36 +0200
Subject: [PATCH 1/3] :ok_hand: :lipstick: FB JH: First feedback solved

---
 .../src/components/ChecklistList.vue          | 117 +++++++-----------
 .../src/components/P13nCheckbox.vue           |  91 ++++++++++++++
 2 files changed, 137 insertions(+), 71 deletions(-)
 create mode 100644 personalization-webcomponents/src/components/P13nCheckbox.vue

diff --git a/personalization-webcomponents/src/components/ChecklistList.vue b/personalization-webcomponents/src/components/ChecklistList.vue
index e142d617..b869f24d 100644
--- a/personalization-webcomponents/src/components/ChecklistList.vue
+++ b/personalization-webcomponents/src/components/ChecklistList.vue
@@ -18,7 +18,6 @@
           role="listitem"
           aria-roledescription="sortierbares Listenelement"
           :class="{
-            muted: element.checked !== null,
             'keyboard-dragging': draggedIndex === index,
           }"
           :aria-grabbed="draggedIndex === index ? 'true' : 'false'"
@@ -28,20 +27,28 @@
           :key="element.serviceID"
           @keydown="handleEnterKeyDown"
         >
-          <input
-            type="checkbox"
+          <p13n-checkbox
             :id="'cb-' + element.serviceID"
-            class="radio-look"
-            :checked="element.checked !== null"
+            :checked="!!element.checked"
             :disabled="disabled"
-            @change="() => onSelectChange(element.serviceID)"
+            @check="() => onSelectChange(element.serviceID)"
           />
           <span
+            tabindex="0"
             class="label-text"
-            @click.prevent="openDialog(element)"
-            style="cursor: pointer"
+            :class="{
+              muted: element.checked !== null,
+            }"
+            @click="(evt) => openDialog(element, evt)"
+            @keydown="(evt) => evt.keyCode == 32 ? openDialog(element, evt) : null"
           >
             <b>{{ element.title }}</b>
+            <span
+                class="required-label"
+                v-if="element.required"
+            >
+              - verpflichtend
+            </span>
           </span>
           <span
             v-if="isDraggable"
@@ -81,6 +88,7 @@ import type ChecklistItem from "@/api/persservice/ChecklistItem.ts";
 import { MucIcon } from "@muenchen/muc-patternlab-vue";
 import { Sortable } from "sortablejs-vue3";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import P13nCheckbox from "@/components/P13nCheckbox.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -120,7 +128,8 @@ function onSelectChange(serviceID: string) {
   emit("checked", serviceID);
 }
 
-function openDialog(item: ChecklistItem) {
+function openDialog(item: ChecklistItem, evt: Event) {
+  evt.preventDefault();
   dialogItem.value = item;
   dialogVisible.value = true;
   emit("label-click", item);
@@ -198,7 +207,6 @@ function handleArrowKeyDown(event: KeyboardEvent) {
 .list-item {
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
   border-bottom: 1px solid #ddd;
   user-select: none;
   cursor: grab;
@@ -211,75 +219,32 @@ function handleArrowKeyDown(event: KeyboardEvent) {
 
 /* text grayed out when selected */
 .muted {
-  color: #7a8d9f;
+  color: #7a8d9f !important;
 }
 
-.radio-look {
-  appearance: none;
-  -webkit-appearance: none;
-  flex: 0 0 16px;
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--color-neutrals-grey);
-  border-radius: 50%;
-  background: white;
-  box-sizing: border-box;
-  margin-right: 0.8rem;
-  position: relative;
+.label-text {
   cursor: pointer;
-  outline-offset: 2px;
-  transition:
-    border-color 0.2s ease,
-    background-color 0.2s ease;
-}
-
-.radio-look:hover {
-  border-color: var(--color-brand-main-blue);
-  background-color: #cce4ff;
-}
-
-.radio-look:hover::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 10px;
-  height: 10px;
-  background-color: var(--color-brand-main-blue);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0.3;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-
-.radio-look:checked {
-  border-color: var(--color-brand-main-blue);
-  background-color: var(--color-brand-main-blue);
-}
-
-.radio-look:checked::before {
-  content: "✓";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  color: white;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 1;
-  transform: translate(-50%, -45%);
-  pointer-events: none;
+  color: var(--color-brand-main-blue);
+  /* Body/Body 1 Bold */
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 27px */
+
+  padding: 16px 8px;
+  flex-grow: 1;
   user-select: none;
-  transition: color 0.2s ease;
 }
 
-.radio-look:checked:hover::before {
-  opacity: 0.8;
+.label-text:hover {
+  text-decoration: underline;
 }
 
-.label-text {
-  flex-grow: 1;
-  user-select: none;
+@media (max-width: 450px) {
+  .label-text {
+    padding: 12px 8px;
+  }
 }
 
 .drag-handle {
@@ -320,4 +285,14 @@ function handleArrowKeyDown(event: KeyboardEvent) {
   overflow-y: auto;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
+
+.required-label {
+  color: var(--neutrals-grey, #3A5368);
+  /* Body/Body 2 */
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
 </style>
diff --git a/personalization-webcomponents/src/components/P13nCheckbox.vue b/personalization-webcomponents/src/components/P13nCheckbox.vue
new file mode 100644
index 00000000..f44a188f
--- /dev/null
+++ b/personalization-webcomponents/src/components/P13nCheckbox.vue
@@ -0,0 +1,91 @@
+<template>
+
+  <div
+      tabindex="0"
+      class="radio-look"
+      :disabled="disabled"
+      :checked="checked"
+      @click="emit('check')"
+      @keydown="(evt) => evt.keyCode == 32 ? emit('check') : null"
+  >
+    <muc-icon
+        class="icon check-icon"
+        icon="check"
+        :color="checked ? 'white' : 'var(--color-neutrals-blue)'"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {MucIcon} from "@muenchen/muc-patternlab-vue";
+
+const props = withDefaults(
+    defineProps<{
+      checked?: boolean;
+      disabled?: boolean;
+    }>(),
+    {
+      checked: false,
+      disabled: false,
+    }
+);
+
+const emit = defineEmits(["check"])
+</script>
+
+<style scoped>
+.radio-look {
+  --radio-button-size: 24px;
+  --radio-button-border-width: 2px;
+
+  display: inline-block;
+  appearance: none;
+  -webkit-appearance: none;
+  flex: 0 0 auto;
+  width: var(--radio-button-size);
+  height: var(--radio-button-size);
+  border: var(--radio-button-border-width) solid var(--color-neutrals-grey);
+  border-radius: var(--radio-button-size);
+  background: white;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  outline-offset: var(--radio-button-border-width);
+  transition: border-color 0.3s ease,
+  background-color 0.3s ease;
+}
+
+.check-icon {
+  display: block;
+  margin: auto;
+  width: calc(var(--radio-button-size) - (2*var(--radio-button-border-width)));
+  height: calc(var(--radio-button-size) - (2*var(--radio-button-border-width)));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.radio-look[checked]:hover, .radio-look[checked]:focus {
+  border-color: var(--color-brand-main-blue);
+  background-color: var(--color-neutrals-blue);
+}
+
+.radio-look[checked=false]:hover .check-icon, .radio-look[checked=false]:focus .check-icon {
+  opacity: 1;
+}
+.radio-look[checked=true]:hover .check-icon, .radio-look[checked=true]:focus .check-icon {
+  opacity: 0;
+}
+
+.radio-look[checked=true] {
+  border-color: var(--color-brand-main-blue-dark, #004376);
+  background-color: var(--color-brand-main-blue)
+}
+
+.radio-look[checked=true] .check-icon {
+  opacity: 1;
+}
+
+
+</style>
+<script setup lang="ts">
+</script>
\ No newline at end of file

From 09a4e712ca3d12d2fefc5c094e488f53266f1f5b Mon Sep 17 00:00:00 2001
From: "fabian.wilms" <fabian.wilms@muenchen.de>
Date: Thu, 25 Sep 2025 13:16:16 +0200
Subject: [PATCH 2/3] :ok_hand: :lipstick: FB JH: further design improvements

---
 .../src/ChecklistDetail.ce.vue                | 24 +++++++++++--------
 .../src/components/ChecklistList.vue          | 21 +++++++++-------
 .../src/components/P13nCheckbox.vue           | 16 +++++++++----
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/personalization-webcomponents/src/ChecklistDetail.ce.vue b/personalization-webcomponents/src/ChecklistDetail.ce.vue
index 346cd261..73bda7e6 100644
--- a/personalization-webcomponents/src/ChecklistDetail.ce.vue
+++ b/personalization-webcomponents/src/ChecklistDetail.ce.vue
@@ -24,6 +24,7 @@
               <checklist-list
                 v-if="openCheckList.length !== 0"
                 :checklist-items="openCheckList"
+                :disabled="loadingSort || loadingCheck"
                 @checked="onCheckedOpen"
                 @sort="onSortOpen"
               ></checklist-list>
@@ -31,15 +32,15 @@
                 v-else
                 class="banner"
                 type="success"
-                >Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir
-                bewahren diese Checkliste noch bis zum {{ deletionDate }} für
-                Sie auf. Danach wird sie automatisch gelöscht.
+                >
+                Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir bewahren diese Checkliste noch bis zum {{ deletionDate }} für Sie auf. Danach wird sie automatisch gelöscht.
               </muc-banner>
               <h2 class="headline">
                 Erledigte Aufgaben ({{ closedCheckList.length }})
               </h2>
               <checklist-list
                 v-if="closedCheckList.length !== 0"
+                :disabled="loadingSort || loadingCheck"
                 :checklist-items="closedCheckList"
                 @checked="onCheckedClosed"
                 :is-draggable="false"
@@ -48,7 +49,8 @@
                 v-else
                 class="banner"
                 type="info"
-                >Sie haben noch keine erledigten Aufgaben. Haken Sie Aufgaben in
+                >
+                Sie haben noch keine erledigten Aufgaben. Haken Sie Aufgaben in
                 der Checkliste ab, um sie als erledigt zu markieren.
               </muc-banner>
             </div>
@@ -78,6 +80,8 @@ import { QUERY_PARAM_CHECKLIST_ID, setAccessToken } from "@/util/Constants.ts";
 
 const checklist = ref<Checklist | null>(null);
 const loading = ref(true);
+const loadingSort = ref(false);
+const loadingCheck = ref(false);
 
 const { loggedIn } = useDBSLoginWebcomponentPlugin(_authChangedCallback);
 
@@ -152,7 +156,7 @@ const deletionDate = computed(() => {
 
 function onCheckedOpen(serviceID: string) {
   if (checklist.value) {
-    loading.value = true;
+    loadingCheck.value = true;
     const service = new ChecklistService();
     service
       .checkChecklistentry(checklist.value.id, serviceID)
@@ -170,13 +174,13 @@ function onCheckedOpen(serviceID: string) {
       .catch((err) => {
         console.debug(err);
       })
-      .finally(() => (loading.value = false));
+      .finally(() => (loadingCheck.value = false));
   }
 }
 
 function onCheckedClosed(serviceID: string) {
   if (checklist.value) {
-    loading.value = true;
+    loadingCheck.value = true;
     const service = new ChecklistService();
     service
       .uncheckChecklistentry(checklist.value.id, serviceID)
@@ -194,7 +198,7 @@ function onCheckedClosed(serviceID: string) {
       .catch((err) => {
         console.debug(err);
       })
-      .finally(() => (loading.value = false));
+      .finally(() => (loadingCheck.value = false));
   }
 }
 
@@ -211,7 +215,7 @@ function onSortOpen(evt: { oldIndex: number; newIndex: number }) {
     return item.serviceID === elementToSort.serviceID;
   }) as number;
   if (oldIndex >= 0 && checklist.value) {
-    loading.value = true;
+    loadingSort.value = true;
 
     const newIndex = oldIndex + (evt.newIndex - evt.oldIndex);
     const element = checklist.value.checklistItems[oldIndex] as ChecklistItem;
@@ -235,7 +239,7 @@ function onSortOpen(evt: { oldIndex: number; newIndex: number }) {
       .catch((err) => {
         console.debug(err);
       })
-      .finally(() => (loading.value = false));
+      .finally(() => (loadingSort.value = false));
   }
 }
 </script>
diff --git a/personalization-webcomponents/src/components/ChecklistList.vue b/personalization-webcomponents/src/components/ChecklistList.vue
index b869f24d..4e1b4bc3 100644
--- a/personalization-webcomponents/src/components/ChecklistList.vue
+++ b/personalization-webcomponents/src/components/ChecklistList.vue
@@ -29,8 +29,10 @@
         >
           <p13n-checkbox
             :id="'cb-' + element.serviceID"
+            :aria-label="!!element.checked ? element.title + ' als nicht erledigt markieren.' : element.title + ' als erledigt markieren.'"
             :checked="!!element.checked"
             :disabled="disabled"
+            style="margin-left: 8px;"
             @check="() => onSelectChange(element.serviceID)"
           />
           <span
@@ -191,23 +193,24 @@ function handleArrowKeyDown(event: KeyboardEvent) {
   background-color: #d0e7ff;
 }
 
-.container {
-  max-width: 600px;
-  margin: 1rem auto;
-  padding-left: 0;
-}
-
 .list {
   list-style: none;
   padding: 0;
   margin: 0;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
+}
+
+.container {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 56px;
 }
 
 .list-item {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
   user-select: none;
   cursor: grab;
   color: var(--color-brand-main-blue);
@@ -241,7 +244,7 @@ function handleArrowKeyDown(event: KeyboardEvent) {
   text-decoration: underline;
 }
 
-@media (max-width: 450px) {
+@media (max-width: 576px) {
   .label-text {
     padding: 12px 8px;
   }
diff --git a/personalization-webcomponents/src/components/P13nCheckbox.vue b/personalization-webcomponents/src/components/P13nCheckbox.vue
index f44a188f..6fa0ed56 100644
--- a/personalization-webcomponents/src/components/P13nCheckbox.vue
+++ b/personalization-webcomponents/src/components/P13nCheckbox.vue
@@ -4,8 +4,9 @@
       tabindex="0"
       class="radio-look"
       :disabled="disabled"
+      :aria-disabled="disabled"
       :checked="checked"
-      @click="emit('check')"
+      @click="!disabled ? emit('check') : null"
       @keydown="(evt) => evt.keyCode == 32 ? emit('check') : null"
   >
     <muc-icon
@@ -64,19 +65,24 @@ const emit = defineEmits(["check"])
   transition: opacity 0.3s ease;
 }
 
-.radio-look[checked]:hover, .radio-look[checked]:focus {
+.radio-look[disabled=true] {
+  border-color: var(--color-neutrals-grey);
+  background: var(--gray-x-light, #9CA8B3);
+}
+
+.radio-look[checked][disabled=false]:hover, .radio-look[checked][disabled=false]:focus {
   border-color: var(--color-brand-main-blue);
   background-color: var(--color-neutrals-blue);
 }
 
-.radio-look[checked=false]:hover .check-icon, .radio-look[checked=false]:focus .check-icon {
+.radio-look[checked=false][disabled=false]:hover .check-icon, .radio-look[checked=false][disabled=false]:focus .check-icon {
   opacity: 1;
 }
-.radio-look[checked=true]:hover .check-icon, .radio-look[checked=true]:focus .check-icon {
+.radio-look[checked=true][disabled=false]:hover .check-icon, .radio-look[checked=true][disabled=false]:focus .check-icon {
   opacity: 0;
 }
 
-.radio-look[checked=true] {
+.radio-look[checked=true][disabled=false] {
   border-color: var(--color-brand-main-blue-dark, #004376);
   background-color: var(--color-brand-main-blue)
 }

From 2901d2a1dde66e72d7aeb7ce59725c13d474252c Mon Sep 17 00:00:00 2001
From: "fabian.wilms" <fabian.wilms@muenchen.de>
Date: Thu, 25 Sep 2025 13:17:58 +0200
Subject: [PATCH 3/3] :green_heart: linter

---
 .../src/ChecklistDetail.ce.vue                |  8 +-
 .../src/components/ChecklistList.vue          | 25 +++---
 .../src/components/P13nCheckbox.vue           | 80 ++++++++++---------
 3 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/personalization-webcomponents/src/ChecklistDetail.ce.vue b/personalization-webcomponents/src/ChecklistDetail.ce.vue
index 73bda7e6..971e8dd9 100644
--- a/personalization-webcomponents/src/ChecklistDetail.ce.vue
+++ b/personalization-webcomponents/src/ChecklistDetail.ce.vue
@@ -32,8 +32,10 @@
                 v-else
                 class="banner"
                 type="success"
-                >
-                Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir bewahren diese Checkliste noch bis zum {{ deletionDate }} für Sie auf. Danach wird sie automatisch gelöscht.
+              >
+                Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir
+                bewahren diese Checkliste noch bis zum {{ deletionDate }} für
+                Sie auf. Danach wird sie automatisch gelöscht.
               </muc-banner>
               <h2 class="headline">
                 Erledigte Aufgaben ({{ closedCheckList.length }})
@@ -49,7 +51,7 @@
                 v-else
                 class="banner"
                 type="info"
-                >
+              >
                 Sie haben noch keine erledigten Aufgaben. Haken Sie Aufgaben in
                 der Checkliste ab, um sie als erledigt zu markieren.
               </muc-banner>
diff --git a/personalization-webcomponents/src/components/ChecklistList.vue b/personalization-webcomponents/src/components/ChecklistList.vue
index 4e1b4bc3..8d471830 100644
--- a/personalization-webcomponents/src/components/ChecklistList.vue
+++ b/personalization-webcomponents/src/components/ChecklistList.vue
@@ -29,10 +29,14 @@
         >
           <p13n-checkbox
             :id="'cb-' + element.serviceID"
-            :aria-label="!!element.checked ? element.title + ' als nicht erledigt markieren.' : element.title + ' als erledigt markieren.'"
+            :aria-label="
+              !!element.checked
+                ? element.title + ' als nicht erledigt markieren.'
+                : element.title + ' als erledigt markieren.'
+            "
             :checked="!!element.checked"
             :disabled="disabled"
-            style="margin-left: 8px;"
+            style="margin-left: 8px"
             @check="() => onSelectChange(element.serviceID)"
           />
           <span
@@ -42,12 +46,14 @@
               muted: element.checked !== null,
             }"
             @click="(evt) => openDialog(element, evt)"
-            @keydown="(evt) => evt.keyCode == 32 ? openDialog(element, evt) : null"
+            @keydown="
+              (evt) => (evt.keyCode == 32 ? openDialog(element, evt) : null)
+            "
           >
             <b>{{ element.title }}</b>
             <span
-                class="required-label"
-                v-if="element.required"
+              class="required-label"
+              v-if="element.required"
             >
               - verpflichtend
             </span>
@@ -90,6 +96,7 @@ import type ChecklistItem from "@/api/persservice/ChecklistItem.ts";
 import { MucIcon } from "@muenchen/muc-patternlab-vue";
 import { Sortable } from "sortablejs-vue3";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+
 import P13nCheckbox from "@/components/P13nCheckbox.vue";
 
 const props = withDefaults(
@@ -197,8 +204,8 @@ function handleArrowKeyDown(event: KeyboardEvent) {
   list-style: none;
   padding: 0;
   margin: 0;
-  border-top: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
-  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
+  border-top: 1px solid var(--color-neutrals-beau-blue-light, #e5eef5);
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #e5eef5);
 }
 
 .container {
@@ -210,7 +217,7 @@ function handleArrowKeyDown(event: KeyboardEvent) {
 .list-item {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #E5EEF5);
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #e5eef5);
   user-select: none;
   cursor: grab;
   color: var(--color-brand-main-blue);
@@ -290,7 +297,7 @@ function handleArrowKeyDown(event: KeyboardEvent) {
 }
 
 .required-label {
-  color: var(--neutrals-grey, #3A5368);
+  color: var(--neutrals-grey, #3a5368);
   /* Body/Body 2 */
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
diff --git a/personalization-webcomponents/src/components/P13nCheckbox.vue b/personalization-webcomponents/src/components/P13nCheckbox.vue
index 6fa0ed56..cecd9c08 100644
--- a/personalization-webcomponents/src/components/P13nCheckbox.vue
+++ b/personalization-webcomponents/src/components/P13nCheckbox.vue
@@ -1,37 +1,36 @@
 <template>
-
   <div
-      tabindex="0"
-      class="radio-look"
-      :disabled="disabled"
-      :aria-disabled="disabled"
-      :checked="checked"
-      @click="!disabled ? emit('check') : null"
-      @keydown="(evt) => evt.keyCode == 32 ? emit('check') : null"
+    tabindex="0"
+    class="radio-look"
+    :disabled="disabled"
+    :aria-disabled="disabled"
+    :checked="checked"
+    @click="!disabled ? emit('check') : null"
+    @keydown="(evt) => (evt.keyCode == 32 ? emit('check') : null)"
   >
     <muc-icon
-        class="icon check-icon"
-        icon="check"
-        :color="checked ? 'white' : 'var(--color-neutrals-blue)'"
+      class="icon check-icon"
+      icon="check"
+      :color="checked ? 'white' : 'var(--color-neutrals-blue)'"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import {MucIcon} from "@muenchen/muc-patternlab-vue";
+import { MucIcon } from "@muenchen/muc-patternlab-vue";
 
-const props = withDefaults(
-    defineProps<{
-      checked?: boolean;
-      disabled?: boolean;
-    }>(),
-    {
-      checked: false,
-      disabled: false,
-    }
+withDefaults(
+  defineProps<{
+    checked?: boolean;
+    disabled?: boolean;
+  }>(),
+  {
+    checked: false,
+    disabled: false,
+  }
 );
 
-const emit = defineEmits(["check"])
+const emit = defineEmits(["check"]);
 </script>
 
 <style scoped>
@@ -52,46 +51,51 @@ const emit = defineEmits(["check"])
   position: relative;
   cursor: pointer;
   outline-offset: var(--radio-button-border-width);
-  transition: border-color 0.3s ease,
-  background-color 0.3s ease;
+  transition:
+    border-color 0.3s ease,
+    background-color 0.3s ease;
 }
 
 .check-icon {
   display: block;
   margin: auto;
-  width: calc(var(--radio-button-size) - (2*var(--radio-button-border-width)));
-  height: calc(var(--radio-button-size) - (2*var(--radio-button-border-width)));
+  width: calc(
+    var(--radio-button-size) - (2 * var(--radio-button-border-width))
+  );
+  height: calc(
+    var(--radio-button-size) - (2 * var(--radio-button-border-width))
+  );
   opacity: 0;
   transition: opacity 0.3s ease;
 }
 
-.radio-look[disabled=true] {
+.radio-look[disabled="true"] {
   border-color: var(--color-neutrals-grey);
-  background: var(--gray-x-light, #9CA8B3);
+  background: var(--gray-x-light, #9ca8b3);
 }
 
-.radio-look[checked][disabled=false]:hover, .radio-look[checked][disabled=false]:focus {
+.radio-look[checked][disabled="false"]:hover,
+.radio-look[checked][disabled="false"]:focus {
   border-color: var(--color-brand-main-blue);
   background-color: var(--color-neutrals-blue);
 }
 
-.radio-look[checked=false][disabled=false]:hover .check-icon, .radio-look[checked=false][disabled=false]:focus .check-icon {
+.radio-look[checked="false"][disabled="false"]:hover .check-icon,
+.radio-look[checked="false"][disabled="false"]:focus .check-icon {
   opacity: 1;
 }
-.radio-look[checked=true][disabled=false]:hover .check-icon, .radio-look[checked=true][disabled=false]:focus .check-icon {
+.radio-look[checked="true"][disabled="false"]:hover .check-icon,
+.radio-look[checked="true"][disabled="false"]:focus .check-icon {
   opacity: 0;
 }
 
-.radio-look[checked=true][disabled=false] {
+.radio-look[checked="true"][disabled="false"] {
   border-color: var(--color-brand-main-blue-dark, #004376);
-  background-color: var(--color-brand-main-blue)
+  background-color: var(--color-brand-main-blue);
 }
 
-.radio-look[checked=true] .check-icon {
+.radio-look[checked="true"] .check-icon {
   opacity: 1;
 }
-
-
 </style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
+<script setup lang="ts"></script>