diff --git a/apps/showcase/doc/autocomplete/InvalidDoc.vue b/apps/showcase/doc/autocomplete/InvalidDoc.vue
index 99978e2e6..2ecd4aa66 100644
--- a/apps/showcase/doc/autocomplete/InvalidDoc.vue
+++ b/apps/showcase/doc/autocomplete/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,14 +18,14 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
-<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
     </div>
 </template>
 
@@ -49,8 +49,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
index 1031ee646..b1aadcb34 100644
--- a/apps/showcase/doc/common/apidoc/index.json
+++ b/apps/showcase/doc/common/apidoc/index.json
@@ -74031,6 +74031,15 @@
                             "default": "",
                             "description": "Placeholder color of root"
                         },
+                        {
+                            "name": "root.invalidPlaceholderColor",
+                            "token": "autocomplete.invalid.placeholder.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Invalid placeholder color of root"
+                        },
                         {
                             "name": "root.shadow",
                             "token": "autocomplete.shadow",
@@ -77575,6 +77584,15 @@
                             "default": "",
                             "description": "Placeholder color of root"
                         },
+                        {
+                            "name": "root.invalidPlaceholderColor",
+                            "token": "cascadeselect.invalid.placeholder.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Invalid placeholder color of root"
+                        },
                         {
                             "name": "root.shadow",
                             "token": "cascadeselect.shadow",
@@ -82918,6 +82936,15 @@
                             "default": "",
                             "description": "Padding of header"
                         },
+                        {
+                            "name": "header.borderColor",
+                            "token": "fileupload.header.border.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Border color of header"
+                        },
                         {
                             "name": "header.borderWidth",
                             "token": "fileupload.header.border.width",
@@ -86174,6 +86201,15 @@
                             "default": "",
                             "description": "Placeholder color of root"
                         },
+                        {
+                            "name": "root.invalidPlaceholderColor",
+                            "token": "inputtext.invalid.placeholder.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Invalid placeholder color of root"
+                        },
                         {
                             "name": "root.shadow",
                             "token": "inputtext.shadow",
@@ -89393,6 +89429,15 @@
                             "default": "",
                             "description": "Placeholder color of root"
                         },
+                        {
+                            "name": "root.invalidPlaceholderColor",
+                            "token": "multiselect.invalid.placeholder.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Invalid placeholder color of root"
+                        },
                         {
                             "name": "root.shadow",
                             "token": "multiselect.shadow",
@@ -92442,6 +92487,15 @@
                             "default": "",
                             "description": "Placeholder color of root"
                         },
+                        {
+                            "name": "root.invalidPlaceholderColor",
+                            "token": "select.invalid.placeholder.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Invalid placeholder color of root"
+                        },
                         {
                             "name": "root.shadow",
                             "token": "select.shadow",
@@ -95781,6 +95835,15 @@
                             "default": "",
                             "description": "Placeholder color of root"
                         },
+                        {
+                            "name": "root.invalidPlaceholderColor",
+                            "token": "textarea.invalid.placeholder.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Invalid placeholder color of root"
+                        },
                         {
                             "name": "root.shadow",
                             "token": "textarea.shadow",
@@ -98759,6 +98822,15 @@
                             "default": "",
                             "description": "Placeholder color of root"
                         },
