Disabled checked token for radio button

apps/showcase/doc/checkbox/DisabledDoc.vue

@@ -32,7 +32,8 @@ export default {
 export default {
     data() {
         return {
-            checked: false
+            checked1: false,
+            checked2: true,
         };
     }
 };
@@ -49,7 +50,8 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const checked = ref(false);
+const checked1 = ref(false);
+const checked2 = ref(true);
 <\/script>
 `
             }

apps/showcase/doc/radiobutton/DisabledDoc.vue

@@ -2,8 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-2">
         <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +13,17 @@
 export default {
     data() {
         return {
-            value: null,
+            value: 2,
             code: {
                 basic: `
 <RadioButton v-model="value" :value="1" disabled />
+<RadioButton v-model="value" :value="2" disabled />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
     </div>
 </template>
 
@@ -28,7 +31,7 @@ export default {
 export default {
     data() {
         return {
-            value: null
+            value: 2
         }
     }
 }
@@ -38,13 +41,14 @@ export default {
 <template>
     <div class="card flex justify-center">
         <RadioButton v-model="value" :value="1" disabled />
+        <RadioButton v-model="value" :value="2" disabled />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const value = ref(null);
+const value = ref(2);
 <\/script>
 `
             }

apps/showcase/pages/checkbox/index.vue

@@ -52,16 +52,16 @@ export default {
                     label: 'Dynamic',
                     component: DynamicDoc
                 },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
                 {
                     id: 'filled',
                     label: 'Filled',
                     component: FilledDoc
                 },
+                {
+                    id: 'invalid',
+                    label: 'Invalid',
+                    component: InvalidDoc
+                },
                 {
                     id: 'disabled',
                     label: 'Disabled',

packages/primevue/src/radiobutton/style/RadioButtonStyle.js

@@ -111,10 +111,11 @@ const theme = ({ dt }) => `
 
 .p-radiobutton.p-disabled .p-radiobutton-box {
     background: ${dt('radiobutton.disabled.background')};
+    border-color: ${dt('radiobutton.checked.disabled.border.color')};
 }
 
-.p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon {
-    color: ${dt('radiobutton.icon.disabled.color')};
+.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
+    background: ${dt('radiobutton.icon.disabled.color')};
 }
 `;
 

packages/themes/src/presets/aura/radiobutton/index.js

@@ -13,6 +13,7 @@ export default {
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
         checkedFocusBorderColor: '{primary.color}',
+        checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {

packages/themes/src/presets/lara/radiobutton/index.js

@@ -13,6 +13,7 @@ export default {
         checkedBorderColor: '{primary.color}',
         checkedHoverBorderColor: '{primary.hover.color}',
         checkedFocusBorderColor: '{primary.color}',
+        checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {

packages/themes/src/presets/nora/radiobutton/index.js

@@ -13,6 +13,7 @@ export default {
         checkedBorderColor: '{form.field.border.color}',
         checkedHoverBorderColor: '{form.field.hover.border.color}',
         checkedFocusBorderColor: '{form.field.focus.border.color}',
+        checkedDisabledBorderColor: '{form.field.border.color}',
         invalidBorderColor: '{form.field.invalid.border.color}',
         shadow: '{form.field.shadow}',
         focusRing: {