+                        {
+                            "name": "root.invalidPlaceholderColor",
+                            "token": "treeselect.invalid.placeholder.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Invalid placeholder color of root"
+                        },
                         {
                             "name": "root.shadow",
                             "token": "treeselect.shadow",
diff --git a/apps/showcase/doc/datepicker/InvalidDoc.vue b/apps/showcase/doc/datepicker/InvalidDoc.vue
index 0eef44a97..cad85a50e 100644
--- a/apps/showcase/doc/datepicker/InvalidDoc.vue
+++ b/apps/showcase/doc/datepicker/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             date2: null,
             code: {
                 basic: `
-<DatePicker v-model="date1" :invalid="!date1" />
-<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+<DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+<DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/inputmask/InvalidDoc.vue b/apps/showcase/doc/inputmask/InvalidDoc.vue
index ac7b3e6e3..128d19962 100644
--- a/apps/showcase/doc/inputmask/InvalidDoc.vue
+++ b/apps/showcase/doc/inputmask/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled" />
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: '',
             code: {
                 basic: `
-<InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
-<InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
+<InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+<InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
@@ -43,8 +43,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/inputnumber/InvalidDoc.vue b/apps/showcase/doc/inputnumber/InvalidDoc.vue
index f71395327..5f63b1d2b 100644
--- a/apps/showcase/doc/inputnumber/InvalidDoc.vue
+++ b/apps/showcase/doc/inputnumber/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: null,
             code: {
                 basic: `
-<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
-<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/inputtext/InvalidDoc.vue b/apps/showcase/doc/inputtext/InvalidDoc.vue
index 225353735..53351ae6b 100644
--- a/apps/showcase/doc/inputtext/InvalidDoc.vue
+++ b/apps/showcase/doc/inputtext/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" />
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: '',
             code: {
                 basic: `
-<InputText v-model="value1" :invalid="!value1" />
-<InputText v-model="value2" :invalid="!value2" variant="filled" />
+<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+<InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" />
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" />
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/message/FormsDoc.vue b/apps/showcase/doc/message/FormsDoc.vue
index 54113cc7a..0190ca896 100644
--- a/apps/showcase/doc/message/FormsDoc.vue
+++ b/apps/showcase/doc/message/FormsDoc.vue
@@ -4,14 +4,15 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <div class="flex flex-col gap-4">
-            <Message severity="error" icon="pi pi-times-circle" class="mb-2">Validation Failed</Message>
-            <div class="flex flex-col">
-                <InputText placeholder="Username" aria-label="username" invalid />
-                <Message severity="error" variant="plain" size="small">Username is required</Message>
+            <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+            <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+            <div class="flex flex-col gap-1">
+                <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+                <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
             </div>
-            <div class="flex flex-col">
-                <InputText placeholder="Email" aria-label="email" invalid />
-                <Message severity="error" variant="plain" size="small">Email is not valid</Message>
+            <div class="flex flex-col gap-1">
+                <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+                <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
             </div>
         </div>
     </div>
@@ -22,33 +23,33 @@
 export default {
     data() {
         return {
+            username: null,
+            email: null,
             code: {
                 basic: `
-<div class="flex flex-col gap-4">
-    <Message severity="error" icon="pi pi-times-circle" class="mb-2">Validation Failed</Message>
-    <div class="flex flex-col">
-        <InputText placeholder="Username" aria-label="username" invalid />
-        <Message severity="error" variant="plain" size="small">Username is required</Message>
-    </div>
-    <div class="flex flex-col">
-        <InputText placeholder="Email" aria-label="email" invalid />
-        <Message severity="error" variant="plain" size="small">Email is not valid</Message>
-    </div>
+<Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+<Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+<div class="flex flex-col gap-1">
+    <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+    <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+</div>
+<div class="flex flex-col gap-1">
+    <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+    <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
 </div>
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <Message severity="error" icon="pi pi-times-circle" class="mb-2">Validation Failed</Message>
-            <div class="flex flex-col">
-                <InputText placeholder="Username" aria-label="username" invalid />
-                <Message severity="error" variant="plain" size="small">Username is required</Message>
-            </div>
-            <div class="flex flex-col">
-                <InputText placeholder="Email" aria-label="email" invalid />
-                <Message severity="error" variant="plain" size="small">Email is not valid</Message>
-            </div>
+    <div class="flex flex-col gap-4">
+        <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+        <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+            <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+        </div>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+            <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
         </div>
     </div>
 </template>
@@ -58,17 +59,16 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
-        <div class="flex flex-col gap-4">
-            <Message severity="error" icon="pi pi-times-circle" class="mb-2">Validation Failed</Message>
-            <div class="flex flex-col">
-                <InputText placeholder="Username" aria-label="username" invalid />
-                <Message severity="error" variant="plain" size="small">Username is required</Message>
-            </div>
-            <div class="flex flex-col">
-                <InputText placeholder="Email" aria-label="email" invalid />
-                <Message severity="error" variant="plain" size="small">Email is not valid</Message>
-            </div>
+    <div class="flex flex-col gap-4">
+        <Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
+        <Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
+            <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
+        </div>
+        <div class="flex flex-col gap-1">
+            <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
+            <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/password/InvalidDoc.vue b/apps/showcase/doc/password/InvalidDoc.vue
index 004da5bda..0ffe1e671 100644
--- a/apps/showcase/doc/password/InvalidDoc.vue
+++ b/apps/showcase/doc/password/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" />
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: null,
             code: {
                 basic: `
-<Password v-model="value1" :invalid="!value1" />
-<Password v-model="value2" :invalid="!value2" variant="filled" />
+<Password v-model="value1" :invalid="!value1" placeholder="Password" />
+<Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" />
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" />
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/textarea/InvalidDoc.vue b/apps/showcase/doc/textarea/InvalidDoc.vue
index 94d815c66..29a0ae6a4 100644
--- a/apps/showcase/doc/textarea/InvalidDoc.vue
+++ b/apps/showcase/doc/textarea/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="value === ''" style="resize: none" />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: '',
             code: {
                 basic: `
-<Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />
+<Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/theming/styled/PresetsDoc.vue b/apps/showcase/doc/theming/styled/PresetsDoc.vue
index bbd43a73a..e8752a2ea 100644
--- a/apps/showcase/doc/theming/styled/PresetsDoc.vue
+++ b/apps/showcase/doc/theming/styled/PresetsDoc.vue
@@ -1,1595 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>currently Aura, Material, Lara and Nora are the available built-in options.</p>
+        <p>
+            Aura, Material, Lara and Nora are the available built-in options, created to demonstrate the power of the design-agnostic theming. Aura is PrimeTek's own vision, Material follows Google Material Design v2, Lara is based on Bootstrap and
+            Nora is inspired by enterprise applications. Visit the
+            <a href="https://github.com/primefaces/primevue/tree/master/packages/themes/src/presets" target="_blank" rel="noopener noreferrer">source code</a> to learn more about the structure of presets. You may use them out of the box with
+            modifications or utilize them as reference in case you need to build your own presets from scratch.
+        </p>
     </DocSectionText>
-    <div class="card">
-        <Tabs value="aura">
-            <TabList>
-                <Tab value="aura">Aura</Tab>
-                <Tab value="material">Material</Tab>
-                <Tab value="lara">Lara</Tab>
-                <Tab value="nora">Nora</Tab>
-            </TabList>
-            <TabPanels>
-                <TabPanel value="aura"><DocSectionCode :code="aura" hideToggleCode importCode hideStackBlitz /></TabPanel>
-                <TabPanel value="material"><DocSectionCode :code="material" hideToggleCode importCode hideStackBlitz /></TabPanel>
-                <TabPanel value="lara"><DocSectionCode :code="lara" hideToggleCode importCode hideStackBlitz /></TabPanel>
-                <TabPanel value="nora"><DocSectionCode :code="nora" hideToggleCode importCode hideStackBlitz /></TabPanel>
-            </TabPanels>
-        </Tabs>
-    </div>
 </template>
-
-<script>
-export default {
-    data() {
-        return {
-            aura: {
-                basic: `
-import accordion from '@primevue/themes/aura/accordion';
-// ... imports of other component tokens
-
-export default {
-    primitive: {
-        borderRadius: {
-            none: '0',
-            xs: '2px',
-            sm: '4px',
-            md: '6px',
-            lg: '8px',
-            xl: '12px'
-        },
-        emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
-        green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
-        lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
-        red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' },
-        orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' },
-        amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' },
-        yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' },
-        teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' },
-        cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' },
-        sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' },
-        blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' },
-        indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' },
-        violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' },
-        purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' },
-        fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' },
-        pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' },
-        rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' },
-        slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
-        gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
-        zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
-        neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-        stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
-    },
-    semantic: {
-        transitionDuration: '0.2s',
-        focusRing: {
-            width: '1px',
-            style: 'solid',
-            color: '{primary.color}',
-            offset: '2px',
-            shadow: 'none'
-        },
-        disabledOpacity: '0.6',
-        iconSize: '1rem',
-        anchorGutter: '2px',
-        primary: {
-            50: '{emerald.50}',
-            100: '{emerald.100}',
-            200: '{emerald.200}',
-            300: '{emerald.300}',
-            400: '{emerald.400}',
-            500: '{emerald.500}',
-            600: '{emerald.600}',
-            700: '{emerald.700}',
-            800: '{emerald.800}',
-            900: '{emerald.900}',
-            950: '{emerald.950}'
-        },
-        formField: {
-            paddingX: '0.75rem',
-            paddingY: '0.5rem',
-            borderRadius: '{border.radius.md}',
-            focusRing: {
-                width: '0',
-                style: 'none',
-                color: 'transparent',
-                offset: '0',
-                shadow: 'none'
-            },
-            transitionDuration: '{transition.duration}'
-        },
-        list: {
-            padding: '0.25rem 0.25rem',
-            gap: '2px',
-            header: {
-                padding: '0.5rem 0.75rem 0.25rem 0.75rem'
-            },
-            option: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '{border.radius.sm}'
-            },
-            optionGroup: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '600'
-            }
-        },
-        content: {
-            borderRadius: '{border.radius.md}'
-        },
-        mask: {
-            transitionDuration: '0.15s'
-        },
-        navigation: {
-            list: {
-                padding: '0.25rem 0.25rem',
-                gap: '2px'
-            },
-            item: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '{border.radius.sm}',
-                gap: '0.5rem'
-            },
-            submenuLabel: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '600'
-            },
-            submenuIcon: {
-                size: '0.875rem'
-            }
-        },
-        overlay: {
-            select: {
-                borderRadius: '{border.radius.md}',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            },
-            popover: {
-                borderRadius: '{border.radius.md}',
-                padding: '0.75rem',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            },
-            modal: {
-                borderRadius: '{border.radius.xl}',
-                padding: '1.25rem',
-                shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
-            },
-            navigation: {
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            }
-        },
-        colorScheme: {
-            light: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                },
-                primary: {
-                    color: '{primary.500}',
-                    contrastColor: '#ffffff',
-                    hoverColor: '{primary.600}',
-                    activeColor: '{primary.700}'
-                },
-                highlight: {
-                    background: '{primary.50}',
-                    focusBackground: '{primary.100}',
-                    color: '{primary.700}',
-                    focusColor: '{primary.800}'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.4)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.0}',
-                    disabledBackground: '{surface.200}',
-                    filledBackground: '{surface.50}',
-                    filledFocusBackground: '{surface.50}',
-                    borderColor: '{surface.300}',
-                    hoverBorderColor: '{surface.400}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.400}',
-                    color: '{surface.700}',
-                    disabledColor: '{surface.500}',
-                    placeholderColor: '{surface.500}',
-                    floatLabelColor: '{surface.500}',
-                    floatLabelFocusColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
-                    iconColor: '{surface.400}',
-                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
-                },
-                text: {
-                    color: '{surface.700}',
-                    hoverColor: '{surface.800}',
-                    mutedColor: '{surface.500}',
-                    hoverMutedColor: '{surface.600}'
-                },
-                content: {
-                    background: '{surface.0}',
-                    hoverBackground: '{surface.100}',
-                    borderColor: '{surface.200}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.100}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.100}',
-                        activeBackground: '{surface.100}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}',
-                            activeColor: '{surface.500}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.400}',
-                        focusColor: '{surface.500}',
-                        activeColor: '{surface.500}'
-                    }
-                }
-            },
-            dark: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                },
-                primary: {
-                    color: '{primary.400}',
-                    contrastColor: '{surface.900}',
-                    hoverColor: '{primary.300}',
-                    activeColor: '{primary.200}'
-                },
-                highlight: {
-                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-                    color: 'rgba(255,255,255,.87)',
-                    focusColor: 'rgba(255,255,255,.87)'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.6)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.950}',
-                    disabledBackground: '{surface.700}',
-                    filledBackground: '{surface.800}',
-                    filledFocusBackground: '{surface.800}',
-                    borderColor: '{surface.700}',
-                    hoverBorderColor: '{surface.600}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.300}',
-                    color: '{surface.0}',
-                    disabledColor: '{surface.400}',
-                    placeholderColor: '{surface.400}',
-                    floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
-                    iconColor: '{surface.400}',
-                    shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
-                },
-                text: {
-                    color: '{surface.0}',
-                    hoverColor: '{surface.0}',
-                    mutedColor: '{surface.400}',
-                    hoverMutedColor: '{surface.300}'
-                },
-                content: {
-                    background: '{surface.900}',
-                    hoverBackground: '{surface.800}',
-                    borderColor: '{surface.700}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.800}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.500}',
-                            focusColor: '{surface.400}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.800}',
-                        activeBackground: '{surface.800}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.500}',
-                            focusColor: '{surface.400}',
-                            activeColor: '{surface.400}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.500}',
-                        focusColor: '{surface.400}',
-                        activeColor: '{surface.400}'
-                    }
-                }
-            }
-        }
-    },
-    components: {
-        accordion,
-        // ... other components
-    }
-};
-`
-            },
-            material: {
-                basic: `
-import accordion from '@primevue/themes/aura/accordion';
-// ... imports of other component tokens
-
-export default {
-    primitive: {
-        borderRadius: {
-            none: '0',
-            xs: '2px',
-            sm: '4px',
-            md: '6px',
-            lg: '8px',
-            xl: '12px'
-        },
-        emerald: { 50: '#E8F6F1', 100: '#C5EBE1', 200: '#9EDFCF', 300: '#76D3BD', 400: '#58C9AF', 500: '#3BBFA1', 600: '#35AF94', 700: '#2D9B83', 800: '#268873', 900: '#1A6657', 950: '#0d3329' },
-        green: { 50: '#E8F5E9', 100: '#C8E6C9', 200: '#A5D6A7', 300: '#81C784', 400: '#66BB6A', 500: '#4CAF50', 600: '#43A047', 700: '#388E3C', 800: '#2E7D32', 900: '#1B5E20', 950: '#0e2f10' },
-        lime: { 50: '#F9FBE7', 100: '#F0F4C3', 200: '#E6EE9C', 300: '#DCE775', 400: '#D4E157', 500: '#CDDC39', 600: '#C0CA33', 700: '#AFB42B', 800: '#9E9D24', 900: '#827717', 950: '#413c0c' },
-        red: { 50: '#FFEBEE', 100: '#FFCDD2', 200: '#EF9A9A', 300: '#E57373', 400: '#EF5350', 500: '#F44336', 600: '#E53935', 700: '#D32F2F', 800: '#C62828', 900: '#B71C1C', 950: '#5c0e0e' },
-        orange: { 50: '#FFF3E0', 100: '#FFE0B2', 200: '#FFCC80', 300: '#FFB74D', 400: '#FFA726', 500: '#FF9800', 600: '#FB8C00', 700: '#F57C00', 800: '#EF6C00', 900: '#E65100', 950: '#732900' },
-        amber: { 50: '#FFF8E1', 100: '#FFECB3', 200: '#FFE082', 300: '#FFD54F', 400: '#FFCA28', 500: '#FFC107', 600: '#FFB300', 700: '#FFA000', 800: '#FF8F00', 900: '#FF6F00', 950: '#803800' },
-        yellow: { 50: '#FFFDE7', 100: '#FFF9C4', 200: '#FFF59D', 300: '#FFF176', 400: '#FFEE58', 500: '#FFEB3B', 600: '#FDD835', 700: '#FBC02D', 800: '#F9A825', 900: '#F57F17', 950: '#7b400c' },
-        teal: { 50: '#E0F2F1', 100: '#B2DFDB', 200: '#80CBC4', 300: '#4DB6AC', 400: '#26A69A', 500: '#009688', 600: '#00897B', 700: '#00796B', 800: '#00695C', 900: '#004D40', 950: '#002720' },
-        cyan: { 50: '#E0F7FA', 100: '#B2EBF2', 200: '#80DEEA', 300: '#4DD0E1', 400: '#26C6DA', 500: '#00BCD4', 600: '#00ACC1', 700: '#0097A7', 800: '#00838F', 900: '#006064', 950: '#003032' },
-        sky: { 50: '#E1F5FE', 100: '#B3E5FC', 200: '#81D4FA', 300: '#4FC3F7', 400: '#29B6F6', 500: '#03A9F4', 600: '#039BE5', 700: '#0288D1', 800: '#0277BD', 900: '#01579B', 950: '#012c4e' },
-        blue: { 50: '#E3F2FD', 100: '#BBDEFB', 200: '#90CAF9', 300: '#64B5F6', 400: '#42A5F5', 500: '#2196F3', 600: '#1E88E5', 700: '#1976D2', 800: '#1565C0', 900: '#0D47A1', 950: '#072451' },
-        indigo: { 50: '#E8EAF6', 100: '#C5CAE9', 200: '#9FA8DA', 300: '#7986CB', 400: '#5C6BC0', 500: '#3F51B5', 600: '#3949AB', 700: '#303F9F', 800: '#283593', 900: '#1A237E', 950: '#0d123f' },
-        violet: { 50: '#EDE7F6', 100: '#D1C4E9', 200: '#B39DDB', 300: '#9575CD', 400: '#7E57C2', 500: '#673AB7', 600: '#5E35B1', 700: '#512DA8', 800: '#4527A0', 900: '#311B92', 950: '#190e49' },
-        purple: { 50: '#F3E5F5', 100: '#E1BEE7', 200: '#CE93D8', 300: '#BA68C8', 400: '#AB47BC', 500: '#9C27B0', 600: '#8E24AA', 700: '#7B1FA2', 800: '#6A1B9A', 900: '#4A148C', 950: '#250a46' },
-        fuchsia: { 50: '#FDE6F3', 100: '#FBC1E3', 200: '#F897D1', 300: '#F56DBF', 400: '#F34DB2', 500: '#F12DA5', 600: '#E0289D', 700: '#CC2392', 800: '#B81E88', 900: '#951777', 950: '#4b0c3c' },
-        pink: { 50: '#FCE4EC', 100: '#F8BBD0', 200: '#F48FB1', 300: '#F06292', 400: '#EC407A', 500: '#E91E63', 600: '#D81B60', 700: '#C2185B', 800: '#AD1457', 900: '#880E4F', 950: '#440728' },
-        rose: { 50: '#FFF0F0', 100: '#FFD9D9', 200: '#FFC0C0', 300: '#FFA7A7', 400: '#FF8E8E', 500: '#FF7575', 600: '#FF5252', 700: '#FF3838', 800: '#F71C1C', 900: '#D50000', 950: '#3E0000' },
-        slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
-        gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
-        zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
-        neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-        stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
-    },
-    semantic: {
-        transitionDuration: '0.2s',
-        focusRing: {
-            width: '0',
-            style: 'none',
-            color: 'unset',
-            offset: '0'
-        },
-        disabledOpacity: '0.38',
-        iconSize: '1rem',
-        anchorGutter: '0',
-        primary: {
-            50: '{emerald.50}',
-            100: '{emerald.100}',
-            200: '{emerald.200}',
-            300: '{emerald.300}',
-            400: '{emerald.400}',
-            500: '{emerald.500}',
-            600: '{emerald.600}',
-            700: '{emerald.700}',
-            800: '{emerald.800}',
-            900: '{emerald.900}',
-            950: '{emerald.950}'
-        },
-        formField: {
-            paddingX: '0.75rem',
-            paddingY: '0.75rem',
-            borderRadius: '{border.radius.sm}',
-            focusRing: {
-                width: '2px',
-                style: 'solid',
-                color: '{primary.color}',
-                offset: '-2px',
-                shadow: 'none'
-            },
-            transitionDuration: '{transition.duration}'
-        },
-        list: {
-            padding: '0.5rem 0',
-            gap: '0',
-            header: {
-                padding: '0.75rem 1rem'
-            },
-            option: {
-                padding: '0.75rem 1rem',
-                borderRadius: '{border.radius.none}'
-            },
-            optionGroup: {
-                padding: '0.75rem 1rem',
-                fontWeight: '700'
-            }
-        },
-        content: {
-            borderRadius: '{border.radius.sm}'
-        },
-        mask: {
-            transitionDuration: '0.15s'
-        },
-        navigation: {
-            list: {
-                padding: '0.5rem 0',
-                gap: '0'
-            },
-            item: {
-                padding: '0.75rem 1rem',
-                borderRadius: '{border.radius.none}',
-                gap: '0.5rem'
-            },
-            submenuLabel: {
-                padding: '0.75rem 1rem',
-                fontWeight: '700'
-            },
-            submenuIcon: {
-                size: '0.875rem'
-            }
-        },
-        overlay: {
-            select: {
-                borderRadius: '{border.radius.sm}',
-                shadow: '0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)'
-            },
-            popover: {
-                borderRadius: '{border.radius.sm}',
-                padding: '1rem',
-                shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
-            },
-            modal: {
-                borderRadius: '{border.radius.sm}',
-                padding: '1.5rem',
-                shadow: '0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12)'
-            },
-            navigation: {
-                shadow: '0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12)'
-            }
-        },
-        colorScheme: {
-            light: {
-                focusRing: {
-                    shadow: '0 0 1px 4px {surface.200}'
-                },
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                },
-                primary: {
-                    color: '{primary.500}',
-                    contrastColor: '#ffffff',
-                    hoverColor: '{primary.400}',
-                    activeColor: '{primary.300}'
-                },
-                highlight: {
-                    background: 'color-mix(in srgb, {primary.color}, transparent 88%)',
-                    focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)',
-                    color: '{primary.700}',
-                    focusColor: '{primary.800}'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.32)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.0}',
-                    disabledBackground: '{surface.300}',
-                    filledBackground: '{surface.100}',
-                    filledHoverBackground: '{surface.200}',
-                    filledFocusBackground: '{surface.100}',
-                    borderColor: '{surface.400}',
-                    hoverBorderColor: '{surface.900}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.800}',
-                    color: '{surface.900}',
-                    disabledColor: '{surface.600}',
-                    placeholderColor: '{surface.600}',
-                    floatLabelColor: '{surface.600}',
-                    floatLabelFocusColor: '{primary.600}',
-                    floatLabelActiveColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.800}',
-                    iconColor: '{surface.600}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.900}',
-                    hoverColor: '{surface.900}',
-                    mutedColor: '{surface.600}',
-                    hoverMutedColor: '{surface.600}'
-                },
-                content: {
-                    background: '{surface.0}',
-                    hoverBackground: '{surface.100}',
-                    borderColor: '{surface.300}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.0}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.0}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.0}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.100}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.600}',
-                            focusColor: '{surface.600}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.100}',
-                        activeBackground: '{surface.200}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.600}',
-                            focusColor: '{surface.600}',
-                            activeColor: '{surface.600}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.600}',
-                        focusColor: '{surface.600}',
-                        activeColor: '{surface.600}'
-                    }
-                }
-            },
-            dark: {
-                focusRing: {
-                    shadow: '0 0 1px 4px {surface.700}'
-                },
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                },
-                primary: {
-                    color: '{primary.400}',
-                    contrastColor: '{surface.900}',
-                    hoverColor: '{primary.300}',
-                    activeColor: '{primary.200}'
-                },
-                highlight: {
-                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-                    color: 'rgba(255,255,255,.87)',
-                    focusColor: 'rgba(255,255,255,.87)'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.6)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.950}',
-                    disabledBackground: '{surface.700}',
-                    filledBackground: '{surface.800}',
-                    filledHoverBackground: '{surface.700}',
-                    filledFocusBackground: '{surface.800}',
-                    borderColor: '{surface.600}',
-                    hoverBorderColor: '{surface.400}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.300}',
-                    color: '{surface.0}',
-                    disabledColor: '{surface.400}',
-                    placeholderColor: '{surface.400}',
-                    floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{primary.color}',
-                    floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
-                    iconColor: '{surface.400}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.0}',
-                    hoverColor: '{surface.0}',
-                    mutedColor: '{surface.400}',
-                    hoverMutedColor: '{surface.400}'
-                },
-                content: {
-                    background: '{surface.900}',
-                    hoverBackground: '{surface.800}',
-                    borderColor: '{surface.700}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.900}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.900}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.900}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.800}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.400}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.800}',
-                        activeBackground: '{surface.700}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.400}',
-                            activeColor: '{surface.400}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.muted.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.400}',
-                        focusColor: '{surface.400}',
-                        activeColor: '{surface.400}'
-                    }
-                }
-            }
-        }
-    },
-    components: {
-        accordion,
-        // ... other components
-    }
-};
-`
-            },
-            lara: {
-                basic: `
-import accordion from '@primevue/themes/lara/accordion';
-// ... imports of other component tokens
-
-export default {
-    primitive: {
-        borderRadius: {
-            none: '0',
-            xs: '2px',
-            sm: '4px',
-            md: '6px',
-            lg: '8px',
-            xl: '12px'
-        },
-        emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
-        green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
-        lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
-        red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' },
-        orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' },
-        amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' },
-        yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' },
-        teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' },
-        cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' },
-        sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' },
-        blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' },
-        indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' },
-        violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' },
-        purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' },
-        fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' },
-        pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' },
-        rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' },
-        slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
-        gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
-        zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
-        neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-        stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
-    },
-    semantic: {
-        transitionDuration: '0.2s',
-        focusRing: {
-            width: '0',
-            style: 'none',
-            color: 'transparent',
-            offset: '0'
-        },
-        disabledOpacity: '0.6',
-        iconSize: '1rem',
-        anchorGutter: '2px',
-        primary: {
-            50: '{emerald.50}',
-            100: '{emerald.100}',
-            200: '{emerald.200}',
-            300: '{emerald.300}',
-            400: '{emerald.400}',
-            500: '{emerald.500}',
-            600: '{emerald.600}',
-            700: '{emerald.700}',
-            800: '{emerald.800}',
-            900: '{emerald.900}',
-            950: '{emerald.950}'
-        },
-        formField: {
-            paddingX: '0.75rem',
-            paddingY: '0.625rem',
-            borderRadius: '{border.radius.md}',
-            focusRing: {
-                width: '{focus.ring.width}',
-                style: '{focus.ring.style}',
-                color: '{focus.ring.color}',
-                offset: '{focus.ring.offset}',
-                shadow: '{focus.ring.shadow}'
-            },
-            transitionDuration: '{transition.duration}'
-        },
-        list: {
-            padding: '0.5rem 0',
-            gap: '0',
-            header: {
-                padding: '0.625rem 1rem 0 1rem'
-            },
-            option: {
-                padding: '0.625rem 1rem',
-                borderRadius: '0'
-            },
-            optionGroup: {
-                padding: '0.625rem 1rem',
-                fontWeight: '600'
-            }
-        },
-        content: {
-            borderRadius: '{border.radius.md}'
-        },
-        mask: {
-            transitionDuration: '0.15s'
-        },
-        navigation: {
-            list: {
-                padding: '0.5rem 0',
-                gap: '0'
-            },
-            item: {
-                padding: '0.625rem 1rem',
-                borderRadius: '0',
-                gap: '0.5rem'
-            },
-            submenuLabel: {
-                padding: '0.625rem 1rem',
-                fontWeight: '600'
-            },
-            submenuIcon: {
-                size: '0.875rem'
-            }
-        },
-        overlay: {
-            select: {
-                borderRadius: '{border.radius.md}',
-                shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
-            },
-            popover: {
-                borderRadius: '{border.radius.md}',
-                padding: '1rem',
-                shadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
-            },
-            modal: {
-                borderRadius: '{border.radius.xl}',
-                padding: '1.5rem',
-                shadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
-            },
-            navigation: {
-                shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
-            }
-        },
-        colorScheme: {
-            light: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                },
-                primary: {
-                    color: '{primary.500}',
-                    contrastColor: '#ffffff',
-                    hoverColor: '{primary.600}',
-                    activeColor: '{primary.700}'
-                },
-                highlight: {
-                    background: '{primary.50}',
-                    focusBackground: '{primary.100}',
-                    color: '{primary.700}',
-                    focusColor: '{primary.800}'
-                },
-                focusRing: {
-                    shadow: '0 0 0 0.2rem {primary.200}'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.4)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.0}',
-                    disabledBackground: '{surface.200}',
-                    filledBackground: '{surface.50}',
-                    filledFocusBackground: '{surface.0}',
-                    borderColor: '{surface.300}',
-                    hoverBorderColor: '{primary.color}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.400}',
-                    color: '{surface.700}',
-                    disabledColor: '{surface.500}',
-                    placeholderColor: '{surface.500}',
-                    floatLabelColor: '{surface.500}',
-                    floatLabelFocusColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
-                    iconColor: '{surface.500}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.700}',
-                    hoverColor: '{surface.800}',
-                    mutedColor: '{surface.500}',
-                    hoverMutedColor: '{surface.600}'
-                },
-                content: {
-                    background: '{surface.0}',
-                    hoverBackground: '{surface.100}',
-                    borderColor: '{surface.200}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.0}',
-                        borderColor: '{surface.200}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.100}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.100}',
-                        activeBackground: '{surface.100}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.400}',
-                            focusColor: '{surface.500}',
-                            activeColor: '{surface.500}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.400}',
-                        focusColor: '{surface.500}',
-                        activeColor: '{surface.500}'
-                    }
-                }
-            },
-            dark: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                },
-                primary: {
-                    color: '{primary.400}',
-                    contrastColor: '{surface.900}',
-                    hoverColor: '{primary.300}',
-                    activeColor: '{primary.200}'
-                },
-                highlight: {
-                    background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
-                    focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
-                    color: 'rgba(255,255,255,.87)',
-                    focusColor: 'rgba(255,255,255,.87)'
-                },
-                focusRing: {
-                    shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.6)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.950}',
-                    disabledBackground: '{surface.700}',
-                    filledBackground: '{surface.800}',
-                    filledFocusBackground: '{surface.950}',
-                    borderColor: '{surface.700}',
-                    hoverBorderColor: '{primary.color}',
-                    focusBorderColor: '{primary.color}',
-                    invalidBorderColor: '{red.300}',
-                    color: '{surface.0}',
-                    disabledColor: '{surface.400}',
-                    placeholderColor: '{surface.400}',
-                    floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
-                    iconColor: '{surface.400}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.0}',
-                    hoverColor: '{surface.0}',
-                    mutedColor: '{surface.400}',
-                    hoverMutedColor: '{surface.300}'
-                },
-                content: {
-                    background: '{surface.900}',
-                    hoverBackground: '{surface.800}',
-                    borderColor: '{surface.700}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.800}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{surface.500}',
-                            focusColor: '{surface.400}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{surface.800}',
-                        activeBackground: '{surface.800}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{surface.500}',
-                            focusColor: '{surface.400}',
-                            activeColor: '{surface.400}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{surface.500}',
-                        focusColor: '{surface.400}',
-                        activeColor: '{surface.400}'
-                    }
-                }
-            }
-        }
-    },
-    components: {
-        accordion,
-        // ... other components
-    }
-};
-`
-            },
-            nora: {
-                basic: `
-import accordion from '@primevue/themes/nora/accordion';
-// ... imports of other component tokens
-
-export default {
-    primitive: {
-        borderRadius: {
-            none: '0',
-            xs: '2px',
-            sm: '4px',
-            md: '6px',
-            lg: '8px',
-            xl: '12px'
-        },
-        emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
-        green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
-        lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
-        red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' },
-        orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' },
-        amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' },
-        yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' },
-        teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' },
-        cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' },
-        sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' },
-        blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' },
-        indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' },
-        violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' },
-        purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' },
-        fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' },
-        pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' },
-        rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' },
-        slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
-        gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
-        zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
-        neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
-        stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
-    },
-    semantic: {
-        transitionDuration: '0s',
-        focusRing: {
-            width: '2px',
-            style: 'solid',
-            color: '{primary.color}',
-            offset: '2px',
-            shadow: 'none'
-        },
-        iconSize: '1rem',
-        anchorGutter: '0',
-        primary: {
-            50: '{emerald.50}',
-            100: '{emerald.100}',
-            200: '{emerald.200}',
-            300: '{emerald.300}',
-            400: '{emerald.400}',
-            500: '{emerald.500}',
-            600: '{emerald.600}',
-            700: '{emerald.700}',
-            800: '{emerald.800}',
-            900: '{emerald.900}',
-            950: '{emerald.950}'
-        },
-        formField: {
-            paddingX: '0.75rem',
-            paddingY: '0.5rem',
-            borderRadius: '{border.radius.xs}',
-            focusRing: {
-                width: '2px',
-                style: 'solid',
-                color: '{primary.color}',
-                offset: '-1px',
-                shadow: 'none'
-            },
-            transitionDuration: '{transition.duration}'
-        },
-        list: {
-            padding: '0.125rem 0',
-            gap: '0',
-            header: {
-                padding: '0.5rem 0.75rem 0.375rem 0.75rem'
-            },
-            option: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '0'
-            },
-            optionGroup: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '700'
-            }
-        },
-        content: {
-            borderRadius: '{border.radius.xs}'
-        },
-        mask: {
-            transitionDuration: '0.15s'
-        },
-        navigation: {
-            list: {
-                padding: '0.125rem 0',
-                gap: '0'
-            },
-            item: {
-                padding: '0.5rem 0.75rem',
-                borderRadius: '0',
-                gap: '0.5rem'
-            },
-            submenuLabel: {
-                padding: '0.5rem 0.75rem',
-                fontWeight: '700'
-            },
-            submenuIcon: {
-                size: '0.875rem'
-            }
-        },
-        overlay: {
-            select: {
-                borderRadius: '{border.radius.xs}',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            },
-            popover: {
-                borderRadius: '{border.radius.xs}',
-                padding: '0.75rem',
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            },
-            modal: {
-                borderRadius: '{border.radius.xs}',
-                padding: '1.25rem',
-                shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
-            },
-            navigation: {
-                shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
-            }
-        },
-        colorScheme: {
-            light: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{slate.50}',
-                    100: '{slate.100}',
-                    200: '{slate.200}',
-                    300: '{slate.300}',
-                    400: '{slate.400}',
-                    500: '{slate.500}',
-                    600: '{slate.600}',
-                    700: '{slate.700}',
-                    800: '{slate.800}',
-                    900: '{slate.900}',
-                    950: '{slate.950}'
-                },
-                primary: {
-                    color: '{primary.600}',
-                    contrastColor: '#ffffff',
-                    hoverColor: '{primary.700}',
-                    activeColor: '{primary.800}'
-                },
-                highlight: {
-                    background: '{primary.600}',
-                    focusBackground: '{primary.700}',
-                    color: '#ffffff',
-                    focusColor: '#ffffff'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.4)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.0}',
-                    disabledBackground: '{surface.300}',
-                    filledBackground: '{surface.100}',
-                    filledFocusBackground: '{surface.100}',
-                    borderColor: '{surface.500}',
-                    hoverBorderColor: '{surface.500}',
-                    focusBorderColor: '{surface.500}',
-                    invalidBorderColor: '{red.500}',
-                    color: '{surface.900}',
-                    disabledColor: '{surface.600}',
-                    placeholderColor: '{surface.600}',
-                    floatLabelColor: '{surface.600}',
-                    floatLabelFocusColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.500}',
-                    iconColor: '{surface.900}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.900}',
-                    hoverColor: '{surface.950}',
-                    mutedColor: '{surface.600}',
-                    hoverMutedColor: '{surface.700}'
-                },
-                content: {
-                    background: '{surface.0}',
-                    hoverBackground: '{surface.200}',
-                    borderColor: '{surface.400}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.0}',
-                        borderColor: 'transparent',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.0}',
-                        borderColor: 'transparent',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.0}',
-                        borderColor: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.200}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{text.muted.color}',
-                            focusColor: '{text.hover.muted.color}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{primary.color}',
-                        activeBackground: '{surface.200}',
-                        color: '{text.color}',
-                        focusColor: '{primary.contrast.color}',
-                        activeColor: '{text.hover.color}',
-                        icon: {
-                            color: '{text.muted.color}',
-                            focusColor: '{primary.contrast.color}',
-                            activeColor: '{text.hover.muted.color}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{text.muted.color}',
-                        focusColor: '{primary.contrast.color}',
-                        activeColor: '{text.hover.muted.color}'
-                    }
-                }
-            },
-            dark: {
-                surface: {
-                    0: '#ffffff',
-                    50: '{zinc.50}',
-                    100: '{zinc.100}',
-                    200: '{zinc.200}',
-                    300: '{zinc.300}',
-                    400: '{zinc.400}',
-                    500: '{zinc.500}',
-                    600: '{zinc.600}',
-                    700: '{zinc.700}',
-                    800: '{zinc.800}',
-                    900: '{zinc.900}',
-                    950: '{zinc.950}'
-                },
-                primary: {
-                    color: '{primary.500}',
-                    contrastColor: '{surface.950}',
-                    hoverColor: '{primary.400}',
-                    activeColor: '{primary.300}'
-                },
-                highlight: {
-                    background: '{primary.500}',
-                    focusBackground: '{primary.400}',
-                    color: '{surface.950}',
-                    focusColor: '{surface.950}'
-                },
-                mask: {
-                    background: 'rgba(0,0,0,0.6)',
-                    color: '{surface.200}'
-                },
-                formField: {
-                    background: '{surface.950}',
-                    disabledBackground: '{surface.700}',
-                    filledBackground: '{surface.800}',
-                    filledFocusBackground: '{surface.800}',
-                    borderColor: '{surface.500}',
-                    hoverBorderColor: '{surface.500}',
-                    focusBorderColor: '{surface.500}',
-                    invalidBorderColor: '{red.400}',
-                    color: '{surface.0}',
-                    disabledColor: '{surface.400}',
-                    placeholderColor: '{surface.400}',
-                    floatLabelColor: '{surface.400}',
-                    floatLabelFocusColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.400}',
-                    iconColor: '{surface.0}',
-                    shadow: 'none'
-                },
-                text: {
-                    color: '{surface.0}',
-                    hoverColor: '{surface.0}',
-                    mutedColor: '{surface.400}',
-                    hoverMutedColor: '{surface.300}'
-                },
-                content: {
-                    background: '{surface.900}',
-                    hoverBackground: '{surface.700}',
-                    borderColor: '{surface.500}',
-                    color: '{text.color}',
-                    hoverColor: '{text.hover.color}'
-                },
-                overlay: {
-                    select: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    popover: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    },
-                    modal: {
-                        background: '{surface.900}',
-                        borderColor: '{surface.700}',
-                        color: '{text.color}'
-                    }
-                },
-                list: {
-                    option: {
-                        focusBackground: '{surface.700}',
-                        selectedBackground: '{highlight.background}',
-                        selectedFocusBackground: '{highlight.focus.background}',
-                        color: '{text.color}',
-                        focusColor: '{text.hover.color}',
-                        selectedColor: '{highlight.color}',
-                        selectedFocusColor: '{highlight.focus.color}',
-                        icon: {
-                            color: '{text.muted.color}',
-                            focusColor: '{text.hover.muted.color}'
-                        }
-                    },
-                    optionGroup: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    }
-                },
-                navigation: {
-                    item: {
-                        focusBackground: '{primary.color}',
-                        activeBackground: '{surface.700}',
-                        color: '{text.color}',
-                        focusColor: '{primary.contrast.color}',
-                        activeColor: '{text.color}',
-                        icon: {
-                            color: '{text.muted.color}',
-                            focusColor: '{primary.contrast.color}',
-                            activeColor: '{text.hover.muted.color}'
-                        }
-                    },
-                    submenuLabel: {
-                        background: 'transparent',
-                        color: '{text.color}'
-                    },
-                    submenuIcon: {
-                        color: '{text.muted.color}',
-                        focusColor: '{primary.contrast.color}',
-                        activeColor: '{text.hover.muted.color}'
-                    }
-                }
-            }
-        }
-    },
-    components: {
-        accordion,
-        // ... other components
-    }
-};
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue b/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
index ee12475aa..95194df75 100644
--- a/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
@@ -1,13 +1,38 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Unstyled mode consists of two solutions. First part is removal of the component specific style classes from the DOM, when <i>unstyled</i> setting is enabled components do not include any CSS selectors while core functionality is still
-            available. For example, in the default styled mode, the select component adds <i>.p-select</i> style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added to the root element
-            and the CSS is not included in the page.
+            The term <i>unstyled</i> is used to define an alternative styling approach instead of the default theming with design tokens. PrimeVue offers two options for styling the components with your own css; the <i>hybrid</i> mode and the
+            <i>pure</i> mode.
         </p>
         <p>
-            The second part is custom styling as components are displayed as transparent without their styles. <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> feature is the key of since it also supports a global configuration to create
-            themes in unstyled mode. In fact, the upcoming Tailwind theme is basically a custom <i>pt</i> configuration.
+            In both options, the css variables of the design tokens and the css rule sets that utilize them are not included. The main difference is, the <i>hybrid</i> mode keeps the selectors in the DOM such as <i>p-select</i> whereas the
+            <i>pure</i> mode do not include them. Unstyled components still need to be styled on your end, in the next sections, we'll cover the styling solutions for both modes.
         </p>
     </DocSectionText>
+    <table class="doc-table table-fixed">
+        <thead>
+            <tr>
+                <th></th>
+                <th>Hybrid</th>
+                <th>Pure</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>p-* selectors in DOM</td>
+                <td><i class="pi pi-check ms-4" /></td>
+                <td><i class="pi pi-times ms-4" /></td>
+            </tr>
+            <tr>
+                <td>CSS rule sets</td>
+                <td><i class="pi pi-times ms-4" /></td>
+                <td><i class="pi pi-times ms-4" /></td>
+            </tr>
+            <tr>
+                <td>CSS variables</td>
+                <td><i class="pi pi-times ms-4" /></td>
+                <td><i class="pi pi-times ms-4" /></td>
+            </tr>
+        </tbody>
+    </table>
 </template>
diff --git a/apps/showcase/doc/theming/unstyled/ComparisonDoc.vue b/apps/showcase/doc/theming/unstyled/ComparisonDoc.vue
new file mode 100644
index 000000000..52e49fe48
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/ComparisonDoc.vue
@@ -0,0 +1,13 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>It may be confusing which styling approach to choose from due to the amount of options such as Styled, Pure and Hybrid. We've created a short video that discusses the pros and cons of each approach.</p>
+        <p>
+            In summary, the styled mode is a powerful API to learn with first class support for Figma, as a result when working with a UI Designer that utilizes the PrimeVue Figma UI Kit, the development flow would be productive. The unstyled mode is
+            beneficial when you do not prefer to learn the default theming API, want full control over the styles or require Tailwind CSS as the only library for styling in your application. The downside of unstyled mode is that it requires the
+            styles need to be maintained in the application.
+        </p>
+    </DocSectionText>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/5M6xM4tTMQU?si=FzeuOeJOaGBoM-yK" frameborder="0" allowfullscreen></iframe>
+    </div>
+</template>
diff --git a/apps/showcase/doc/theming/unstyled/hybrid/HybridExampleDoc.vue b/apps/showcase/doc/theming/unstyled/hybrid/HybridExampleDoc.vue
new file mode 100644
index 000000000..c3923fa32
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/hybrid/HybridExampleDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>In hybrid mode, the default css rules and variables are not included however the css selectors reside in the DOM so that you may use them to build your own rules.</p>
+        <div class="card flex justify-center">
+            <Button label="Search" icon="pi pi-search" />
+        </div>
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+.p-button {
+    background: #a855f7;
+    border: 0 none !important;
+    color: white;
+    padding: 0.5rem 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 24px;
+}
+
+.p-button:enabled:hover {
+    background: #a855f7;
+}
+
+.p-button:enabled:active {
+    background: #9333ea;
+}
+`
+            }
+        };
+    }
+};
+</script>
+
+<style lang="css" scoped>
+.p-button {
+    background: #a855f7;
+    border: 0 none !important;
+    color: white;
+    padding: 0.5rem 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 24px;
+}
+
+.p-button:enabled:hover {
+    background: #a855f7;
+}
+
+.p-button:enabled:active {
+    background: #9333ea;
+}
+</style>
diff --git a/apps/showcase/doc/theming/unstyled/hybrid/HybridSetupDoc.vue b/apps/showcase/doc/theming/unstyled/hybrid/HybridSetupDoc.vue
new file mode 100644
index 000000000..0c5f7293c
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/hybrid/HybridSetupDoc.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Hybrid mode is enabled for the whole suite by setting the <i>theme</i> option as <i>none</i>.</p>
+        <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { theme: 'none' });
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue b/apps/showcase/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue
new file mode 100644
index 000000000..4875332af
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeTek offers the Tailwind CSS version of the entire PrimeVue UI suite based on the <i>@apply</i> directive with IntelliSense support. Visit the
+            <a href="https://github.com/cagataycivici/primevue-tailwindcss-presets" target="_blank" rel="noopener noreferrer">Tailwind version of PrimeVue</a> for the documentation, demos and additional resources.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue b/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue
deleted file mode 100644
index 54a893831..000000000
--- a/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Tailwind CSS is perfect fit for the unstyled mode, visit the dedicated <NuxtLink to="/tailwind">Tailwind CSS</NuxtLink> documentation for the first-class integration.</p>
-    </DocSectionText>
-</template>
-
-<script></script>
diff --git a/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue b/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue
deleted file mode 100644
index 9e1e7d0c7..000000000
--- a/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            To get started, UnoCSS should already be available in your application, if not visit the UnoCSS <a href="https://unocss.dev/integrations/">documentation</a> for the installation in various environments. Theming of PrimeVue components with
-            UnoCSS is mainly achieved with unstyled mode either using global setting or for a particular component only.
-        </p>
-        <p>For a sample, visit the <a href="https://github.com/primefaces/primevue-examples/tree/main/unstyled-unocss" target="_blank" rel="noopener noreferrer">example repository</a>.</p>
-    </DocSectionText>
-</template>
-
-<script></script>
diff --git a/apps/showcase/doc/theming/unstyled/ExampleDoc.vue b/apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
similarity index 70%
rename from apps/showcase/doc/theming/unstyled/ExampleDoc.vue
rename to apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
index 68adfdde6..348b42061 100644
--- a/apps/showcase/doc/theming/unstyled/ExampleDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Here is a sample that provides a style using Tailwind CSS. Before beginning, head over to the pass through section <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals. We'll be using the
-            <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
+            Here is a sample that styles a button component with Tailwind CSS using <NuxtLink to="/passthrough">pass through</NuxtLink> attributes. Before beginning, head over to the the pass through section at
+            <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals section. We'll be using the <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
         </p>
         <div class="card flex justify-center">
             <Button
@@ -30,7 +30,8 @@ export default {
     unstyled
     pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
     pt:label="text-white font-bold text-lg"
-    pt:icon="text-white text-xl"
+    pt:icon="
+    "
 />
 `
             }
diff --git a/apps/showcase/doc/theming/unstyled/ThemeDoc.vue b/apps/showcase/doc/theming/unstyled/pure/PureGlobalDoc.vue
similarity index 58%
rename from apps/showcase/doc/theming/unstyled/ThemeDoc.vue
rename to apps/showcase/doc/theming/unstyled/pure/PureGlobalDoc.vue
index be09ecf6a..af80c2e86 100644
--- a/apps/showcase/doc/theming/unstyled/ThemeDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/pure/PureGlobalDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            An unstyled theme is basically a global <i>pt</i> configuration so that it can be defined only once from a single location, still a particular component can override a global configuration since the <i>pt</i> props of a component and the
-            global setting is merged with component having higher precedencee.
+            A global configuration can be created at application level to avoid repetition via the global <i>pt</i> option so that the styles can be shared from a single location. A particular component can still override a global configuration with
+            its own <i>pt</i> property.
         </p>
     </DocSectionText>
 
@@ -20,11 +20,12 @@ import PrimeVue from "primevue/config";
 const app = createApp(App);
 
 app.use(PrimeVue, {
+    unstyled: true,
     pt: {
         button: {
-            root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
-            label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
-            icon: 'text-white text-2xl'
+            root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2',
+            label: 'text-white font-bold text-lg',
+            icon: 'text-white text-xl'
         },
         panel: {
             header: 'bg-primary text-primary-contrast border-primary',
diff --git a/apps/showcase/doc/theming/unstyled/SetupDoc.vue b/apps/showcase/doc/theming/unstyled/pure/PureSetupDoc.vue
similarity index 88%
rename from apps/showcase/doc/theming/unstyled/SetupDoc.vue
rename to apps/showcase/doc/theming/unstyled/pure/PureSetupDoc.vue
index 404ac41f4..f02ff3eff 100644
--- a/apps/showcase/doc/theming/unstyled/SetupDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/pure/PureSetupDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Unstyled mode is enabled for the whole suite by setting <i>unstyled</i> as true during PrimeVue installation.</p>
+        <p>Pure mode is enabled for the whole suite by enabling <i>unstyled</i> option during PrimeVue installation.</p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <p>Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.</p>
         <div class="card flex justify-center">
diff --git a/apps/showcase/doc/theming/unstyled/pure/PureTailwindDoc.vue b/apps/showcase/doc/theming/unstyled/pure/PureTailwindDoc.vue
new file mode 100644
index 000000000..fddfd54ec
--- /dev/null
+++ b/apps/showcase/doc/theming/unstyled/pure/PureTailwindDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Tailwind CSS is perfect fit for the pure mode, our team has initiated the reference implementation of the global <i>pt</i> configuration to style the entire UI suite called the
+            <a href="https://github.com/cagataycivici/primevue-tailwindcss-presets" target="_blank" rel="noopener noreferrer">Tailwind CSS presets</a>. This add-on project is currently looking for community contributors to take over the ownership as
+            it requires significant bandwidth for PrimeTek to maintain both the styled mode and the unstyled mode presets via pass-through.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/treeselect/MultipleDoc.vue b/apps/showcase/doc/treeselect/MultipleDoc.vue
index 76ef1fbc5..8db197e12 100644
--- a/apps/showcase/doc/treeselect/MultipleDoc.vue
+++ b/apps/showcase/doc/treeselect/MultipleDoc.vue
@@ -8,7 +8,7 @@
     </DocSectionText>
     <DocSectionCode :code="activeNodes" hideToggleCode importCode hideStackBlitz v-bind="$attrs" />
     <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Items" class="md:w-80 w-full" />
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Items" display="chip" class="md:w-80 w-full" />
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -30,12 +30,12 @@ export default {
             },
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" class="md:w-80 w-full" />
+<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" display="chip" class="md:w-80 w-full" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" class="md:w-80 w-full" />
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" display="chip" class="md:w-80 w-full" />
     </div>
 </template>
 
@@ -58,7 +58,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" class="md:w-80 w-full" />
+        <TreeSelect v-model="selectedValue" :options="nodes" selectionMode="multiple" placeholder="Select Item" display="chip" class="md:w-80 w-full" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/vite/VerifyDoc.vue b/apps/showcase/doc/vite/VerifyDoc.vue
index c22c0405e..9867169da 100644
--- a/apps/showcase/doc/vite/VerifyDoc.vue
+++ b/apps/showcase/doc/vite/VerifyDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimizization. Import path is available
+            Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available
             in the documentation of the corresponding component.
         </p>
     </DocSectionText>
diff --git a/apps/showcase/layouts/AppConfigurator.vue b/apps/showcase/layouts/AppConfigurator.vue
index 5b15ecd84..e23d7ec31 100755
--- a/apps/showcase/layouts/AppConfigurator.vue
+++ b/apps/showcase/layouts/AppConfigurator.vue
@@ -31,7 +31,7 @@
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Presets</span>
-                <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
+                <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
             </div>
             <div class="flex">
                 <div class="flex-1">
diff --git a/apps/showcase/pages/support/index.vue b/apps/showcase/pages/support/index.vue
index d188ecced..25e1aa369 100755
--- a/apps/showcase/pages/support/index.vue
+++ b/apps/showcase/pages/support/index.vue
@@ -53,7 +53,7 @@
                         </li>
                         <li class="flex items-center mb-4">
                             <i class="pi pi-check-circle mr-4 text-green-500"></i>
-                            <span class="leading-normal">Up to 5 accounts</span>
+                            <span class="leading-normal">Shared account per organization</span>
                         </li>
                         <li class="flex items-center mb-4">
                             <i class="pi pi-check-circle mr-4 text-green-500"></i>
@@ -85,7 +85,7 @@
                     </li>
                     <li>
                         <div class="font-semibold mb-1">2. Setup</div>
-                        <span class="leading-normal">A private repository with an exclusive issue tracker is created for you at GitHub.</span>
+                        <span class="leading-normal">An account is created for you in our exclusive JIRA issue tracker.</span>
                     </li>
                     <li>
                         <div class="font-semibold mb-1">3. Request Support</div>
@@ -200,7 +200,7 @@
                 <div class="flex-1 flex flex-col gap-8">
                     <div>
                         <div class="leading-normal mb-2 font-semibold">How many issue tracker accounts do we get?</div>
-                        <p class="!m-0 leading-normal">We provide at most 5 accounts per organization.</p>
+                        <p class="!m-0 leading-normal">We provide 1 shared account per organization.</p>
                     </div>
                     <div>
                         <div class="leading-normal mb-2 font-semibold">What is the duration of the service?</div>
diff --git a/apps/showcase/pages/theming/unstyled/index.vue b/apps/showcase/pages/theming/unstyled/index.vue
index dac09bbc6..c188b81e1 100644
--- a/apps/showcase/pages/theming/unstyled/index.vue
+++ b/apps/showcase/pages/theming/unstyled/index.vue
@@ -2,14 +2,14 @@
     <div>
         <Head>
             <Title>Unstyled - PrimeVue</Title>
-            <Meta name="description" content="Styling PrimeVue with your favorite CSS library." />
+            <Meta name="description" content="Theming PrimeVue with your own styles." />
         </Head>
 
         <div class="doc">
             <div class="doc-main">
                 <div class="doc-intro">
                     <h1>Unstyled Mode</h1>
-                    <p>Styling PrimeVue with your favorite CSS library.</p>
+                    <p>Theming PrimeVue with your own styles.</p>
                 </div>
                 <DocSections :docs="docs" />
             </div>
@@ -20,11 +20,14 @@
 
 <script>
 import ArchitectureDoc from '@/doc/theming/unstyled/ArchitectureDoc.vue';
-import ExampleDoc from '@/doc/theming/unstyled/ExampleDoc.vue';
-import SetupDoc from '@/doc/theming/unstyled/SetupDoc.vue';
-import ThemeDoc from '@/doc/theming/unstyled/ThemeDoc.vue';
-import TailwindDoc from '@/doc/theming/unstyled/libraries/TailwindDoc.vue';
-import UnoCSSDoc from '@/doc/theming/unstyled/libraries/UnoCSSDoc.vue';
+import ComparisonDoc from '@/doc/theming/unstyled/ComparisonDoc.vue';
+import HybridExampleDoc from '@/doc/theming/unstyled/hybrid/HybridExampleDoc.vue';
+import HybridSetupDoc from '@/doc/theming/unstyled/hybrid/HybridSetupDoc.vue';
+import HybridTailwindDoc from '@/doc/theming/unstyled/hybrid/HybridTailwindDoc.vue';
+import PureExampleDoc from '@/doc/theming/unstyled/pure/PureExampleDoc.vue';
+import PureGlobalDoc from '@/doc/theming/unstyled/pure/PureGlobalDoc.vue';
+import PureSetupDoc from '@/doc/theming/unstyled/pure/PureSetupDoc.vue';
+import PureTailwindDoc from '@/doc/theming/unstyled/pure/PureTailwindDoc.vue';
 
 export default {
     data() {
@@ -36,33 +39,54 @@ export default {
                     component: ArchitectureDoc
                 },
                 {
-                    id: 'setup',
-                    label: 'Setup',
-                    component: SetupDoc
+                    id: 'comparison',
+                    label: 'Comparison',
+                    component: ComparisonDoc
                 },
                 {
-                    id: 'example',
-                    label: 'Example',
-                    component: ExampleDoc
-                },
-                {
-                    id: 'theme',
-                    label: 'Theme',
-                    component: ThemeDoc
-                },
-                {
-                    id: 'libraries',
-                    label: 'Libraries',
+                    id: 'pure',
+                    label: 'Pure',
                     children: [
                         {
-                            id: 'tailwind',
-                            label: 'Tailwind',
-                            component: TailwindDoc
+                            id: 'pure-setup',
+                            label: 'Setup',
+                            component: PureSetupDoc
                         },
                         {
-                            id: 'unocss',
-                            label: 'UnoCSS',
-                            component: UnoCSSDoc
+                            id: 'pure-example',
+                            label: 'Example',
+                            component: PureExampleDoc
+                        },
+                        {
+                            id: 'pure-global',
+                            label: 'Global',
+                            component: PureGlobalDoc
+                        },
+                        {
+                            id: 'pure-tailwind',
+                            label: 'Tailwind Presets',
+                            component: PureTailwindDoc
+                        }
+                    ]
+                },
+                {
+                    id: 'hybrid',
+                    label: 'Hybrid',
+                    children: [
+                        {
+                            id: 'hybrid-setup',
+                            label: 'Setup',
+                            component: HybridSetupDoc
+                        },
+                        {
+                            id: 'hybrid-example',
+                            label: 'Example',
+                            component: HybridExampleDoc
+                        },
+                        {
+                            id: 'hybrid-tailwind',
+                            label: 'Tailwind Version',
+                            component: HybridTailwindDoc
                         }
                     ]
                 }
diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
index 6c30973d2..b64d75eb8 100644
--- a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
+++ b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
@@ -230,6 +230,10 @@ const theme = ({ dt }) => `
     color: ${dt('autocomplete.placeholder.color')};
 }
 
+.p-autocomplete.p-invalid .p-autocomplete-input-chip input::placeholder {
+    color: ${dt('autocomplete.invalid.placeholder.color')};
+}
+
 .p-autocomplete-empty-message {
     padding: ${dt('autocomplete.empty.message.padding')};
 }
diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
index 268e59dd7..9b389af0b 100644
--- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
+++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -86,6 +86,10 @@ const theme = ({ dt }) => `
     color: ${dt('cascadeselect.placeholder.color')};
 }
 
+.p-cascadeselect.p-invalid .p-cascadeselect-label.p-placeholder {
+    color: ${dt('cascadeselect.invalid.placeholder.color')};
+}
+
 .p-cascadeselect.p-disabled .p-cascadeselect-label {
     color: ${dt('cascadeselect.disabled.color')};
 }
diff --git a/packages/primevue/src/inputtext/style/InputTextStyle.js b/packages/primevue/src/inputtext/style/InputTextStyle.js
index 824c3028f..fb932d2c1 100644
--- a/packages/primevue/src/inputtext/style/InputTextStyle.js
+++ b/packages/primevue/src/inputtext/style/InputTextStyle.js
@@ -56,6 +56,10 @@ const theme = ({ dt }) => `
     color: ${dt('inputtext.placeholder.color')};
 }
 
+.p-inputtext.p-invalid::placeholder {
+    color: ${dt('inputtext.invalid.placeholder.color')};
+}
+
 .p-inputtext-sm {
     font-size: ${dt('inputtext.sm.font.size')};
     padding-block: ${dt('inputtext.sm.padding.y')};
diff --git a/packages/primevue/src/multiselect/style/MultiSelectStyle.js b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
index e95e3ec51..0cd50982b 100644
--- a/packages/primevue/src/multiselect/style/MultiSelectStyle.js
+++ b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
@@ -90,6 +90,10 @@ const theme = ({ dt }) => `
     color: ${dt('multiselect.placeholder.color')};
 }
 
+.p-multiselect.p-invalid .p-multiselect-label.p-placeholder {
+    color: ${dt('multiselect.invalid.placeholder.color')};
+}
+
 .p-multiselect.p-disabled .p-multiselect-label {
     color: ${dt('multiselect.disabled.color')};
 }
diff --git a/packages/primevue/src/select/style/SelectStyle.js b/packages/primevue/src/select/style/SelectStyle.js
index b7f112ddd..58ad95905 100644
--- a/packages/primevue/src/select/style/SelectStyle.js
+++ b/packages/primevue/src/select/style/SelectStyle.js
@@ -86,6 +86,10 @@ const theme = ({ dt }) => `
     color: ${dt('select.placeholder.color')};
 }
 
+.p-select.p-invalid .p-select-label.p-placeholder {
+    color: ${dt('select.invalid.placeholder.color')};
+}
+
 .p-select:has(.p-select-clear-icon) .p-select-label {
     padding-inline-end: calc(1rem + ${dt('select.padding.x')});
 }
diff --git a/packages/primevue/src/textarea/style/TextareaStyle.js b/packages/primevue/src/textarea/style/TextareaStyle.js
index acae17030..d0ad36abc 100644
--- a/packages/primevue/src/textarea/style/TextareaStyle.js
+++ b/packages/primevue/src/textarea/style/TextareaStyle.js
@@ -52,6 +52,10 @@ const theme = ({ dt }) => `
     color: ${dt('textarea.placeholder.color')};
 }
 
+.p-textarea.p-invalid::placeholder {
+    color: ${dt('textarea.invalid.placeholder.color')};
+}
+
 .p-textarea-fluid {
     width: 100%;
 }
diff --git a/packages/primevue/src/treeselect/style/TreeSelectStyle.js b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
index ffc87add3..d91d80521 100644
--- a/packages/primevue/src/treeselect/style/TreeSelectStyle.js
+++ b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
@@ -90,6 +90,10 @@ const theme = ({ dt }) => `
     color: ${dt('treeselect.placeholder.color')};
 }
 
+.p-treeselect.p-invalid .p-treeselect-label.p-placeholder {
+    color: ${dt('treeselect.invalid.placeholder.color')};
+}
+
 .p-treeselect.p-disabled .p-treeselect-label {
     color: ${dt('treeselect.disabled.color')};
 }
diff --git a/packages/themes/src/presets/aura/autocomplete/index.js b/packages/themes/src/presets/aura/autocomplete/index.js
index 600338579..176de1459 100644
--- a/packages/themes/src/presets/aura/autocomplete/index.js
+++ b/packages/themes/src/presets/aura/autocomplete/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/base/index.js b/packages/themes/src/presets/aura/base/index.js
index 6879c2d31..cc76bba49 100644
--- a/packages/themes/src/presets/aura/base/index.js
+++ b/packages/themes/src/presets/aura/base/index.js
@@ -182,10 +182,11 @@ export default {
                     color: '{surface.700}',
                     disabledColor: '{surface.500}',
                     placeholderColor: '{surface.500}',
+                    invalidPlaceholderColor: '{red.600}',
                     floatLabelColor: '{surface.500}',
                     floatLabelFocusColor: '{primary.600}',
                     floatLabelActiveColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 },
@@ -299,17 +300,18 @@ export default {
                     filledBackground: '{surface.800}',
                     filledHoverBackground: '{surface.800}',
                     filledFocusBackground: '{surface.800}',
-                    borderColor: '{surface.700}',
-                    hoverBorderColor: '{surface.600}',
+                    borderColor: '{surface.600}',
+                    hoverBorderColor: '{surface.500}',
                     focusBorderColor: '{primary.color}',
                     invalidBorderColor: '{red.300}',
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.400}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 },
diff --git a/packages/themes/src/presets/aura/cascadeselect/index.js b/packages/themes/src/presets/aura/cascadeselect/index.js
index f28d7ee0e..5b44c1786 100644
--- a/packages/themes/src/presets/aura/cascadeselect/index.js
+++ b/packages/themes/src/presets/aura/cascadeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/inputtext/index.js b/packages/themes/src/presets/aura/inputtext/index.js
index d079bcd27..133d578b7 100644
--- a/packages/themes/src/presets/aura/inputtext/index.js
+++ b/packages/themes/src/presets/aura/inputtext/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/multiselect/index.js b/packages/themes/src/presets/aura/multiselect/index.js
index 221ae61ac..63f8e8044 100644
--- a/packages/themes/src/presets/aura/multiselect/index.js
+++ b/packages/themes/src/presets/aura/multiselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/select/index.js b/packages/themes/src/presets/aura/select/index.js
index a09752089..0684714b5 100644
--- a/packages/themes/src/presets/aura/select/index.js
+++ b/packages/themes/src/presets/aura/select/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/textarea/index.js b/packages/themes/src/presets/aura/textarea/index.js
index f8504fdeb..b45d7acf3 100644
--- a/packages/themes/src/presets/aura/textarea/index.js
+++ b/packages/themes/src/presets/aura/textarea/index.js
@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/treeselect/index.js b/packages/themes/src/presets/aura/treeselect/index.js
index d74bbb56e..389b631a6 100644
--- a/packages/themes/src/presets/aura/treeselect/index.js
+++ b/packages/themes/src/presets/aura/treeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/base/index.js b/packages/themes/src/presets/lara/base/index.js
index 8c43861df..43c5e45df 100644
--- a/packages/themes/src/presets/lara/base/index.js
+++ b/packages/themes/src/presets/lara/base/index.js
@@ -184,10 +184,11 @@ export default {
                     color: '{surface.700}',
                     disabledColor: '{surface.500}',
                     placeholderColor: '{surface.500}',
+                    invalidPlaceholderColor: '{red.600}',
                     floatLabelColor: '{surface.500}',
                     floatLabelFocusColor: '{primary.600}',
                     floatLabelActiveColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.500}',
                     shadow: 'none'
                 },
@@ -304,17 +305,18 @@ export default {
                     filledBackground: '{surface.800}',
                     filledHoverBackground: '{surface.800}',
                     filledFocusBackground: '{surface.950}',
-                    borderColor: '{surface.700}',
+                    borderColor: '{surface.600}',
                     hoverBorderColor: '{primary.color}',
                     focusBorderColor: '{primary.color}',
                     invalidBorderColor: '{red.300}',
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.400}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: 'none'
                 },
diff --git a/packages/themes/src/presets/lara/cascadeselect/index.js b/packages/themes/src/presets/lara/cascadeselect/index.js
index a00f46ef6..dd1cbfa51 100644
--- a/packages/themes/src/presets/lara/cascadeselect/index.js
+++ b/packages/themes/src/presets/lara/cascadeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/inputtext/index.js b/packages/themes/src/presets/lara/inputtext/index.js
index d079bcd27..133d578b7 100644
--- a/packages/themes/src/presets/lara/inputtext/index.js
+++ b/packages/themes/src/presets/lara/inputtext/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/multiselect/index.js b/packages/themes/src/presets/lara/multiselect/index.js
index 221ae61ac..63f8e8044 100644
--- a/packages/themes/src/presets/lara/multiselect/index.js
+++ b/packages/themes/src/presets/lara/multiselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/select/index.js b/packages/themes/src/presets/lara/select/index.js
index 9712fd318..760eb1533 100644
--- a/packages/themes/src/presets/lara/select/index.js
+++ b/packages/themes/src/presets/lara/select/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/textarea/index.js b/packages/themes/src/presets/lara/textarea/index.js
index f8504fdeb..b45d7acf3 100644
--- a/packages/themes/src/presets/lara/textarea/index.js
+++ b/packages/themes/src/presets/lara/textarea/index.js
@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/treeselect/index.js b/packages/themes/src/presets/lara/treeselect/index.js
index d74bbb56e..389b631a6 100644
--- a/packages/themes/src/presets/lara/treeselect/index.js
+++ b/packages/themes/src/presets/lara/treeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js
index 882042879..a38c2b6d7 100644
--- a/packages/themes/src/presets/material/base/index.js
+++ b/packages/themes/src/presets/material/base/index.js
@@ -184,10 +184,11 @@ export default {
                     color: '{surface.900}',
                     disabledColor: '{surface.600}',
                     placeholderColor: '{surface.600}',
+                    invalidPlaceholderColor: '{red.800}',
                     floatLabelColor: '{surface.600}',
                     floatLabelFocusColor: '{primary.600}',
                     floatLabelActiveColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.800}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.600}',
                     shadow: 'none'
                 },
@@ -311,10 +312,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.300}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: 'none'
                 },
diff --git a/packages/themes/src/presets/material/cascadeselect/index.js b/packages/themes/src/presets/material/cascadeselect/index.js
index 4f98e4a1a..650ff297d 100644
--- a/packages/themes/src/presets/material/cascadeselect/index.js
+++ b/packages/themes/src/presets/material/cascadeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/inputtext/index.js b/packages/themes/src/presets/material/inputtext/index.js
index b61e349f5..5e639cacc 100644
--- a/packages/themes/src/presets/material/inputtext/index.js
+++ b/packages/themes/src/presets/material/inputtext/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/multiselect/index.js b/packages/themes/src/presets/material/multiselect/index.js
index 5c6f39e3c..8db03a5b2 100644
--- a/packages/themes/src/presets/material/multiselect/index.js
+++ b/packages/themes/src/presets/material/multiselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/select/index.js b/packages/themes/src/presets/material/select/index.js
index fdc6c3105..d85486224 100644
--- a/packages/themes/src/presets/material/select/index.js
+++ b/packages/themes/src/presets/material/select/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/textarea/index.js b/packages/themes/src/presets/material/textarea/index.js
index f8504fdeb..b45d7acf3 100644
--- a/packages/themes/src/presets/material/textarea/index.js
+++ b/packages/themes/src/presets/material/textarea/index.js
@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/treeselect/index.js b/packages/themes/src/presets/material/treeselect/index.js
index 33f84b361..b5bed15f2 100644
--- a/packages/themes/src/presets/material/treeselect/index.js
+++ b/packages/themes/src/presets/material/treeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/base/index.js b/packages/themes/src/presets/nora/base/index.js
index b4336da70..954941221 100644
--- a/packages/themes/src/presets/nora/base/index.js
+++ b/packages/themes/src/presets/nora/base/index.js
@@ -182,10 +182,11 @@ export default {
                     color: '{surface.900}',
                     disabledColor: '{surface.600}',
                     placeholderColor: '{surface.600}',
+                    invalidPlaceholderColor: '{red.600}',
                     floatLabelColor: '{surface.600}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.500}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.900}',
                     shadow: 'none'
                 },
@@ -306,10 +307,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.400}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.400}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.0}',
                     shadow: 'none'
                 },
diff --git a/packages/themes/src/presets/nora/cascadeselect/index.js b/packages/themes/src/presets/nora/cascadeselect/index.js
index f28d7ee0e..5b44c1786 100644
--- a/packages/themes/src/presets/nora/cascadeselect/index.js
+++ b/packages/themes/src/presets/nora/cascadeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/inputtext/index.js b/packages/themes/src/presets/nora/inputtext/index.js
index d079bcd27..133d578b7 100644
--- a/packages/themes/src/presets/nora/inputtext/index.js
+++ b/packages/themes/src/presets/nora/inputtext/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/multiselect/index.js b/packages/themes/src/presets/nora/multiselect/index.js
index 05d449365..4b1304358 100644
--- a/packages/themes/src/presets/nora/multiselect/index.js
+++ b/packages/themes/src/presets/nora/multiselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/select/index.js b/packages/themes/src/presets/nora/select/index.js
index a09752089..0684714b5 100644
--- a/packages/themes/src/presets/nora/select/index.js
+++ b/packages/themes/src/presets/nora/select/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/textarea/index.js b/packages/themes/src/presets/nora/textarea/index.js
index f8504fdeb..b45d7acf3 100644
--- a/packages/themes/src/presets/nora/textarea/index.js
+++ b/packages/themes/src/presets/nora/textarea/index.js
@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/treeselect/index.js b/packages/themes/src/presets/nora/treeselect/index.js
index 86acc20bf..2d963a3a4 100644
--- a/packages/themes/src/presets/nora/treeselect/index.js
+++ b/packages/themes/src/presets/nora/treeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/types/autocomplete/index.d.ts b/packages/themes/types/autocomplete/index.d.ts
index 416556a69..917632fd4 100644
--- a/packages/themes/types/autocomplete/index.d.ts
+++ b/packages/themes/types/autocomplete/index.d.ts
@@ -87,6 +87,12 @@ export interface AutoCompleteDesignTokens extends ColorSchemeDesignToken<AutoCom
          * @designToken autocomplete.placeholder.color
          */
         placeholderColor?: string;
+        /**
+         * Invalid placeholder color of root
+         *
+         * @designToken autocomplete.invalid.placeholder.color
+         */
+        invalidPlaceholderColor?: string;
         /**
          * Shadow of root
          *
diff --git a/packages/themes/types/cascadeselect/index.d.ts b/packages/themes/types/cascadeselect/index.d.ts
index 87f90e7a3..3237648af 100644
--- a/packages/themes/types/cascadeselect/index.d.ts
+++ b/packages/themes/types/cascadeselect/index.d.ts
@@ -87,6 +87,12 @@ export interface CascadeSelectDesignTokens extends ColorSchemeDesignToken<Cascad
          * @designToken cascadeselect.placeholder.color
          */
         placeholderColor?: string;
+        /**
+         * Invalid placeholder color of root
+         *
+         * @designToken cascadeselect.invalid.placeholder.color
+         */
+        invalidPlaceholderColor?: string;
         /**
          * Shadow of root
          *
diff --git a/packages/themes/types/fileupload/index.d.ts b/packages/themes/types/fileupload/index.d.ts
index d93d0a2aa..b5d0f51d4 100644
--- a/packages/themes/types/fileupload/index.d.ts
+++ b/packages/themes/types/fileupload/index.d.ts
@@ -68,6 +68,12 @@ export interface FileUploadDesignTokens extends ColorSchemeDesignToken<FileUploa
          * @designToken fileupload.header.padding
          */
         padding?: string;
+        /**
+         * Border color of header
+         *
+         * @designToken fileupload.header.border.color
+         */
+        borderColor?: string;
         /**
          * Border width of header
          *
diff --git a/packages/themes/types/inputtext/index.d.ts b/packages/themes/types/inputtext/index.d.ts
index a800bc1da..276d4a1cc 100644
--- a/packages/themes/types/inputtext/index.d.ts
+++ b/packages/themes/types/inputtext/index.d.ts
@@ -87,6 +87,12 @@ export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextD
          * @designToken inputtext.placeholder.color
          */
         placeholderColor?: string;
+        /**
+         * Invalid placeholder color of root
+         *
+         * @designToken inputtext.invalid.placeholder.color
+         */
+        invalidPlaceholderColor?: string;
         /**
          * Shadow of root
          *
diff --git a/packages/themes/types/multiselect/index.d.ts b/packages/themes/types/multiselect/index.d.ts
index b5d3f8b82..e5e2e1e80 100644
--- a/packages/themes/types/multiselect/index.d.ts
+++ b/packages/themes/types/multiselect/index.d.ts
@@ -87,6 +87,12 @@ export interface MultiSelectDesignTokens extends ColorSchemeDesignToken<MultiSel
          * @designToken multiselect.placeholder.color
          */
         placeholderColor?: string;
+        /**
+         * Invalid placeholder color of root
+         *
+         * @designToken multiselect.invalid.placeholder.color
+         */
+        invalidPlaceholderColor?: string;
         /**
          * Shadow of root
          *
diff --git a/packages/themes/types/select/index.d.ts b/packages/themes/types/select/index.d.ts
index a4bae2f3c..cd3c84617 100644
--- a/packages/themes/types/select/index.d.ts
+++ b/packages/themes/types/select/index.d.ts
@@ -87,6 +87,12 @@ export interface SelectDesignTokens extends ColorSchemeDesignToken<SelectDesignT
          * @designToken select.placeholder.color
          */
         placeholderColor?: string;
+        /**
+         * Invalid placeholder color of root
+         *
+         * @designToken select.invalid.placeholder.color
+         */
+        invalidPlaceholderColor?: string;
         /**
          * Shadow of root
          *
diff --git a/packages/themes/types/textarea/index.d.ts b/packages/themes/types/textarea/index.d.ts
index 8bc2d64de..84c3cb7e7 100644
--- a/packages/themes/types/textarea/index.d.ts
+++ b/packages/themes/types/textarea/index.d.ts
@@ -81,6 +81,12 @@ export interface TextareaDesignTokens extends ColorSchemeDesignToken<TextareaDes
          * @designToken textarea.placeholder.color
          */
         placeholderColor?: string;
+        /**
+         * Invalid placeholder color of root
+         *
+         * @designToken textarea.invalid.placeholder.color
+         */
+        invalidPlaceholderColor?: string;
         /**
          * Shadow of root
          *
diff --git a/packages/themes/types/treeselect/index.d.ts b/packages/themes/types/treeselect/index.d.ts
index 7cd9fc33b..48e74e070 100644
--- a/packages/themes/types/treeselect/index.d.ts
+++ b/packages/themes/types/treeselect/index.d.ts
@@ -87,6 +87,12 @@ export interface TreeSelectDesignTokens extends ColorSchemeDesignToken<TreeSelec
          * @designToken treeselect.placeholder.color
          */
         placeholderColor?: string;
+        /**
+         * Invalid placeholder color of root
+         *
+         * @designToken treeselect.invalid.placeholder.color
+         */
+        invalidPlaceholderColor?: string;
         /**
          * Shadow of root
          *
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 615e45d85..d6ab19dc7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,7 +104,7 @@ importers:
         version: 19.0.0
       nuxt:
         specifier: 3.3.2
-        version: 3.3.2(@types/node@18.19.59)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(sass@1.45.0)(terser@5.36.0)(typescript@4.9.5)(webpack-sources@3.2.3)
+        version: 3.3.2(@types/node@18.19.60)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(sass@1.45.0)(terser@5.36.0)(typescript@4.9.5)(webpack-sources@3.2.3)
       postcss:
         specifier: ^8.4.31
         version: 8.4.47
@@ -234,7 +234,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^0.8.5
-        version: 0.8.5(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)
+        version: 0.8.5(nuxt@3.3.2(@types/node@18.19.60)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)
       '@nuxt/eslint-config':
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.57.1)
@@ -246,13 +246,13 @@ importers:
         version: 3.13.2(rollup@4.24.2)
       '@nuxt/test-utils':
         specifier: ^3.7.3
-        version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+        version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.60)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
       '@primevue/themes':
         specifier: workspace:*
         version: link:../themes
       '@types/node':
         specifier: ^18.17.17
-        version: 18.19.59
+        version: 18.19.60
       changelogen:
         specifier: ^0.5.5
         version: 0.5.7(magicast@0.3.5)
@@ -261,10 +261,10 @@ importers:
         version: 2.9.7(encoding@0.1.13)(magicast@0.3.5)
       nuxt:
         specifier: 3.3.2
-        version: 3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3)
+        version: 3.3.2(@types/node@18.19.60)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3)
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@18.19.59)(terser@5.36.0)
+        version: 1.6.0(@types/node@18.19.60)(terser@5.36.0)
 
   packages/primevue:
     dependencies:
@@ -2393,8 +2393,8 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/node@18.19.59':
-    resolution: {integrity: sha512-vizm2EqwV/7Zay+A6J3tGl9Lhr7CjZe2HmWS988sefiEmsyP9CeXEleho6i4hJk/8UtZAo0bWN4QPZZr83RxvQ==}
+  '@types/node@18.19.60':
+    resolution: {integrity: sha512-cYRj7igVqgxhlHFdBHHpU2SNw3+dN2x0VTZJtLYk6y/ieuGN4XiBgtDjYVktM/yk2y/8pKMileNc6IoEzEJnUw==}
 
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
@@ -8315,12 +8315,12 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)':
+  '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.60)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.2)
       '@nuxt/schema': 3.13.2(rollup@4.24.2)
       execa: 7.2.0
-      nuxt: 3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3)
+      nuxt: 3.3.2(@types/node@18.19.60)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3)
     transitivePeerDependencies:
       - magicast
       - rollup
@@ -8340,10 +8340,10 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.3
 
-  '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)':
+  '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.60)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)
+      '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.60)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)
       '@nuxt/devtools-wizard': 0.8.5
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.2)
       birpc: 0.2.19
@@ -8361,7 +8361,7 @@ snapshots:
       launch-editor: 2.9.1
       local-pkg: 0.4.3
       magicast: 0.3.5
-      nuxt: 3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3)
+      nuxt: 3.3.2(@types/node@18.19.60)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3)
       nypm: 0.3.12
       ofetch: 1.4.1
       ohash: 1.1.4
@@ -8685,7 +8685,7 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  '@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))':
+  '@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.60)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.2)
       '@nuxt/schema': 3.13.2(rollup@4.24.2)
@@ -8711,12 +8711,12 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 1.15.0(webpack-sources@3.2.3)
-      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.60)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
       vue: 3.5.12(typescript@5.6.3)
       vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3))
     optionalDependencies:
       '@vue/test-utils': 2.4.6
-      vitest: 1.6.0(@types/node@18.19.59)(terser@5.36.0)
+      vitest: 1.6.0(@types/node@18.19.60)(terser@5.36.0)
     transitivePeerDependencies:
       - magicast
       - rollup
@@ -8725,12 +8725,12 @@ snapshots:
 
   '@nuxt/ui-templates@1.3.4': {}
 
-  '@nuxt/vite-builder@3.3.2(@types/node@18.19.59)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(sass@1.45.0)(terser@5.36.0)(typescript@4.9.5)(vue@3.5.12(typescript@4.9.5))(webpack-sources@3.2.3)':
+  '@nuxt/vite-builder@3.3.2(@types/node@18.19.60)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(sass@1.45.0)(terser@5.36.0)(typescript@4.9.5)(vue@3.5.12(typescript@4.9.5))(webpack-sources@3.2.3)':
     dependencies:
       '@nuxt/kit': 3.3.2(magicast@0.3.5)(rollup@3.29.5)(webpack-sources@3.2.3)
       '@rollup/plugin-replace': 5.0.7(rollup@3.29.5)
-      '@vitejs/plugin-vue': 4.6.2(vite@4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))
-      '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))
+      '@vitejs/plugin-vue': 4.6.2(vite@4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))
+      '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))
       autoprefixer: 10.4.20(postcss@8.4.47)
       chokidar: 3.6.0
       clear: 0.1.0
@@ -8759,9 +8759,9 @@ snapshots:
       strip-literal: 1.3.0
       ufo: 1.5.4
       unplugin: 1.15.0(webpack-sources@3.2.3)
-      vite: 4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
-      vite-node: 0.29.8(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
-      vite-plugin-checker: 0.5.6(eslint@8.57.1)(optionator@0.9.4)(typescript@4.9.5)(vite@4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0))
+      vite: 4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
+      vite-node: 0.29.8(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
+      vite-plugin-checker: 0.5.6(eslint@8.57.1)(optionator@0.9.4)(typescript@4.9.5)(vite@4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0))
       vue: 3.5.12(typescript@4.9.5)
       vue-bundle-renderer: 1.0.3
     transitivePeerDependencies:
@@ -8784,12 +8784,12 @@ snapshots:
       - vue-tsc
       - webpack-sources
 
-  '@nuxt/vite-builder@3.3.2(@types/node@18.19.59)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))':
+  '@nuxt/vite-builder@3.3.2(@types/node@18.19.60)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@nuxt/kit': 3.3.2(magicast@0.3.5)(rollup@3.29.5)
       '@rollup/plugin-replace': 5.0.7(rollup@3.29.5)
-      '@vitejs/plugin-vue': 4.6.2(vite@4.2.3(@types/node@18.19.59)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
-      '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.2.3(@types/node@18.19.59)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@vitejs/plugin-vue': 4.6.2(vite@4.2.3(@types/node@18.19.60)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
+      '@vitejs/plugin-vue-jsx': 3.1.0(vite@4.2.3(@types/node@18.19.60)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))
       autoprefixer: 10.4.20(postcss@8.4.47)
       chokidar: 3.6.0
       clear: 0.1.0
@@ -8818,9 +8818,9 @@ snapshots:
       strip-literal: 1.3.0
       ufo: 1.5.4
       unplugin: 1.15.0(webpack-sources@3.2.3)
-      vite: 4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
-      vite-node: 0.29.8(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
-      vite-plugin-checker: 0.5.6(eslint@8.57.1)(optionator@0.9.4)(typescript@5.6.3)(vite@4.2.3(@types/node@18.19.59)(terser@5.36.0))
+      vite: 4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
+      vite-node: 0.29.8(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
+      vite-plugin-checker: 0.5.6(eslint@8.57.1)(optionator@0.9.4)(typescript@5.6.3)(vite@4.2.3(@types/node@18.19.60)(terser@5.36.0))
       vue: 3.5.12(typescript@5.6.3)
       vue-bundle-renderer: 1.0.3
     transitivePeerDependencies:
@@ -9200,11 +9200,11 @@ snapshots:
 
   '@types/http-proxy@1.17.15':
     dependencies:
-      '@types/node': 18.19.59
+      '@types/node': 18.19.60
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/node@18.19.59':
+  '@types/node@18.19.60':
     dependencies:
       undici-types: 5.26.5
 
@@ -9372,34 +9372,34 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@3.1.0(vite@4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))':
+  '@vitejs/plugin-vue-jsx@3.1.0(vite@4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.0)
-      vite: 4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
+      vite: 4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
       vue: 3.5.12(typescript@4.9.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@3.1.0(vite@4.2.3(@types/node@18.19.59)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue-jsx@3.1.0(vite@4.2.3(@types/node@18.19.60)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.0)
-      vite: 4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
+      vite: 4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
       vue: 3.5.12(typescript@5.6.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@4.6.2(vite@4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))':
+  '@vitejs/plugin-vue@4.6.2(vite@4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0))(vue@3.5.12(typescript@4.9.5))':
     dependencies:
-      vite: 4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
+      vite: 4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
       vue: 3.5.12(typescript@4.9.5)
 
-  '@vitejs/plugin-vue@4.6.2(vite@4.2.3(@types/node@18.19.59)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
+  '@vitejs/plugin-vue@4.6.2(vite@4.2.3(@types/node@18.19.60)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
-      vite: 4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
+      vite: 4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
       vue: 3.5.12(typescript@5.6.3)
 
   '@vitest/expect@0.29.8':
@@ -11454,7 +11454,7 @@ snapshots:
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 18.19.59
+      '@types/node': 18.19.60
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
@@ -12269,14 +12269,14 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3):
+  nuxt@3.3.2(@types/node@18.19.60)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3):
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 3.3.2(magicast@0.3.5)(rollup@4.24.2)
       '@nuxt/schema': 3.3.2(magicast@0.3.5)(rollup@4.24.2)
       '@nuxt/telemetry': 2.6.0(magicast@0.3.5)(rollup@4.24.2)
       '@nuxt/ui-templates': 1.3.4
-      '@nuxt/vite-builder': 3.3.2(@types/node@18.19.59)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
+      '@nuxt/vite-builder': 3.3.2(@types/node@18.19.60)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))
       '@unhead/ssr': 1.11.10
       '@unhead/vue': 1.11.10(vue@3.5.12(typescript@5.6.3))
       '@vue/reactivity': 3.5.12
@@ -12351,14 +12351,14 @@ snapshots:
       - vue-tsc
       - webpack-sources
 
-  nuxt@3.3.2(@types/node@18.19.59)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(sass@1.45.0)(terser@5.36.0)(typescript@4.9.5)(webpack-sources@3.2.3):
+  nuxt@3.3.2(@types/node@18.19.60)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@3.29.5)(sass@1.45.0)(terser@5.36.0)(typescript@4.9.5)(webpack-sources@3.2.3):
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 3.3.2(magicast@0.3.5)(rollup@3.29.5)(webpack-sources@3.2.3)
       '@nuxt/schema': 3.3.2(magicast@0.3.5)(rollup@3.29.5)(webpack-sources@3.2.3)
       '@nuxt/telemetry': 2.6.0(magicast@0.3.5)(rollup@3.29.5)(webpack-sources@3.2.3)
       '@nuxt/ui-templates': 1.3.4
-      '@nuxt/vite-builder': 3.3.2(@types/node@18.19.59)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(sass@1.45.0)(terser@5.36.0)(typescript@4.9.5)(vue@3.5.12(typescript@4.9.5))(webpack-sources@3.2.3)
+      '@nuxt/vite-builder': 3.3.2(@types/node@18.19.60)(eslint@8.57.1)(magicast@0.3.5)(optionator@0.9.4)(sass@1.45.0)(terser@5.36.0)(typescript@4.9.5)(vue@3.5.12(typescript@4.9.5))(webpack-sources@3.2.3)
       '@unhead/ssr': 1.11.10
       '@unhead/vue': 1.11.10(vue@3.5.12(typescript@4.9.5))
       '@vue/reactivity': 3.5.12
@@ -14147,14 +14147,14 @@ snapshots:
 
   validate-npm-package-name@5.0.1: {}
 
-  vite-node@0.29.8(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0):
+  vite-node@0.29.8(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0):
     dependencies:
       cac: 6.7.14
       debug: 4.3.7
       mlly: 1.7.2
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 4.5.5(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
+      vite: 4.5.5(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14165,13 +14165,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@1.6.0(@types/node@18.19.59)(terser@5.36.0):
+  vite-node@1.6.0(@types/node@18.19.60)(terser@5.36.0):
     dependencies:
       cac: 6.7.14
       debug: 4.3.7
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 5.4.10(@types/node@18.19.59)(terser@5.36.0)
+      vite: 5.4.10(@types/node@18.19.60)(terser@5.36.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14183,7 +14183,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-checker@0.5.6(eslint@8.57.1)(optionator@0.9.4)(typescript@4.9.5)(vite@4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)):
+  vite-plugin-checker@0.5.6(eslint@8.57.1)(optionator@0.9.4)(typescript@4.9.5)(vite@4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)):
     dependencies:
       '@babel/code-frame': 7.26.0
       ansi-escapes: 4.3.2
@@ -14197,7 +14197,7 @@ snapshots:
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.3
-      vite: 4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
+      vite: 4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.12
@@ -14207,7 +14207,7 @@ snapshots:
       optionator: 0.9.4
       typescript: 4.9.5
 
-  vite-plugin-checker@0.5.6(eslint@8.57.1)(optionator@0.9.4)(typescript@5.6.3)(vite@4.2.3(@types/node@18.19.59)(terser@5.36.0)):
+  vite-plugin-checker@0.5.6(eslint@8.57.1)(optionator@0.9.4)(typescript@5.6.3)(vite@4.2.3(@types/node@18.19.60)(terser@5.36.0)):
     dependencies:
       '@babel/code-frame': 7.26.0
       ansi-escapes: 4.3.2
@@ -14221,7 +14221,7 @@ snapshots:
       npm-run-path: 4.0.1
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.3
-      vite: 4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
+      vite: 4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.12
@@ -14261,42 +14261,42 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite@4.2.3(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0):
+  vite@4.2.3(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0):
     dependencies:
       esbuild: 0.17.19
       postcss: 8.4.47
       resolve: 1.22.8
       rollup: 3.29.5
     optionalDependencies:
-      '@types/node': 18.19.59
+      '@types/node': 18.19.60
       fsevents: 2.3.3
       sass: 1.45.0
       terser: 5.36.0
 
-  vite@4.5.5(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0):
+  vite@4.5.5(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0):
     dependencies:
       esbuild: 0.18.20
       postcss: 8.4.47
       rollup: 3.29.5
     optionalDependencies:
-      '@types/node': 18.19.59
+      '@types/node': 18.19.60
       fsevents: 2.3.3
       sass: 1.45.0
       terser: 5.36.0
 
-  vite@5.4.10(@types/node@18.19.59)(terser@5.36.0):
+  vite@5.4.10(@types/node@18.19.60)(terser@5.36.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
       rollup: 4.24.2
     optionalDependencies:
-      '@types/node': 18.19.59
+      '@types/node': 18.19.60
       fsevents: 2.3.3
       terser: 5.36.0
 
-  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
+  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.60)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
     dependencies:
-      '@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+      '@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.60)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'
@@ -14322,7 +14322,7 @@ snapshots:
     dependencies:
       '@types/chai': 4.3.20
       '@types/chai-subset': 1.3.5
-      '@types/node': 18.19.59
+      '@types/node': 18.19.60
       '@vitest/expect': 0.29.8
       '@vitest/runner': 0.29.8
       '@vitest/spy': 0.29.8
@@ -14341,8 +14341,8 @@ snapshots:
       tinybench: 2.9.0
       tinypool: 0.4.0
       tinyspy: 1.1.1
-      vite: 4.5.5(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
-      vite-node: 0.29.8(@types/node@18.19.59)(sass@1.45.0)(terser@5.36.0)
+      vite: 4.5.5(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
+      vite-node: 0.29.8(@types/node@18.19.60)(sass@1.45.0)(terser@5.36.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       jsdom: 19.0.0
@@ -14355,7 +14355,7 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0):
+  vitest@1.6.0(@types/node@18.19.60)(terser@5.36.0):
     dependencies:
       '@vitest/expect': 1.6.0
       '@vitest/runner': 1.6.0
@@ -14374,11 +14374,11 @@ snapshots:
       strip-literal: 2.1.0
       tinybench: 2.9.0
       tinypool: 0.8.4
-      vite: 5.4.10(@types/node@18.19.59)(terser@5.36.0)
-      vite-node: 1.6.0(@types/node@18.19.59)(terser@5.36.0)
+      vite: 5.4.10(@types/node@18.19.60)(terser@5.36.0)
+      vite-node: 1.6.0(@types/node@18.19.60)(terser@5.36.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 18.19.59
+      '@types/node': 18.19.60
     transitivePeerDependencies:
       - less
       - lightningcss