Merge branch 'primefaces:master' into master

.gitignore

@@ -1,15 +1,31 @@
-node_modules
-coverage
-*.log*
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
 .nitro
 .cache
-.output
-.env
 dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log*
+
+# Misc
 .DS_Store
+.fleet
 .idea
 .eslintcache
-api-generator/typedoc.json
+coverage
 **/.DS_Store
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+# Custom
+api-generator/typedoc.json
 apps/showcase/components.d.ts

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [4.3.1](https://github.com/primefaces/primevue/tree/4.3.1) (2025-02-25)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/4.3.0...4.3.1)
+
+**Fixed bugs:**
+
+- DatePicker: selection start and end bug [\#7318](https://github.com/primefaces/primevue/issues/7318)
+- InputNumber: locale warnings [\#7317](https://github.com/primefaces/primevue/issues/7317)
+- ConfirmPopup: alignment bug on first click [\#7316](https://github.com/primefaces/primevue/issues/7316)
+
 ## [4.3.0](https://github.com/primefaces/primevue/tree/4.3.0) (2025-02-24)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/4.3.0-rc.1...4.3.0)

apps/showcase/README.md

@@ -0,0 +1 @@
+# Showcase

apps/showcase/components/doc/codeeditor/templates.js

@@ -21,7 +21,7 @@ const core_dependencies = {
     tailwindcss: app_dependencies['tailwindcss'] || 'latest',
     autoprefixer: app_dependencies['autoprefixer'] || 'latest',
     postcss: app_dependencies['postcss'] || 'latest',
-    'tailwindcss-primeui': app_dependencies['tailwindcss-primeui'] || 'latest',
+    'tailwindcss-primeui': 'latest',
     'unplugin-vue-components': 'latest'
 };
 
@@ -120,12 +120,12 @@ export default defineConfig({
         },
         'tailwind.config.js': {
             content: `/** @type {import('tailwindcss').Config} */
-const primeui = require('tailwindcss-primeui');
+import PrimeUI from 'tailwindcss-primeui';
 
 export default {
     content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
     darkMode: ['selector', '[class="p-dark"]'],
-    plugins: [primeui]
+    plugins: [PrimeUI]
 };
 `
         },

apps/showcase/doc/autocomplete/FormsDoc.vue

@@ -5,8 +5,8 @@
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-1">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
-                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+                <AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" fluid />
+                <Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -41,8 +41,8 @@ export default {
                 basic: `
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
     <div class="flex flex-col gap-1">
-        <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-        <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+        <AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+        <Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
     </div>
     <Button type="submit" severity="secondary" label="Submit" />
 </Form>
@@ -52,8 +52,8 @@ export default {
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-1">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+                <AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+                <Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>
@@ -116,8 +116,8 @@ export default {
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4 w-full md:w-56">
             <div class="flex flex-col gap-1">
-                <AutoComplete name="country" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
-                <Message v-if="$form.country?.invalid" severity="error" size="small" variant="simple">{{ $form.country.error?.message }}</Message>
+                <AutoComplete name="country.name" optionLabel="name" :suggestions="filteredCountries" @complete="search" />
+                <Message v-if="$form.country?.name?.invalid" severity="error" size="small" variant="simple">{{ $form.country.name.error?.message }}</Message>
             </div>
             <Button type="submit" severity="secondary" label="Submit" />
         </Form>

apps/showcase/doc/button/LinkDoc.vue

@@ -1,11 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
+        <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to customize the rendering, use the <i>as</i> to change the element or <i>asChild</i> for advanced templating.</p>
     </DocSectionText>
     <div class="card flex justify-center gap-4">
         <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
+        <Button asChild v-slot="slotProps">
+            <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+        </Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,14 +20,18 @@ export default {
                 basic: `
 <Button label="Link" variant="link" />
 <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-<Button as="router-link" label="Router" to="/" />
+<Button asChild v-slot="slotProps">
+    <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+</Button>
 `,
                 options: `
 <template>
     <div class="card flex justify-center gap-4">
         <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
+        <Button asChild v-slot="slotProps">
+            <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+        </Button>
     </div>
 </template>
 
@@ -37,7 +43,9 @@ export default {
     <div class="card flex justify-center gap-4">
         <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
-        <Button as="router-link" label="Router" to="/" />
+        <Button asChild v-slot="slotProps">
+            <RouterLink to="/" :class="slotProps.class">Router</RouterLink>
+        </Button>
     </div>
 </template>
 

apps/showcase/doc/chip/IconDoc.vue

@@ -7,6 +7,11 @@
         <Chip label="Facebook" icon="pi pi-facebook" />
         <Chip label="Google" icon="pi pi-google" />
         <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        <Chip label="GitHub" icon="pi pi-github" removable>
+            <template #removeicon="{ removeCallback, keydownCallback }">
+                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+            </template>
+        </Chip>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,6 +26,11 @@ export default {
 <Chip label="Facebook" icon="pi pi-facebook" />
 <Chip label="Google" icon="pi pi-google" />
 <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+<Chip label="GitHub" icon="pi pi-github" removable>
+    <template #removeicon="{ removeCallback, keydownCallback }">
+        <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+    </template>
+</Chip>
 `,
                 options: `
 <template>
@@ -29,6 +39,11 @@ export default {
         <Chip label="Facebook" icon="pi pi-facebook" />
         <Chip label="Google" icon="pi pi-google" />
         <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        <Chip label="GitHub" icon="pi pi-github" removable>
+            <template #removeicon="{ removeCallback, keydownCallback }">
+                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+            </template>
+        </Chip>
     </div>
 </template>
 <script>
@@ -42,6 +57,11 @@ export default {
         <Chip label="Facebook" icon="pi pi-facebook" />
         <Chip label="Google" icon="pi pi-google" />
         <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        <Chip label="GitHub" icon="pi pi-github" removable>
+            <template #removeicon="{ removeCallback, keydownCallback }">
+                <i class="pi pi-minus-circle" @click="removeCallback" @keydown="keydownCallback" />
+            </template>
+        </Chip>
     </div>
 </template>
 <script setup>

apps/showcase/doc/common/apidoc/index.json

@@ -736,7 +736,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "DIV",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -1830,7 +1830,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "DIV",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -2117,7 +2117,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -2418,7 +2418,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "DIV",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -8247,7 +8247,7 @@
                             "name": "iconPos",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"left\" | \"right\" | \"top\" | \"bottom\"",
+                            "type": "HintedString<\"left\" | \"right\" | \"top\" | \"bottom\">",
                             "default": "left",
                             "description": "Position of the icon."
                         },
@@ -8303,7 +8303,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -8367,7 +8367,7 @@
                             "name": "size",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"small\" | \"large\"",
+                            "type": "HintedString<\"small\" | \"large\">",
                             "default": "",
                             "description": "Defines the size of the button."
                         },
@@ -8375,7 +8375,7 @@
                             "name": "variant",
                             "optional": true,
                             "readonly": false,
-                            "type": "\"outlined\" | \"text\" | \"link\"",
+                            "type": "HintedString<\"outlined\" | \"text\" | \"link\">",
                             "default": "undefined",
                             "description": "Specifies the variant of the component."
                         },
@@ -8427,14 +8427,6 @@
                             "type": "boolean",
                             "default": "false",
                             "description": "When enabled, it removes component related styles in the core."
-                        },
-                        {
-                            "name": "to",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "string",
-                            "default": "",
-                            "description": "Route Location the router-link should navigate to when clicked on."
                         }
                     ],
                     "methods": [],
@@ -64104,7 +64096,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -64877,7 +64869,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -66377,7 +66369,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "BUTTON",
                             "description": "Use to change the HTML tag of root element."
                         },
@@ -67543,7 +67535,7 @@
                             "name": "as",
                             "optional": true,
                             "readonly": false,
-                            "type": "string | Component<any, any, any, ComputedOptions, MethodOptions, Object, any>",
+                            "type": "string | Component",
                             "default": "DIV",
                             "description": "Use to change the HTML tag of root element."
                         },

apps/showcase/doc/inputnumber/ButtonsDoc.vue

@@ -5,16 +5,16 @@
     <div class="card flex flex-wrap gap-4">
         <div class="flex-auto">
             <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid disabled />
+            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid  />
         </div>
 
         <div class="flex-auto">
             <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid disabled />
+            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid  />
         </div>
         <div class="flex-auto">
             <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid disabled>
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid >
                 <template #incrementbuttonicon>
                     <span class="pi pi-plus" />
                 </template>

apps/showcase/doc/radiobutton/InvalidDoc.vue

@@ -28,7 +28,7 @@ export default {
 export default {
     data() {
         return {
-            val: null
+            value: null
         }
     }
 };
@@ -44,7 +44,7 @@ export default {
 <script setup>
 import { ref } from 'vue';
 
-const val = ref(null);
+const value = ref(null);
 <\/script>
 `
             }

apps/showcase/doc/tailwind/OverrideDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Import and CSS Layer.</p>
+        <p>Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Important and CSS Layer.</p>
         <h3>Important</h3>
         <p>Use the <i>!</i> as a prefix to enforce the styling. This is not the recommend approach, and should be used as last resort to avoid adding unnecessary style classes to your bundle.</p>
 

apps/showcase/doc/toggleswitch/TemplateDoc.vue

@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>The <i>handle</i> slot is available to display custom content.</p>
     </DocSectionText>
-    <div class="card flex justify-center gap-4">
+    <div class="card flex justify-center">
         <ToggleSwitch v-model="checked">
             <template #handle="{ checked }">
                 <i :class="['!text-xs pi', { 'pi-check': checked, 'pi-times': !checked }]" />

apps/showcase/nuxt.config.js

@@ -18,18 +18,22 @@ try {
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-    typescript: false,
+    compatibilityDate: '2024-11-01',
+    devtools: { enabled: false },
     modules: ['@primevue/nuxt-module'],
-    components: {
+    components: [
+        {
             path: '~/components',
             pathPrefix: false
-    },
+        }
+    ],
     vite: {
+        optimizeDeps: {
+            noDiscovery: true,
+            include: ['quill', 'yup']
+        },
         resolve: {
             dedupe: ['vue', '@primeuix/styles', '@primeuix/themes', '@primeuix/utils'],
-            optimizeDeps: {
-                disabled: true
-            },
             alias
         }
     },
@@ -40,14 +44,7 @@ export default defineNuxtConfig({
         '/accessibility': { redirect: { to: '/guides/accessibility', statusCode: 301 } },
         '/installation': { redirect: { to: '/vite', statusCode: 301 } }
     },
-    primevue:
-        PROCESS_ENV.DEV_ENV === 'hot'
-            ? {
-                  usePrimeVue: false,
-                  autoImport: true,
-                  loadStyles: false
-              }
-            : {
+    primevue: {
         autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application.
         importTheme: { from: '@/themes/app-theme.js' }
     },

apps/showcase/package.json

@@ -1,9 +1,10 @@
 {
     "name": "showcase",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "author": "PrimeTek Informatics",
     "description": "",
     "homepage": "https://primevue.org/",
+    "type": "module",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -13,15 +14,6 @@
     "bugs": {
         "url": "https://github.com/primefaces/primevue/issues"
     },
-    "scripts": {
-        "build": "pnpm run build:prebuild && nuxt build",
-        "dev": "nuxt dev",
-        "generate": "nuxt generate",
-        "preview": "nuxt preview",
-        "postinstall": "nuxt prepare",
-        "build:prebuild": "node ./scripts/prebuild.js",
-        "build:apidoc": "node ./scripts/build-apidoc.js"
-    },
     "keywords": [
         "primevue",
         "vue",
@@ -37,35 +29,41 @@
         "unstyled",
         "passthrough"
     ],
-    "devDependencies": {
-        "@stackblitz/sdk": "^1.8.2",
-        "autoprefixer": "^10.4.16",
-        "chart.js": "3.3.2",
-        "jsdom": "^19.0.0",
-        "nuxt": "3.3.2",
-        "postcss": "^8.4.31",
-        "prettier": "2.7.1",
-        "primeicons": "^7.0.0",
-        "quill": "2.0.0",
-        "sass": "1.45.0",
-        "sass-loader": "8.0.2",
-        "tailwindcss": "^3.4.1",
-        "tailwindcss-primeui": "^0.4.0",
-        "typedoc": "0.23.23",
-        "primevue": "workspace:*",
-        "@primevue/core": "workspace:*",
-        "@primevue/nuxt-module": "workspace:*",
-        "@primevue/forms": "workspace:*",
-        "@primeuix/themes": "catalog:",
-        "yup": "1.4.0",
-        "zod": "3.23.8",
-        "valibot": "^0.42.1",
-        "superstruct": "^2.0.2"
+    "scripts": {
+        "build": "pnpm run build:prebuild && nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "build:prebuild": "node ./scripts/prebuild.mjs",
+        "build:apidoc": "node ./scripts/build-apidoc.cjs"
     },
     "dependencies": {
-        "@docsearch/js": "^3.3.3"
+        "@docsearch/js": "catalog:app",
+        "@primeuix/themes": "catalog:",
+        "@primevue/core": "workspace:*",
+        "@primevue/forms": "workspace:*",
+        "@primevue/nuxt-module": "workspace:*",
+        "primeicons": "catalog:",
+        "primevue": "workspace:*",
+        "chart.js": "catalog:app",
+        "quill": "catalog:app",
+        "superstruct": "^2.0.2",
+        "valibot": "^0.42.1",
+        "yup": "1.4.0",
+        "zod": "3.23.8"
     },
-    "engines": {
-        "node": ">=12.11.0"
+    "devDependencies": {
+        "@stackblitz/sdk": "^1.8.2",
+        "autoprefixer": "^10",
+        "jsdom": "^19.0.0",
+        "nuxt": "catalog:app",
+        "postcss": "^8.4.31",
+        "sass": "catalog:app",
+        "sass-loader": "catalog:app",
+        "tailwindcss": "^3",
+        "tailwindcss-primeui": "catalog:",
+        "typedoc": "0.23.23",
+        "vite": "catalog:app"
     }
 }

apps/showcase/pages/textarea/index.vue

@@ -2,7 +2,7 @@
     <DocComponent
         title="Vue Textarea Component"
         header="Textarea"
-        description="Textarea adds styling, key filtering and autoResize functionality to standard textarea element."
+        description="Textarea adds styling and autoResize functionality to standard textarea element."
         :componentDocs="docs"
         :apiDocs="['Textarea']"
         :ptTabComponent="ptComponent"
@@ -20,9 +20,9 @@ import FloatLabelDoc from '@/doc/textarea/FloatLabelDoc.vue';
 import FormsDoc from '@/doc/textarea/FormsDoc.vue';
 import IftaLabelDoc from '@/doc/textarea/IftaLabelDoc.vue';
 import ImportDoc from '@/doc/textarea/ImportDoc.vue';
-import SizesDoc from '@/doc/textarea/SizesDoc.vue';
 import InvalidDoc from '@/doc/textarea/InvalidDoc.vue';
 import PTComponent from '@/doc/textarea/pt/index.vue';
+import SizesDoc from '@/doc/textarea/SizesDoc.vue';
 import ThemingDoc from '@/doc/textarea/theming/index.vue';
 
 export default {

apps/showcase/rollup.config.js

@@ -1,296 +0,0 @@
-import alias from '@rollup/plugin-alias';
-import { babel } from '@rollup/plugin-babel';
-import terser from '@rollup/plugin-terser';
-import postcss from 'rollup-plugin-postcss';
-import vue from 'rollup-plugin-vue';
-
-import fs from 'fs-extra';
-import path from 'path';
-
-import viteConfig, { THEME_PRESETS } from './nuxt-vite.config.js';
-import pkg from './package.json';
-
-// globals
-const GLOBALS = {
-    vue: 'Vue'
-};
-
-// externals
-const GLOBAL_EXTERNALS = ['vue', 'chart.js/auto', 'quill'];
-const INLINE_EXTERNALS = Object.keys(viteConfig.resolve.alias);
-const EXTERNALS = [...GLOBAL_EXTERNALS, ...INLINE_EXTERNALS];
-
-// alias
-const ALIAS_ENTRIES = Object.entries(viteConfig.resolve.alias).map(([key, value]) => ({ find: key, replacement: value }));
-
-// plugins
-const BABEL_PLUGIN_OPTIONS = {
-    extensions: ['.js', '.vue'],
-    exclude: 'node_modules/**',
-    presets: ['@babel/preset-env'],
-    plugins: [],
-    skipPreflightCheck: true,
-    babelHelpers: 'runtime',
-    babelrc: false
-};
-
-const ALIAS_PLUGIN_OPTIONS = {
-    entries: ALIAS_ENTRIES
-};
-
-const POSTCSS_PLUGIN_OPTIONS = {
-    sourceMap: false
-};
-
-const TERSER_PLUGIN_OPTIONS = {
-    compress: {
-        keep_infinity: true,
-        pure_getters: true,
-        reduce_funcs: true
-    },
-    mangle: {
-        reserved: ['theme', 'css']
-    }
-};
-
-const PLUGINS = [vue(), postcss(POSTCSS_PLUGIN_OPTIONS), babel(BABEL_PLUGIN_OPTIONS)];
-
-const ENTRY = {
-    entries: [],
-    onwarn(warning) {
-        if (warning.code === 'CIRCULAR_DEPENDENCY') {
-            //console.error(`(!) ${warning.message}`);
-            return;
-        }
-    },
-    format: {
-        cjs_es(options) {
-            return ENTRY.format.cjs(options).es(options);
-        },
-        cjs({ input, output, minify }) {
-            ENTRY.entries.push({
-                onwarn: ENTRY.onwarn,
-                input,
-                plugins: [...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
-                external: EXTERNALS,
-                inlineDynamicImports: true,
-                output: [
-                    {
-                        format: 'cjs',
-                        file: `${output}${minify ? '.min' : ''}.cjs`,
-                        sourcemap: true,
-                        exports: 'auto'
-                    }
-                ]
-            });
-
-            return ENTRY.format;
-        },
-        es({ input, output, minify }) {
-            ENTRY.entries.push({
-                onwarn: ENTRY.onwarn,
-                input,
-                plugins: [...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
-                external: EXTERNALS,
-                inlineDynamicImports: true,
-                output: [
-                    {
-                        format: 'es',
-                        file: `${output}${minify ? '.min' : ''}.mjs`,
-                        sourcemap: true,
-                        exports: 'auto'
-                    }
-                ]
-            });
-
-            return ENTRY.format;
-        },
-        umd({ name, input, output, minify }) {
-            ENTRY.entries.push({
-                onwarn: ENTRY.onwarn,
-                input,
-                plugins: [alias(ALIAS_PLUGIN_OPTIONS), ...PLUGINS, minify && terser(TERSER_PLUGIN_OPTIONS)],
-                external: GLOBAL_EXTERNALS,
-                inlineDynamicImports: true,
-                output: [
-                    {
-                        format: 'umd',
-                        name: name ?? 'PrimeVue',
-                        file: `${output}${minify ? '.min' : ''}.js`,
-                        globals: GLOBALS,
-                        exports: 'auto'
-                    }
-                ]
-            });
-
-            return ENTRY.format;
-        }
-    }
-};
-
-function addFile() {
-    fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR), { withFileTypes: true })
-        .filter((dir) => dir.isDirectory())
-        .forEach(({ name: folderName }) => {
-            fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR + folderName)).forEach((file) => {
-                let name = file.split(/(.vue)$|(.js)$/)[0].toLowerCase();
-
-                if (name === folderName) {
-                    const input = process.env.INPUT_DIR + folderName + '/' + file;
-                    const output = process.env.OUTPUT_DIR + folderName + '/' + name;
-
-                    ENTRY.format.es({ input, output });
-                }
-            });
-        });
-}
-
-function addIcon() {
-    const iconDir = path.resolve(__dirname, process.env.INPUT_DIR + 'icons');
-
-    fs.readdirSync(path.resolve(__dirname, iconDir), { withFileTypes: true })
-        .filter((dir) => dir.isDirectory())
-        .forEach(({ name: folderName }) => {
-            fs.readdirSync(path.resolve(__dirname, iconDir + '/' + folderName)).forEach((file) => {
-                if (/\.vue$/.test(file)) {
-                    const name = file.split(/(.vue)$/)[0].toLowerCase();
-                    const input = process.env.INPUT_DIR + 'icons/' + folderName + '/' + file;
-                    const output = process.env.OUTPUT_DIR + 'icons/' + folderName + '/' + name;
-
-                    ENTRY.format.es({ input, output });
-                }
-            });
-        });
-}
-
-function addStyle() {
-    fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR), { withFileTypes: true })
-        .filter((dir) => dir.isDirectory())
-        .forEach(({ name: folderName }) => {
-            try {
-                fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR + folderName + '/style')).forEach((file) => {
-                    if (/\.js$/.test(file)) {
-                        const name = file.split(/(.js)$/)[0].toLowerCase();
-                        const input = process.env.INPUT_DIR + folderName + '/style/' + file;
-                        const output = process.env.OUTPUT_DIR + folderName + '/style/' + name;
-
-                        ENTRY.format.es({ input, output });
-                    }
-                });
-            } catch {}
-        });
-}
-
-function traverseDir(dir, condition, callback) {
-    try {
-        const files = fs.readdirSync(dir);
-
-        files.forEach((file) => {
-            const filePath = path.join(dir, file);
-            const fileStat = fs.statSync(filePath);
-
-            if (fileStat.isDirectory()) {
-                traverseDir(filePath, condition, callback);
-            } else if (condition?.(file) && fileStat.isFile()) {
-                callback?.(file, filePath, dir);
-            }
-        });
-    } catch {}
-}
-
-function addThemes() {
-    traverseDir(
-        path.resolve(__dirname, process.env.INPUT_DIR + 'themes'),
-        (file) => file === 'index.js',
-        (file, filePath, folderPath) => {
-            const searchFolder = '/' + process.env.INPUT_DIR;
-            const folderName = folderPath.substring(folderPath.indexOf(searchFolder) + searchFolder.length);
-            const input = process.env.INPUT_DIR + folderName + '/' + file;
-            const output = process.env.OUTPUT_DIR + folderName + '/' + 'index';
-
-            ENTRY.format.es({ input, output });
-        }
-    );
-}
-
-function addCore() {
-    ENTRY.format.es({ input: process.env.INPUT_DIR + 'config/PrimeVue.js', output: process.env.OUTPUT_DIR + 'config/config' });
-    ENTRY.format.es({ input: process.env.INPUT_DIR + 'service/PrimeVueService.js', output: process.env.OUTPUT_DIR + 'service/primevueservice' });
-}
-
-function addPassThrough() {
-    ENTRY.format.es({ input: process.env.INPUT_DIR + 'passthrough/index.js', output: process.env.OUTPUT_DIR + 'passthrough/index' });
-}
-
-function addLibrary() {
-    THEME_PRESETS?.forEach((preset) => {
-        ENTRY.format.umd({ name: `PrimeVue.Themes.${preset[0].toUpperCase() + preset.slice(1)}`, input: process.env.INPUT_DIR + `themes/${preset}/index.js`, output: process.env.OUTPUT_DIR + `umd/themes/${preset}`, minify: true });
-    });
-
-    ENTRY.format.umd({ name: 'PrimeVue', input: process.env.INPUT_DIR + 'primevue.js', output: process.env.OUTPUT_DIR + 'umd/primevue', minify: true });
-}
-
-function addPackageJson() {
-    const outputDir = path.resolve(__dirname, process.env.OUTPUT_DIR);
-    const packageJson = `{
-    "name": "primevue",
-    "version": "${pkg.version}",
-    "private": "false",
-    "author": "PrimeTek Informatics",
-    "description": "PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.",
-    "homepage": "https://primevue.org/",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/primefaces/primevue.git"
-    },
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/primefaces/primevue/issues"
-    },
-    "keywords": [
-        "primevue",
-        "vue",
-        "vue.js",
-        "vue2",
-        "vue3",
-        "ui library",
-        "component library",
-        "material",
-        "bootstrap",
-        "fluent",
-        "tailwind",
-        "unstyled",
-        "passthrough"
-    ],
-    "unpkg": "umd/primevue.min.js",
-    "jsdelivr": "umd/primevue.min.js",
-    "web-types": "./web-types.json",
-    "vetur": {
-        "tags": "./vetur-tags.json",
-        "attributes": "./vetur-attributes.json"
-    },
-    "sideEffects": [
-        "*.vue"
-    ],
-    "peerDependencies": {
-        "vue": "^3.5.0"
-    },
-    "engines": {
-        "node": ">=12.11.0"
-    }
-}`;
-
-    !fs.existsSync(outputDir) && fs.mkdirSync(outputDir);
-    fs.writeFileSync(path.resolve(outputDir, 'package.json'), packageJson);
-}
-
-addCore();
-addStyle();
-addThemes();
-addIcon();
-addFile();
-addPassThrough();
-addLibrary();
-addPackageJson();
-
-export default ENTRY.entries;

apps/showcase/scripts/prebuild.js

@@ -1,20 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const rootDir = path.resolve(__dirname, '../');
-const workspaceDir = path.resolve(__dirname, '../../../');
-
-const pkg = path.resolve(rootDir, 'package.json');
-
-const pkgJson = require(pkg);
-const packageJson = require(path.resolve(workspaceDir, 'package.json'));
-
-pkgJson.version = packageJson.version;
-pkgJson.author = packageJson.author;
-pkgJson.homepage = packageJson.homepage;
-pkgJson.license = packageJson.license;
-pkgJson.repository = { ...pkgJson.repository, ...packageJson.repository };
-pkgJson.bugs = { ...pkgJson.bugs, ...packageJson.bugs };
-pkgJson.engines = { ...pkgJson.engines, ...packageJson.engines };
-
-fs.writeFileSync(pkg, JSON.stringify(pkgJson, null, 4));

apps/showcase/scripts/prebuild.mjs

@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const rootDir = path.resolve(__dirname, '../');
+const workspaceDir = path.resolve(__dirname, '../../../');
+
+const pkgPath = path.resolve(rootDir, 'package.json');
+const packageJsonPath = path.resolve(workspaceDir, 'package.json');
+
+const pkgJson = JSON.parse(fs.readFileSync(pkgPath, { encoding: 'utf-8' }));
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf-8' }));
+
+pkgJson.version = packageJson.version;
+pkgJson.author = packageJson.author;
+pkgJson.homepage = packageJson.homepage;
+pkgJson.license = packageJson.license;
+pkgJson.repository = { ...pkgJson.repository, ...packageJson.repository };
+pkgJson.bugs = { ...pkgJson.bugs, ...packageJson.bugs };
+pkgJson.engines = { ...pkgJson.engines, ...packageJson.engines };
+
+fs.writeFileSync(pkgPath, JSON.stringify(pkgJson, null, 4));

apps/showcase/tailwind.config.js

@@ -1,10 +1,10 @@
 /** @type {import('tailwindcss').Config} */
-const primeui = require('tailwindcss-primeui');
+import PrimeUI from 'tailwindcss-primeui';
 
-module.exports = {
+export default {
     darkMode: ['selector', '[class="p-dark"]'],
     content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
-    plugins: [primeui],
+    plugins: [PrimeUI],
     theme: {
         screens: {
             sm: '576px',

apps/showcase/tsconfig.json

@@ -1,4 +1,6 @@
 {
+    // https://nuxt.com/docs/guide/concepts/typescript
+    "extends": "./.nuxt/tsconfig.json",
     "compilerOptions": {
         "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],

apps/volt/README.md

@@ -0,0 +1 @@
+# Volt

apps/volt/app.vue

@@ -0,0 +1,35 @@
+<template>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
+</template>
+
+<script>
+import EventBus from '@/layouts/AppEventBus';
+
+export default {
+    mounted() {
+        EventBus.on('dark-mode-toggle', this.darkModeToggleListener);
+    },
+    beforeUnmount() {
+        EventBus.off('dark-mode-toggle', this.darkModeToggleListener);
+    },
+    methods: {
+        darkModeToggleListener(event) {
+            if (!document.startViewTransition) {
+                this.toggleDarkMode(event);
+
+                return;
+            }
+
+            document.startViewTransition(() => this.toggleDarkMode(event));
+        },
+        toggleDarkMode() {
+            document.documentElement.classList.toggle('p-dark');
+            this.$appState.darkTheme = !this.$appState.darkTheme;
+
+            EventBus.emit('dark-mode-toggle-complete');
+        }
+    }
+};
+</script>

apps/volt/assets/data/menu.json

@@ -0,0 +1,173 @@
+{
+    "data": [
+        {
+            "name": "Getting Started",
+            "icon": "pi pi-home",
+            "children": [
+                {
+                    "name": "Introduction",
+                    "to": "/introduction"
+                },
+                {
+                    "name": "Vite",
+                    "to": "/vite"
+                },
+                {
+                    "name": "Nuxt",
+                    "to": "/nuxt"
+                }
+            ]
+        },
+        {
+            "name": "Components",
+            "icon": "pi pi-compass",
+            "children": [
+                {
+                    "name": "Avatar",
+                    "to": "/avatar"
+                },
+                {
+                    "name": "Button",
+                    "to": "/button"
+                },
+                {
+                    "name": "Card",
+                    "to": "/card"
+                },
+                {
+                    "name": "Checkbox",
+                    "to": "/checkbox"
+                },
+                {
+                    "name": "Chip",
+                    "to": "/chip"
+                },
+                {
+                    "name": "InputMask",
+                    "to": "/inputmask"
+                },
+                {
+                    "name": "InputNumber",
+                    "to": "/inputnumber"
+                },
+                {
+                    "name": "InputText",
+                    "to": "/inputtext"
+                },
+                {
+                    "name": "ProgressBar",
+                    "to": "/progressbar"
+                },
+                {
+                    "name": "RadioButton",
+                    "to": "/radiobutton"
+                },
+                {
+                    "name": "Rating",
+                    "to": "/rating"
+                },
+                {
+                    "name": "SelectButton",
+                    "to": "/selectbutton"
+                },
+                {
+                    "name": "Skeleton",
+                    "to": "/skeleton"
+                },
+                {
+                    "name": "Slider",
+                    "to": "/slider"
+                },
+                {
+                    "name": "Textarea",
+                    "to": "/textarea"
+                },
+                {
+                    "name": "Timeline",
+                    "to": "/timeline"
+                },
+                {
+                    "name": "ToggleButton",
+                    "to": "/togglebutton"
+                },
+                {
+                    "name": "ToggleSwitch",
+                    "to": "/toggleswitch"
+                }
+            ]
+        },
+        {
+            "name": "Icons",
+            "icon": "pi pi-eye",
+            "to": "/icons"
+        },
+        {
+            "name": "Figma UI Kit",
+            "icon": "pi pi-pencil",
+            "to": "https://primevue.org/uikit"
+        },
+        {
+            "name": "Templates",
+            "icon": "pi pi-heart",
+            "to": "https://primevue.org/templates"
+        },
+        {
+            "name": "PrimeBlocks",
+            "icon": "pi pi-server",
+            "href": "https://primeblocks.org"
+        },
+        {
+            "name": "Support",
+            "icon": "pi pi-question",
+            "children": [
+                {
+                    "name": "Discord Server",
+                    "href": "https://discord.gg/gzKFYnpmCY"
+                },
+                {
+                    "name": "Forum",
+                    "href": "https://github.com/orgs/primefaces/discussions"
+                },
+                {
+                    "name": "PRO Support",
+                    "href": "https://primevue.org/support"
+                }
+            ]
+        },
+        {
+            "name": "Discover",
+            "icon": "pi pi-search",
+            "children": [
+                {
+                    "name": "About Us",
+                    "href": "https://primevue.org/team"
+                },
+                {
+                    "name": "Newsletter",
+                    "href": "https://www.primefaces.org/newsletter"
+                },
+                {
+                    "name": "PrimeGear",
+                    "href": "https://gear.primefaces.org"
+                },
+                {
+                    "name": "Source Code",
+                    "href": "https://github.com/primefaces/primevue/tree/master/apps/volt/volt"
+                },
+                {
+                    "name": "Store",
+                    "href": "https://www.primefaces.org/store/"
+                },
+                {
+                    "name": "Twitter",
+                    "href": "https://twitter.com/primevue"
+                },
+                {
+                    "name": "PrimeTV",
+                    "icon": "pi pi-youtube",
+                    "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
+                }
+            ]
+        }
+    ]
+}

apps/volt/assets/data/news.json

@@ -0,0 +1,4 @@
+{
+    "id": 4,
+    "content": "Tailwind Presets Now Support with PrimeVue v4.2 🎉"
+}

apps/volt/assets/styles/app/_code.scss

@@ -0,0 +1,133 @@
+code[class*="language-"],
+pre[class*="language-"] {
+    background: none;
+    font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace;
+    text-align: start;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+div.code-toolbar > .toolbar {
+    display: none;
+}
+
+
+pre[class*="language-"] {
+    position: relative;
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    max-height: 40rem;
+    overflow: auto;
+    color-scheme: dark;
+
+    &:before, &:after {
+        display: none !important;
+    }
+
+    code {
+        border-inline-start: 1rem solid transparent;
+        box-shadow: none;
+        margin: 0;
+        font-size: 14px;
+        border-radius: 10px;
+        color: #ffffff;
+        max-height: inherit;
+        height: inherit;
+        padding: 0 1rem;
+        display: block;
+        overflow: auto;
+
+        .token.comment,
+        .token.block-comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: #bbf7d0;
+        }
+
+        .token.punctuation {
+            color: #bfdbfe;
+        }
+
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.number,
+        .token.function-name,
+        .token.constant,
+        .token.symbol,
+        .token.deleted {
+            color: #93c5fd;
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.function,
+        .token.builtin,
+        .token.inserted {
+            color: #eff6ff;
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .token.variable {
+            color: #ffffff;
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword,
+        .token.class-name {
+            color: #bbf7d0;
+        }
+
+        .token.regex,
+        .token.important {
+            color: #fde68a;
+        }
+
+        .language-css .token.string,
+        .style .token.string {
+            color: #fde68a;
+        }
+
+        .token.important {
+            font-weight: normal;
+        }
+
+        .token.bold {
+            font-weight: bold;
+        }
+        .token.italic {
+            font-style: italic;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
+    }
+}
+
+.copy-to-clipboard-button {
+    display: none;
+}
+
+pre[class*="language-"] {
+    code {
+        background: var(--code-background);
+    }
+}

apps/volt/assets/styles/app/_content.scss

@@ -0,0 +1,18 @@
+.layout-content {
+    padding: 6rem 4rem 0 4rem;
+    display: flex;
+
+    .layout-content-slot {
+        flex: 1 1 auto;
+        width: 1%;
+        padding-top: .5rem;
+    }
+}
+
+.card {
+    background: var(--card-background);
+    border: var(--card-border);
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+}

apps/volt/assets/styles/app/_core.scss

@@ -0,0 +1,83 @@
+html {
+    font-size: 14px;
+    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+}
+
+body {
+    margin: 0px;
+    min-height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: var(--ground-background);
+    font-weight: normal;
+    color: var(--text-color);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.layout-wrapper {
+    background-color: var(--ground-background);
+}
+
+a {
+    text-decoration: none;
+}
+
+::selection {
+    background-color: var(--selection-background);
+    color: var(--selection-text-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-block: 1.5rem 1rem;
+    margin-inline: 0;
+    font-family: inherit;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--high-contrast-text-color);
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
+h1 {
+    font-size: 1.75rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+h3 {
+    font-size: 1.25rem;
+}
+
+h4 {
+    font-size: 1.125rem;
+}
+
+h5 {
+    font-size: 1rem;
+}
+
+h6 {
+    font-size: .875rem;
+}
+
+p {
+    line-height: 1.625;
+    margin-block: 0 1rem;
+    margin-inline: 0;
+}
+
+.p-toast.p-toast-top-right,
+.p-toast.p-toast-top-left {
+    top: 7rem;
+}

apps/volt/assets/styles/app/_doc.scss

@@ -0,0 +1,440 @@
+@mixin mark() {
+    border-radius: 6px;
+    padding: 2px 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    font-style: normal;
+    background: var(--mark-background);
+    color: var(--mark-text);
+}
+
+.mark {
+    @include mark();
+}
+
+.doc-tabmenu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    margin-bottom: 2rem;
+    overflow: auto;
+    position: relative;
+
+    &:after {
+        display: block;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        border-bottom: 1px solid var(--border-color);
+        content: '';
+    }
+
+    li {
+        position: relative;
+        z-index: 1;
+
+        button {
+            background-color: transparent;
+            border: 0 none;
+            display: block;
+            padding-block: 0 1rem;
+            padding-inline: 2rem;
+            text-align: center;
+            color: var(--text-color);
+            font-size: 1rem;
+            letter-spacing: 1px;
+            cursor: pointer;
+            margin: 0;
+            transition: outline-color 0.2s, border-color 0.2s;
+            outline-color: transparent;
+            border-bottom: 1px solid transparent;
+            border-start-end-radius: 6px;
+            border-start-start-radius: 6px;
+            white-space: nowrap;
+            --p-focus-ring-offset: -1px;
+            @include focus-visible();
+
+            &:hover {
+                border-bottom-color: var(--hover-border-color);
+            }
+
+            &:focus {
+                outline: 0 none;
+            }
+
+        }
+
+        &.doc-tabmenu-active {
+            button {
+                border-bottom-color: var(--primary-text-color);
+                color: var(--primary-text-color);
+            }
+        }
+    }
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.doc-tabpanel,
+.doc {
+    display: flex;
+}
+
+.doc-main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    min-width: 0;
+}
+
+.doc-intro {
+    margin-bottom: 1.5rem;
+
+    p {
+        font-size: 1.25rem;
+        margin: 0;
+
+        a {
+            @include doc-link();
+        }
+    }
+}
+
+.doc-link {
+    @include doc-link();
+}
+
+.doc-section-label {
+    display: flex;
+    align-items: center;
+    scroll-margin-top: 6.5rem;
+
+    > a {
+        color: var(--primary-text-color);
+        opacity: 0.7;
+        margin-inline-start: 1rem;
+        display: none;
+        transition: outline-color 0.2s, border-color 0.2s, opacity 0.2s;
+        outline-color: transparent;
+        border-radius: 6px;
+        @include focus-visible();
+    }
+
+    > .doc-section-label-badge {
+        margin-inline-start: 0.5rem;
+    }
+
+    &:has(.doc-section-label-badge) {
+        line-height: 1;
+    }
+
+    &:hover {
+        > a {
+            display: block;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.doc-section-description {
+    > p {
+        font-size: 1.125rem;
+
+        i {
+            @include mark();
+        }
+
+        a {
+            @include doc-link();
+        }
+    }
+
+    li {
+        font-size: 1.125rem;
+    }
+}
+
+.doc-notification {
+    line-height: 1.5;
+    padding: 1rem;
+    font-weight: 500;
+    border-radius: 10px;
+    background: var(--mark-background);
+    color: var(--mark-text);
+    margin-bottom: 1rem;
+}
+
+.doc-section-nav {
+    position: sticky;
+    top: 6rem;
+    right: 0;
+    width: 14rem;
+    max-height: calc(100vh - 15rem);
+    list-style: none;
+    margin: 0;
+    padding-block: 0.25rem;
+    padding-inline: 0;
+    margin-inline-start: 4rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    align-self: flex-start;
+
+    > .navbar-item {
+        .navbar-item-content {
+            border-inline-start: 1px solid var(--border-color);
+            padding-inline-start: .25rem;
+            transition: all .2s;
+
+            &:hover {
+                border-inline-start-color: var(--hover-border-color);
+            }
+        }
+    }
+
+    .navbar-item {
+        > .navbar-item-content {
+            display: flex;
+
+            button {
+                font-size: 1rem;
+                text-align: start;
+                background: transparent;
+                margin: 0;
+                border: 0 none;
+                padding-block: 0.25rem;
+                padding-inline: 1rem;
+                color: var(--text-secondary-color);
+                white-space: nowrap;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                transition: outline-color 0.2s, border-color .2s;
+                outline-color: transparent;
+                cursor: pointer;
+                user-select: none;
+                --p-focus-ring-offset: -1px;
+                @include focus-visible();
+            }
+
+            &:hover {
+                button {
+                    color: var(--text-color);
+                }
+            }
+        }
+
+        &.active-navbar-item {
+            > .navbar-item-content {
+                border-color: var(--primary-text-color);
+
+                button {
+                    color: var(--primary-text-color);
+                }
+            }
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            .navbar-item {
+                .navbar-item-content {
+                    padding-inline-start: 1rem;
+                }
+            }
+        }
+    }
+}
+
+.doc-section-code {
+    position: relative;
+
+    div {
+        &::-webkit-scrollbar {
+            width: 5px;
+        }
+    }
+
+    &:not(:last-child) {
+        margin-bottom: 1rem;
+    }
+
+    &:hover {
+        .doc-section-code-buttons {
+            display: flex;
+        }
+    }
+}
+
+.doc-section-code-buttons {
+    position: absolute;
+    align-items: center;
+    justify-content: end;
+    z-index: 1;
+    top: .75rem;
+    right: .75rem;
+    gap: .5rem;
+    display: none;
+    background: rgba(255,255,255,.05);
+    border-radius: 10px;
+    padding: 2px;
+    backdrop-filter: blur(6px);
+    border: 1px solid rgba(255, 255, 255, .1);
+
+    button {
+        outline: 0 none;
+        border-radius: 8px;
+        outline-offset: 0;
+        background-color: transparent;
+        transition: background-color .2s, box-shadow .2s;
+        border: 0 none;
+        color: var(--code-button-text-color);
+        cursor: pointer;
+
+        &:hover {
+            background-color: rgba(255,255,255,.1);
+            color: var(--code-button-text-color);
+        }
+
+        &.code-active {
+            color: #bbf7d0;
+        }
+    }
+}
+
+.doc-section-code-tooltip .p-tooltip-text {
+    padding: 0.5rem;
+    font-size: 11px;
+}
+
+
+
+.doc-tablewrapper {
+    overflow: auto;
+}
+
+.doc-table {
+    border-collapse: collapse;
+    width: 100%;
+    min-width: 960px;
+    margin-bottom: 1.5rem;
+
+    th {
+        border-bottom: 1px solid var(--border-color);
+        padding-block: .75rem;
+        padding-inline: 1rem;
+        text-align: start;
+        text-transform: capitalize;
+    }
+
+    tbody {
+        tr:hover {
+            background: var(--hover-background);
+        }
+
+        td {
+            padding-block: .75rem;
+            padding-inline: 1rem;
+            border-bottom: 1px solid var(--border-color);
+            white-space: pre-line;
+            line-height: 1.5;
+            scroll-margin-top: 6.5rem;
+
+            &:first-child {
+                color: var(--primary-text-color);
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-weight: 600;
+            }
+
+            .doc-option-type {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-text-color);
+                font-weight: 500;
+
+                .doc-option-type-options-container {
+                    display: flex;
+                    align-items: center;
+                }
+
+                &.doc-option-link {
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+
+            .doc-option-name, i:not(.pi) {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                position: relative;
+                scroll-margin-top: 6.5rem;
+                background-color: var(--mark-background);
+                color: var(--mark-text);
+                border-radius: 6px;
+                padding-block: 2px;
+                padding-inline: 6px;
+                font-weight: 600;
+                font-style: normal;
+                white-space: nowrap;
+
+                .doc-option-link {
+                    position: absolute;
+                    top: 0;
+                    right: -1.5rem;
+                    color: var(--primary-text-color);
+                    opacity: 0.7;
+                    display: none;
+                    transition: opacity 0.3s, colors 0.3s;
+                }
+            }
+
+            &:hover {
+                .doc-option-name {
+                    .doc-option-link {
+                        display: inline;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+
+            .doc-option-default,
+            .doc-option-returnType {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-weight: 400;
+                font-style: normal;
+                display: flex;
+                border-width: 1px;
+                border-style: solid;
+                border-radius: 6px;
+                padding-block: 2px;
+                padding-inline: 6px;
+                max-width: min-content;
+                border-color: var(--border-color);
+                background-color: var(--card-background);
+                color: var(--text-secondary-color);
+            }
+
+            .doc-option-parameter-name {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+
+            .doc-option-parameter-type {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-text-color);
+            }
+
+            .doc-option-params {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+        }
+    }
+}

apps/volt/assets/styles/app/_docsearch.scss

@@ -0,0 +1,147 @@
+.DocSearch-Button {
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    height: 2rem;
+    background-color: var(--card-background);
+    margin: 0;
+    transition: outline-color .2s, border-color .2s;
+    outline-color: transparent;
+    padding: 0 .5rem;
+    @include focus-visible();
+
+    &:hover {
+        border-color: var(--primary-color);
+        box-shadow: none;
+    }
+
+    .DocSearch-Search-Icon {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .DocSearch-Button-Keys {
+        overflow: hidden;
+        min-width: auto;
+        height: auto;
+        background: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        padding: 0;
+        gap: 2px;
+
+        .DocSearch-Button-Key {
+            background: transparent;
+            display: flex;
+            padding: 0;
+            margin: 0;
+            top: 0;
+            border-radius: 0;
+            height: auto;
+            width: auto;
+            font-family: inherit;
+            box-shadow: none;
+
+            &:first-child {
+                font-size: 0.75rem;
+                line-height: normal;
+            }
+
+            &:last-child {
+                justify-content: start;
+                align-items: center;
+                font-size: 0.75rem;
+                position: relative;
+
+                &::before {
+                    content: "\e90d";
+                    display: flex;
+                    color: var(--text-color);
+                    font-family: "primeicons";
+                    font-size: .4rem;
+                    opacity: .7;
+                    margin-right: 2px;
+                    height: 13.5px;
+                    align-items: center;
+                    font-weight: 700;
+
+                }
+            }
+        }
+    }
+}
+
+.DocSearch-Container {
+    z-index: 1101;
+}
+
+.DocSearch-Modal {
+    border: 1px solid var(--border-color);
+    box-shadow: none;
+}
+
+.DocSearch-Footer {
+    box-shadow: none;
+    border-top: 1px solid var(--border-color);
+    background-color: var(--overlay-background);
+}
+
+.DocSearch-Form {
+    background: var(--card-background);
+    box-shadow: none;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    transition: border-color .3s;
+
+    &:hover {
+        border-color: var(--primary-color);
+    }
+
+    .DocSearch-MagnifierLabel, .DocSearch-Reset {
+        color: var(--text-color);
+    }
+}
+
+.DocSearch-Hit {
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0;
+    margin-bottom: .25rem;
+}
+
+.DocSearch-Hit-source {
+    color: var(--primary-text-color);
+}
+
+.DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
+    fill: var(--primary-text-color);
+}
+
+.DocSearch-Prefill {
+    color: var(--primary-text-color);
+}
+
+.DocSearch-Button-Placeholder {
+    text-align: center;
+    display: inline-block;
+    font-size: .875rem;
+}
+
+:root {
+    --docsearch-searchbox-focus-background: var(--card-background);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-muted-color: var(--text-color);
+    --docsearch-searchbox-background: var(--card-background);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-modal-background: var(--overlay-background);
+    --docsearch-key-gradient: var(--ground-background);
+    --docsearch-key-shadow: none;
+    --docsearch-container-background: var(--docsearch-mask-background);
+    --docsearch-hit-background: var(--overlay-background);
+    --docsearch-hit-shadow: none;
+    --docsearch-spacing: 1rem;
+    --docsearch-hit-color: var(--text-color);
+    --docsearch-highlight-color: var(--primary-color);
+    --docsearch-hit-active-color: var(--primary-contrast-color);
+    --docsearch-searchbox-shadow: none;
+}

apps/volt/assets/styles/app/_footer.scss

@@ -0,0 +1,26 @@
+.layout-footer {
+    padding: 2rem 4rem;
+    margin-top: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    font-weight: 500;
+    color: var(--text-color);
+    border-top: 1px solid var(--border-color);
+
+    a {
+        color: var(--primary-text-color);
+        font-weight: 700;
+        transition: outline-color .2s, border-color .2s;
+        outline-color: transparent;
+        border-radius: 6px;
+
+        @include focus-visible();
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+    }
+}

apps/volt/assets/styles/app/_glow.scss

@@ -0,0 +1,7 @@
+.landing, .layout-wrapper {
+    background-blend-mode: var(--glow-blend);
+    background-image: var(--glow-image);
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: auto 20rem;
+}

apps/volt/assets/styles/app/_mixins.scss

@@ -0,0 +1,25 @@
+@mixin focus-visible() {
+    &:focus-visible {
+        outline: 1px solid var(--primary-color);
+        outline-offset: var(--p-focus-ring-offset);
+    }
+}
+
+@mixin doc-link() {
+    color: var(--primary-text-color);
+    font-weight: 500;
+    transition: outline-color .2s, border-color .2s;
+    outline-color: transparent;
+    border-radius: 6px;
+    @include focus-visible();
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+@mixin mobile {
+    @media (max-width: 900px) {
+        @content;
+    }
+}

apps/volt/assets/styles/app/_news.scss

@@ -0,0 +1,92 @@
+.layout-news {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1100;
+    width: 100%;
+    height: 2rem;
+    padding: 0 2rem;
+    background-color: var(--primary-color);
+
+    .layout-news-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: calc(100% - var(--p-scrollbar-width, 0px));
+        height: 100%;
+    }
+
+    .layout-news-content {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: 0%;
+    }
+
+    .layout-news-text {
+        line-height: 1.5;
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        min-width: 0%;
+        font-weight: 500;
+        color: var(--primary-contrast-color);
+    }
+
+    .layout-news-link {
+        margin-left: 0.5rem;
+        line-height: 1.5;
+        white-space: nowrap;
+    }
+
+    .layout-news-link,
+    .layout-news-link:visited,
+    .layout-news-link:active {
+        color:var(--primary-contrast-color);
+        font-weight:700;
+    }
+    .layout-news-link:hover {
+        text-decoration: underline;
+    }
+
+    .layout-news-close {
+        color:var(--primary-contrast-color);
+        line-height: 1.5;
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        width: 1.5rem;
+        height: 1.5rem;
+        transition: background-color 0.3s;
+        margin-left: 0.5rem;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    }
+}
+
+.layout-news-active {
+    .layout-topbar {
+        top: 2rem;
+    }
+
+    .layout-sidebar,
+    .doc-section-nav {
+        top: 8rem;
+    }
+
+    .layout-content {
+        padding-top: 8rem;
+    }
+
+    .doc-section-label,
+    .doc-table tbody td .doc-option-name,
+    .doc-table tbody td > i {
+        scroll-margin-top: 8.5rem;
+    }
+}

apps/volt/assets/styles/app/_responsive.scss

@@ -0,0 +1,181 @@
+@media screen and (min-width: 1920px) {
+    .layout-content {
+        max-width: 1728px;
+        margin: 0 auto;
+    }
+
+    .layout-topbar-inner,
+    .layout-footer {
+        max-width: 1728px;
+        margin: 0 auto;
+    }
+
+}
+
+@media screen and (max-width: 1199px) {
+    .layout-topbar-inner {
+        padding-left: 2rem;
+        padding-right: 2rem;
+
+        .menu-button {
+            display: block;
+        }
+
+        .layout-topbar-logo-container {
+            width: auto;
+            margin-right: 0;
+        }
+
+        .DocSearch-Button {
+            width: 2rem;
+            height: 2rem;
+            overflow: hidden;
+            padding: 0;
+            justify-content: center;
+            align-items: center;
+
+            .DocSearch-Search-Icon {
+                width: 1rem;
+                height: 1rem;
+            }
+
+            .DocSearch-Button-Placeholder,
+            .DocSearch-Button-Keys {
+                display: none;
+            }
+        }
+    }
+
+    .layout-sidebar {
+        top: 0;
+        inset-inline-start: 0;
+        position: fixed;
+        z-index: 1102;
+        height: 100%;
+        transform: translateX(-100%);
+        background-color: var(--mobile-menu-background);
+        backdrop-filter: blur(20px);
+        width: 300px;
+        opacity: 0;
+
+        &:dir(rtl) {
+            transform: translateX(100%);
+        }
+
+        nav {
+            padding: 1rem 1rem;
+        }
+
+        &.active {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .layout-news-active {
+        .layout-sidebar {
+            top: 0;
+        }
+    }
+
+    .layout-mask {
+        background-color: rgba(0, 0, 0, 0.1);
+
+        &.layout-mask-active {
+            z-index: 1101;
+            width: 100%;
+            height: 100%;
+            position: fixed;
+            top: 0;
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.4);
+            transition: background-color .5s;
+        }
+    }
+
+    .doc-section-nav {
+        display: none;
+    }
+
+    .video-container {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%;
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .layout-content {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
+    .layout-footer {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
+    .blocked-scroll {
+        overflow: hidden;
+        padding-right: var(--p-scrollbar-width);
+    }
+}
+
+@media (max-width: 768px) {
+    .DocSearch-Container {
+        position: fixed !important;
+    }
+}
+
+@media screen and (max-width: 575px) {
+    .layout-topbar-inner {
+        padding-left: 1rem;
+        padding-right: 1rem;
+
+        .layout-topbar-logo {
+            display: none;
+        }
+
+        .layout-topbar-icon {
+            display: inline-flex;
+        }
+    }
+
+    .layout-content {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .layout-footer {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .doc-tabmenu {
+        li {
+            flex: 1 1 0;
+
+            button {
+                width: 100%;
+                min-width: auto;
+            }
+        }
+    }
+
+    .layout-news {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        font-size: 12px;
+
+        > i {
+            display: none;
+        }
+    }
+}

apps/volt/assets/styles/app/_sidebar.scss

@@ -0,0 +1,181 @@
+.layout-sidebar {
+    position: sticky;
+    inset-inline-start: 0;
+    top: 6rem;
+    height: calc(100vh - 9rem);
+    user-select: none;
+    transition: transform .4s cubic-bezier(.05,.74,.2,.99), opacity .3s;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    flex: 0 0 250px;
+    margin-inline-end: 4rem;
+    overflow: auto;
+
+    .logo {
+        display: flex;
+        justify-content: center;
+    }
+
+    nav {
+        padding-block: 0;
+        padding-inline: 1rem 0;
+        margin: 0;
+        flex-grow: 1;
+    }
+
+    .layout-menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        > li {
+            margin-bottom: .25rem;
+
+            > button,
+            > a {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                padding-block: .5rem;
+                padding-inline: 1px;
+                color: var(--text-color);
+                font-weight: 600;
+                transition: outline-color 0.2s;
+                outline-color: transparent;
+                position: relative;
+                background: transparent;
+                font-size: 1rem;
+                border: 0 none;
+                margin: 0;
+                text-align: start;
+                cursor: pointer;
+                user-select: none;
+                --p-focus-ring-offset: -1px;
+                @include focus-visible();
+
+                .menu-icon {
+                    width: 2rem;
+                    height: 2rem;
+                    border-radius: 6px;
+                    margin-inline-end: .5rem;
+                    border: 1px solid var(--border-color);
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: all .2s;
+                    position: relative;
+                    background-color: transparent;
+
+                    i {
+                        color: var(--text-color);
+                        transition: all .2s;
+                    }
+                }
+
+                .menu-toggle-icon {
+                    color: var(--text-secondary-color);
+                    margin-inline-start: auto;
+                }
+
+                &:hover {
+                    .menu-icon {
+                        background-color: var(--card-background);
+
+                        i {
+                            color: var(--primary-text-color);
+                        }
+                    }
+
+                    .menu-toggle-icon {
+                        color: var(--text-color);
+                    }
+                }
+
+                &.router-link-active {
+                    color: var(--primary-text-color);
+
+                    > .menu-icon {
+                        i {
+                            color: var(--primary-text-color);
+                        }
+                    }
+                }
+            }
+
+            > div {
+                overflow: hidden;
+
+                ol {
+                    margin-block: 0;
+                    margin-inline: 0 1rem;
+                    padding: .25rem 0;
+                    list-style: none;
+
+                    li {
+                        a {
+                            border-inline-start: 1px solid var(--border-color);
+                            transition: all .2s;
+                            font-weight: 450;
+                            display: flex;
+                            align-items: center;
+                            padding: .5rem;
+                            padding-inline-start: 1rem;
+                            color: var(--text-secondary-color);
+                            transition: outline-color 0.2s, border-color .2s;
+                            outline-color: transparent;
+                            position: relative;
+                            --p-focus-ring-offset: -1px;
+                            @include focus-visible();
+
+                            &:hover {
+                                border-inline-start-color: var(--hover-border-color);
+                            }
+
+                            &.router-link-active {
+                                color: var(--primary-text-color);
+                                border-inline-start-color: var(--primary-text-color);
+                            }
+                        }
+
+                        ol {
+                            margin: 0;
+                            padding: 0;
+                        }
+
+                        &:has(.menu-child-category) {
+                            margin-top: 1rem;
+                        }
+
+                        &:has(.menu-child-category):first-child {
+                            margin-top: 0rem;
+                        }
+                    }
+                }
+            }
+        }
+
+        .p-tag {
+            position: absolute;
+            inset-inline-end: 0;
+            top: 50%;
+            transform: translateY(-50%);
+
+            .p-tag-label {
+                line-height: 1;
+                font-size: 0.75rem;
+            }
+        }
+
+        .menu-child-category {
+            display: flex;
+            padding: .5rem;
+            padding-inline-start: 0;
+            font-size: .875rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+            color: var(--text-secondary-color);
+            margin-bottom: .25rem;
+        }
+    }
+}

apps/volt/assets/styles/app/_topbar.scss

@@ -0,0 +1,221 @@
+.layout-topbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: calc(100% - var(--p-scrollbar-width, 0px));
+    z-index: 1100;
+    transition: background-color .5s, border-color .5s;
+    border-bottom: 1px solid transparent;
+
+    &.layout-topbar-sticky {
+        border-bottom: 1px solid var(--border-color);
+        background-color: var(--topbar-sticky-background);
+        backdrop-filter: blur(8px);
+    }
+}
+
+.layout-topbar-inner {
+    height: 4rem;
+    padding: 0 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .layout-topbar-logo-container {
+        width: 250px;
+        margin-inline-end: 4rem;
+    }
+
+    .layout-topbar-logo,
+    .layout-topbar-icon {
+        transition: outline-color .2s;
+        outline-color: transparent;
+        @include focus-visible();
+
+        svg {
+            width: 120px;
+        }
+    }
+
+    .layout-topbar-logo {
+        display: inline-flex;
+
+        svg {
+            width: 120px;
+        }
+    }
+
+    .layout-topbar-icon {
+        display: none;
+
+        svg {
+            width: 25px;
+        }
+    }
+
+    .menu-button {
+        display: none;
+    }
+
+    .topbar-items {
+        display: flex;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        gap: 0.5rem;
+        align-items: center;
+
+        li {
+            position: relative;
+        }
+
+        .topbar-item {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            border: 1px solid var(--border-color);
+            width: 2rem;
+            height: 2rem;
+            transition: outline-color .2s, border-color .2s;
+            border-radius: 6px;
+            margin: 0;
+            padding: 0;
+            outline-color: transparent;
+            background-color: var(--card-background);
+            cursor: pointer;
+
+            @include focus-visible();
+
+            &:hover {
+                border-color: var(--primary-color);
+            }
+
+            i, span {
+                color: var(--text-color);
+            }
+        }
+
+        .config-item {
+            background-color: var(--primary-color);
+
+            i {
+                color: var(--primary-contrast-color);
+            }
+        }
+
+        .config-panel {
+            position: absolute;
+            top: calc(100% + 2px);
+            inset-inline-end: 0;
+            width: 18rem;
+            padding: .75rem;
+            background-color: var(--overlay-background);
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
+            transform-origin: top;
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+
+            .config-panel-content {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .config-panel-label {
+                font-size: .875rem;
+                color: var(--text-secondary-color);
+                font-weight: 600;
+                line-height: 1;
+            }
+
+            .config-panel-colors {
+                > div {
+                    padding-top: .5rem;
+                    display: flex;
+                    gap: .5rem;
+                    flex-wrap: wrap;
+
+                    button {
+                        border: none;
+                        width: 1.25rem;
+                        height: 1.25rem;
+                        border-radius: 50%;
+                        padding: 0;
+                        cursor: pointer;
+                        outline-color: transparent;
+                        outline-width: 2px;
+                        outline-style: solid;
+                        outline-offset: 1px;
+
+                        &.active-color {
+                            outline-color: var(--primary-color);
+                        }
+                    }
+                }
+            }
+
+            .config-panel-settings {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+        }
+
+        .version-item {
+            width: auto;
+            padding: 0.5rem;
+
+            .version-text {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .version-icon {
+                margin-inline-start: .25rem;
+                color: var(--text-secondary-color);
+            }
+        }
+
+        .versions-panel {
+            padding: .25rem;
+            background-color: var(--overlay-background);
+            position: absolute;
+            right: 0;
+            top: calc(100% + 2px);
+            border-radius: 6px;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            transform-origin: top;
+
+            ul {
+                padding: 0;
+                margin: 0;
+                list-style-type: none;
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                li {
+                    margin: 2px;
+
+                }
+
+                a {
+                    display: inline-flex;
+                    padding: 0.5rem .75rem;
+                    border-radius: 6px;
+                    width: 100%;
+                    overflow: hidden;
+                    color: var(--text-color);
+                    white-space: nowrap;
+
+                    &:hover {
+                        background-color: var(--hover-background);
+                    }
+                }
+            }
+        }
+    }
+}

apps/volt/assets/styles/app/app.scss

@@ -0,0 +1,16 @@
+@charset 'UTF-8';
+
+@import './variables/_variables';
+@import './_mixins';
+@import './_core';
+@import './_glow';
+@import './_topbar';
+@import './_sidebar';
+@import './_content';
+@import './_news';
+@import './_footer';
+@import './_code';
+@import './_doc';
+@import './_docsearch';
+@import './_responsive';
+@import './landing/_landing';

apps/volt/assets/styles/app/landing/_hero.scss

@@ -0,0 +1,22 @@
+.landing-hero {
+    .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+        background: transparent;
+    }
+
+    .box {
+        box-shadow: var(--home-card-shadow);
+    }
+
+    .p-datepicker, .p-datepicker-header {
+        background: transparent;
+        border-color: transparent;
+    }
+}
+
+@media screen and (min-width: 1660px) {
+    .landing-hero {
+        width: 1504px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+}

apps/volt/assets/styles/app/landing/_landing.scss

@@ -0,0 +1,7 @@
+$landingBreakpointMD: 767px;
+$landingBreakpointLG: 991px;
+$landingBreakpointXL: 1199px;
+
+@import '../_mixins';
+@import './_main';
+@import './_hero';

apps/volt/assets/styles/app/landing/_main.scss

@@ -0,0 +1,180 @@
+.landing {
+    scroll-behavior: smooth;
+    padding-top: 4rem;
+    background-color: var(--ground-background);
+
+    .box {
+        border: 1px solid var(--border-color);
+        border-radius: 10px;
+        background-color: var(--card-background);
+        position: relative;
+        z-index: 0;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border: 2px solid var(--home-box-ring-color);
+            transition: all .5s;
+            animation: clippath 3s infinite linear;
+            border-radius: 10px;
+            opacity: 0;
+            z-index: -1;
+        }
+
+        &::after {
+            animation: clippath 3s infinite -1.5s linear;
+        }
+
+        &:hover {
+            &::before,
+            &::after {
+                opacity: 1;
+            }
+        }
+    }
+
+    .linkbox {
+        transition: background-color .2s, border-color .2s, outline-color .2s;
+        display: inline-flex;
+        align-items: center;
+        color: var(--text-color);
+        border: 1px solid var(--border-color);
+        background-color: var(--card-background);
+        border-radius: 10px;
+        font-weight: 600;
+        padding: 1rem 1.5rem;
+        cursor: pointer;
+        @include focus-visible();
+
+        &:hover {
+            background: var(--hover-background);
+        }
+
+        &.linkbox-primary {
+            background: var(--primary-color);
+            color: var(--primary-contrast-color);
+
+            &:hover {
+                background: var(--primary-hover-color);
+            }
+        }
+
+        &.linkbox-icon {
+            width: 3rem;
+            height: 3rem;
+            justify-content: center;
+        }
+    }
+
+    .section-header {
+        font-size: 2rem;
+        color: var(--text-color);
+        font-weight: 700;
+        text-align: center;
+        padding: 0 2rem;
+    }
+
+    .section-detail {
+        text-align: center;
+        color: var(--text-secondary-color);
+        font-weight: 500;
+        font-size: 1.25rem;
+        margin: 1.5rem 0 0 0;
+        padding: 0 2rem;
+    }
+
+    .section-divider {
+        border: 1px solid var(--border-color);
+        height: 1px;
+        border-bottom: 0 none;
+        overflow: hidden;
+        margin-top: 5rem;
+    }
+
+    &.layout-news-active {
+        padding-top: 6rem;
+    }
+}
+
+
+.landing-footer-container {
+    max-width: 1250px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.animated-text {
+    position: relative;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--rounded-base);
+    display: inline-block;
+    width: 14.45rem;
+
+    &::before {
+        border-radius: var(--rounded-base);
+        animation: color-animation 2s linear infinite;
+        background-size: auto auto;
+        background-clip: border-box;
+        background-size: 200% auto;
+        content: "";
+        width: 14.45rem;
+        height: 1.5rem;
+        position: absolute;
+        z-index: 0;
+        background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
+        filter: blur(24px);
+        opacity: 0.6;
+    }
+
+    > span {
+        position: relative;
+        z-index: 3;
+        background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
+        animation: color-animation 2s linear infinite;
+        background-size: auto auto;
+        background-clip: border-box;
+        background-size: 200% auto;
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
+
+@keyframes color-animation {
+    40%,
+    100% {
+        background-position: -200% center;
+    }
+}
+
+@keyframes scroll {
+    0% {
+        transform: translateX(0%);
+    }
+
+    100% {
+        transform: translateX(calc(-100% - 3rem));
+    }
+}
+
+@keyframes clippath {
+    0%,
+    100% {
+        clip-path: inset(0 0 98% 0);
+    }
+
+    25% {
+        clip-path: inset(0 98% 0 0);
+    }
+    50% {
+        clip-path: inset(98% 0 0 0);
+    }
+    75% {
+        clip-path: inset(0 0 0 98%);
+    }
+}

apps/volt/assets/styles/app/variables/_variables.scss

@@ -0,0 +1,5 @@
+@import './app/_light';
+@import './app/_dark';
+@import './primevue/_common';
+@import './primevue/_light';
+@import './primevue/_dark';

apps/volt/assets/styles/app/variables/app/_dark.scss

@@ -0,0 +1,28 @@
+:root.p-dark {
+    --primary-text-color: var(--p-primary-400);
+    --primary-color: var(--p-primary-color);
+    --primary-contrast-color:var(--p-primary-contrast-color);
+    --primary-hover-color: var(--p-primary-hover-color);
+    --text-color: var(--p-surface-0);
+    --text-secondary-color: var(--p-surface-400);
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
+    --glow-blend: hard-light, color-dodge;
+    --topbar-sticky-background:rgba(0,0,0,.3);
+    --mobile-menu-background: rgba(0,0,0,.3);
+    --card-border: 1px solid transparent;
+    --card-background: var(--p-surface-900);
+    --border-color: var(--p-surface-700);
+    --ground-background: var(--p-surface-950);
+    --overlay-background: var(--p-surface-900);
+    --hover-background: var(--p-surface-800);
+    --code-background: var(--p-surface-900);
+    --high-contrast-text-color: var(--p-surface-0);
+    --hover-border-color: var(--p-surface-500);
+    --mark-background: var(--p-surface-700);
+    --mark-text-color: var(--p-surface-200);
+    --selection-background: var(--p-surface-700);
+    --selection-text-color: var(--p-surface-0);
+    --code-button-text-color: var(--p-surface-300);
+    --docsearch-mask-background: var(--p-mask-background);
+    --logo-color: var(--p-primary-400);
+}

apps/volt/assets/styles/app/variables/app/_light.scss

@@ -0,0 +1,28 @@
+:root {
+    --primary-text-color:var(--p-primary-600);
+    --primary-color: var(--p-primary-color);
+    --primary-contrast-color:var(--p-primary-contrast-color);
+    --primary-hover-color: var(--p-primary-hover-color);
+    --text-color: var(--p-surface-700);
+    --text-secondary-color: var(--p-surface-500);
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
+    --glow-blend: hard-light, multiply;
+    --topbar-sticky-background:rgba(255,255,255,.7);
+    --mobile-menu-background: #ffffff;
+    --card-border: 1px solid var(--p-surface-200);
+    --card-background: #ffffff;
+    --border-color: var(--p-surface-200);
+    --ground-background: var(--p-surface-50);
+    --overlay-background: #ffffff;
+    --hover-background: var(--p-surface-100);
+    --code-background: var(--p-surface-950);
+    --high-contrast-text-color: var(--p-surface-900);
+    --hover-border-color: var(--p-surface-400);
+    --mark-background: var(--p-surface-200);
+    --mark-text-color: var(--p-surface-700);
+    --selection-background: var(--p-surface-200);
+    --selection-text-color: var(--p-surface-950);
+    --code-button-text-color: var(--p-surface-300);
+    --docsearch-mask-background: var(--p-mask-background);
+    --logo-color: var(--p-primary-500);
+}

apps/volt/assets/styles/app/variables/primevue/_common.scss

@@ -0,0 +1,26 @@
+:root {
+    --p-primary-50: #ecfdf5;
+    --p-primary-100: #d1fae5;
+    --p-primary-200: #a7f3d0;
+    --p-primary-300: #6ee7b7;
+    --p-primary-400: #34d399;
+    --p-primary-500: #10b981;
+    --p-primary-600: #059669;
+    --p-primary-700: #047857;
+    --p-primary-800: #065f46;
+    --p-primary-900: #064e3b;
+    --p-primary-950: #022c22;
+    --p-surface-0: #ffffff;
+    --p-surface-50: #fafafa;
+    --p-surface-100: #f4f4f5;
+    --p-surface-200: #e4e4e7;
+    --p-surface-300: #d4d4d8;
+    --p-surface-400: #a1a1aa;
+    --p-surface-500: #71717a;
+    --p-surface-600: #52525b;
+    --p-surface-700: #3f3f46;
+    --p-surface-800: #27272a;
+    --p-surface-900: #18181b;
+    --p-surface-950: #09090b;
+    --p-content-border-radius: 6px;
+}

apps/volt/assets/styles/app/variables/primevue/_dark.scss

@@ -0,0 +1,28 @@
+:root.p-dark {
+    --p-primary-color: var(--p-primary-400);
+    --p-primary-contrast-color: var(--p-surface-900);
+    --p-primary-hover-color: var(--p-primary-300);
+    --p-primary-active-color: var(--p-primary-200);
+    --p-content-border-color: var(--p-surface-700);
+    --p-content-hover-background: var(--p-surface-800);
+    --p-content-hover-color: var(--p-surface-0);
+    --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+    --p-highlight-color: rgba(255,255,255,.87);
+    --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+    --p-highlight-focus-color: rgba(255,255,255,.87);
+    --p-text-color: var(--p-surface-0);
+    --p-text-hover-color: var(--p-surface-0);
+    --p-text-muted-color: var(--p-surface-400);
+    --p-text-hover-muted-color: var(--p-surface-300);
+}
+
+:root.p-dark.p-noir {
+    --p-primary-color: var(--p-primary-50);
+    --p-primary-contrast-color: var(--p-surface-950);
+    --p-primary-hover-color: var(--p-primary-200);
+    --p-primary-active-color: var(--p-primary-300);
+    --p-highlight-background: var(--p-surface-50);
+    --p-highlight-color: var(--p-surface-950);
+    --p-highlight-focus-background: var(--p-surface-300);
+    --p-highlight-focus-color: var(--p-surface-950);
+}

apps/volt/assets/styles/app/variables/primevue/_light.scss

@@ -0,0 +1,28 @@
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+:root.p-noir {
+    --p-primary-color: var(--p-primary-950);
+    --p-primary-contrast-color: #ffffff;
+    --p-primary-hover-color: var(--p-primary-800);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-highlight-background: var(--p-surface-950);
+    --p-highlight-color: #ffffff;
+    --p-highlight-focus-background: var(--p-surface-700);
+    --p-highlight-focus-color: #ffffff;
+}

apps/volt/assets/styles/tailwind.css

@@ -0,0 +1,41 @@
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+@custom-variant dark (&:where(.p-dark, .p-dark *));
+
+@theme {
+    --breakpoint-sm: '576px';
+    --breakpoint-md: '768px';
+    --breakpoint-lg: '992px';
+    --breakpoint-xl: '1200px';
+    --breakpoint-2xl: '1920px';
+}
+
+@custom-variant p-invalid (&[data-p~="invalid"]);
+@custom-variant p-small (&[data-p~="small"]);
+@custom-variant p-large (&[data-p~="large"]);
+@custom-variant p-xlarge (&[data-p~="xlarge"]);
+@custom-variant p-fluid (&[data-p~="fluid"]);
+@custom-variant p-filled (&[data-p~="filled"]);
+@custom-variant p-horizontal (&[data-p~="horizontal"]);
+@custom-variant p-vertical (&[data-p~="vertical"]);
+@custom-variant p-stacked (&[data-p~="stacked"]);
+@custom-variant p-checked (&[data-p~="checked"]);
+@custom-variant p-disabled (&[data-p~="disabled"]);
+@custom-variant p-enabled (&:not([data-p~="disabled"]));
+@custom-variant p-left (&[data-p~="left"]);
+@custom-variant p-right (&[data-p~="right"]);
+@custom-variant p-top (&[data-p~="top"]);
+@custom-variant p-bottom (&[data-p~="bottom"]);
+@custom-variant p-alternate (&[data-p~="alternate"]);
+@custom-variant p-active (&[data-p~="active"]);
+@custom-variant p-focus-visible (&[data-p~="focus-visible"]);
+@custom-variant p-readonly (&[data-p~="readonly"]);
+@custom-variant p-removable (&[data-p~="removable"]);
+@custom-variant p-circle (&[data-p~="circle"]);
+@custom-variant p-determinate (&[data-p~="determinate"]);
+@custom-variant p-indeterminate (&[data-p~="indeterminate"]);
+@custom-variant p-icon-only (&[data-p~="icon-only"]);
+@custom-variant p-rounded (&[data-p~="rounded"]);
+@custom-variant p-raised (&[data-p~="raised"]);
+@custom-variant p-outlined (&[data-p~="outlined"]);
+@custom-variant p-text (&[data-p~="text"]);

apps/volt/components/app/AppConfigurator.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class="config-panel hidden">
+        <div class="config-panel-content">
+            <div class="config-panel-colors">
+                <span class="config-panel-label">Primary</span>
+                <div>
+                    <button
+                        v-for="primaryColor of primaryColors"
+                        :key="primaryColor.name"
+                        type="button"
+                        @click="updateColors('primary', primaryColor)"
+                        :class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
+                        :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette[500]}` }"
+                    ></button>
+                </div>
+            </div>
+            <div class="config-panel-colors">
+                <span class="config-panel-label">Surface</span>
+                <div>
+                    <button
+                        v-for="surface of surfaces"
+                        :key="surface.name"
+                        type="button"
+                        @click="updateColors('surface', surface)"
+                        :class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : $appState.darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                        :style="{ backgroundColor: `${surface.palette[500]}` }"
+                    ></button>
+                </div>
+            </div>
+            <div class="flex">
+                <div class="flex-1">
+                    <div class="config-panel-settings">
+                        <span class="config-panel-label">Ripple</span>
+                        <ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
+                    </div>
+                </div>
+                <div class="flex-1">
+                    <div class="config-panel-settings items-end">
+                        <span class="config-panel-label">RTL</span>
+                        <ToggleSwitch v-model="isRTL" @update:modelValue="onRTLChange" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import EventBus from '@/layouts/AppEventBus';
+
+export default {
+    data() {
+        return {
+            primaryColors: [
+                { name: 'noir', palette: {} },
+                { name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
+                { name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } },
+                { name: 'lime', palette: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' } },
+                { name: 'orange', palette: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' } },
+                { name: 'amber', palette: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' } },
+                { name: 'yellow', palette: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' } },
+                { name: 'teal', palette: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' } },
+                { name: 'cyan', palette: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' } },
+                { name: 'sky', palette: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' } },
+                { name: 'blue', palette: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' } },
+                { name: 'indigo', palette: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' } },
+                { name: 'violet', palette: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' } },
+                { name: 'purple', palette: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' } },
+                { name: 'fuchsia', palette: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' } },
+                { name: 'pink', palette: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' } },
+                { name: 'rose', palette: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' } }
+            ],
+            surfaces: [
+                {
+                    name: 'slate',
+                    palette: { 0: '#ffffff', 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' }
+                },
+                {
+                    name: 'gray',
+                    palette: { 0: '#ffffff', 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' }
+                },
+                {
+                    name: 'zinc',
+                    palette: { 0: '#ffffff', 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' }
+                },
+                {
+                    name: 'neutral',
+                    palette: { 0: '#ffffff', 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' }
+                },
+                {
+                    name: 'stone',
+                    palette: { 0: '#ffffff', 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
+                },
+                {
+                    name: 'soho',
+                    palette: { 0: '#ffffff', 50: '#f4f4f4', 100: '#e8e9e9', 200: '#d2d2d4', 300: '#bbbcbe', 400: '#a5a5a9', 500: '#8e8f93', 600: '#77787d', 700: '#616268', 800: '#4a4b52', 900: '#34343d', 950: '#1d1e27' }
+                },
+                {
+                    name: 'viva',
+                    palette: { 0: '#ffffff', 50: '#f3f3f3', 100: '#e7e7e8', 200: '#cfd0d0', 300: '#b7b8b9', 400: '#9fa1a1', 500: '#87898a', 600: '#6e7173', 700: '#565a5b', 800: '#3e4244', 900: '#262b2c', 950: '#0e1315' }
+                },
+                {
+                    name: 'ocean',
+                    palette: { 0: '#ffffff', 50: '#fbfcfc', 100: '#F7F9F8', 200: '#EFF3F2', 300: '#DADEDD', 400: '#B1B7B6', 500: '#828787', 600: '#5F7274', 700: '#415B61', 800: '#29444E', 900: '#183240', 950: '#0c1920' }
+                }
+            ],
+            isRTL: false
+        };
+    },
+    methods: {
+        updateColors(type, color) {
+            if (type === 'primary') {
+                this.$appState.primary = color.name;
+
+                if (color.name === 'noir') {
+                    document.documentElement.classList.add('p-noir');
+                    document.documentElement.style.setProperty('--logo-color', 'var(--text-secondary-color)');
+
+                    this.applyTheme(
+                        type,
+                        this.surfaces.find((s) => s.name === this.$appState.surface)
+                    );
+                } else {
+                    document.documentElement.classList.remove('p-noir');
+                    document.documentElement.style.setProperty('--logo-color', 'var(--primary-color)');
+
+                    this.applyTheme(type, color);
+                }
+            } else if (type === 'surface') {
+                this.$appState.surface = color.name;
+                this.applyTheme(type, color);
+            }
+
+            EventBus.emit('theme-palette-change');
+        },
+        applyTheme(type, color) {
+            Object.keys(color.palette).forEach((key) => {
+                document.documentElement.style.setProperty(`--p-${type}-${key}`, color.palette[key]);
+            });
+        },
+        onRippleChange(value) {
+            this.$primevue.config.ripple = value;
+        },
+        onRTLChange(value) {
+            if (!document.startViewTransition) {
+                this.toggleRTL();
+
+                return;
+            }
+
+            document.startViewTransition(() => this.toggleRTL(value));
+        },
+        toggleRTL(value) {
+            const htmlElement = document.documentElement;
+
+            if (value) {
+                htmlElement.setAttribute('dir', 'rtl');
+            } else {
+                htmlElement.removeAttribute('dir');
+            }
+        }
+    },
+    computed: {
+        rippleActive() {
+            return this.$primevue.config.ripple;
+        },
+        selectedPrimaryColor() {
+            return this.$appState.primary;
+        },
+        selectedSurfaceColor() {
+            return this.$appState.surface;
+        }
+    }
+};
+</script>

apps/volt/components/app/AppFooter.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="layout-footer">
+        <div>
+            <span>PrimeVue {{ version }} by </span>
+            <a href="https://www.primetek.com.tr" target="_blank" rel="noopener noreferrer">PrimeTek</a>
+        </div>
+    </div>
+</template>
+
+<script>
+import pkg from '@/package.json';
+
+export default {
+    data() {
+        return {
+            version: pkg.version
+        };
+    }
+};
+</script>

apps/volt/components/app/AppMenu.vue

@@ -0,0 +1,27 @@
+<template>
+    <aside class="layout-sidebar" :class="{ active: active }">
+        <nav>
+            <ol class="layout-menu">
+                <AppMenuItem :menu="menu"></AppMenuItem>
+            </ol>
+        </nav>
+    </aside>
+</template>
+
+<script>
+import menudata from '@/assets/data/menu.json';
+
+export default {
+    props: {
+        active: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            menu: menudata.data
+        };
+    }
+};
+</script>

apps/volt/components/app/AppMenuItem.vue

@@ -0,0 +1,57 @@
+<template>
+    <li v-for="(menuitem, index) in menu" :key="`_root${index}`">
+        <button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown', leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }" type="button">
+            <span class="menu-icon">
+                <i :class="menuitem.icon"></i>
+            </span>
+            <span>{{ menuitem.name }}</span>
+            <i class="menu-toggle-icon pi pi-angle-down"></i>
+        </button>
+
+        <a v-if="menuitem.href" :href="menuitem.href" target="_blank" rel="noopener noreferrer">
+            <span v-if="menuitem.icon && root" class="menu-icon">
+                <i :class="menuitem.icon"></i>
+            </span>
+            <span>{{ menuitem.name }}</span>
+            <Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
+        </a>
+
+        <PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }">
+            <span v-if="menuitem.icon && root" class="menu-icon">
+                <i :class="menuitem.icon"></i>
+            </span>
+            <span>{{ menuitem.name }}</span>
+            <Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
+        </PrimeVueNuxtLink>
+
+        <span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span>
+        <div v-if="menuitem.children" :class="{ hidden: menuitem.children && root && isActiveRootmenuItem(menuitem) }">
+            <ol>
+                <AppMenuItem :root="false" :menu="menuitem.children"></AppMenuItem>
+            </ol>
+        </div>
+    </li>
+</template>
+
+<script>
+export default {
+    props: {
+        root: {
+            type: Boolean,
+            default: true
+        },
+        menu: {
+            type: Object,
+            default: null
+        }
+    },
+    methods: {
+        isActiveRootmenuItem(menuitem) {
+            return (
+                menuitem.children &&
+                !menuitem.children.some((item) => item.to === `/${this.$router.currentRoute.value?.name?.replaceAll('-', '/')}` || (item.children && item.children.some((it) => it.to === `/${this.$router.currentRoute.value.name}`)))
+            );
+        }
+    }
+};
+</script>

apps/volt/components/app/AppNews.vue

@@ -0,0 +1,48 @@
+<template>
+    <div v-if="$appState.newsActive" class="layout-news">
+        <div class="layout-news-container">
+            <i></i>
+            <div class="layout-news-content">
+                <span class="layout-news-text">{{ $appState.announcement.content }}</span>
+                <a v-if="$appState.announcement.linkHref" class="layout-news-link" :href="$appState.announcement.linkHref">{{ $appState.announcement.linkText }}</a>
+            </div>
+            <a class="layout-news-close" @click="onClose">
+                <span class="pi pi-times"></span>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+import News from '@/assets/data/news.json';
+
+export default {
+    mounted() {
+        const itemString = localStorage.getItem(this.$appState.storageKey);
+
+        if (itemString) {
+            const item = JSON.parse(itemString);
+
+            if (!item.hiddenNews || item.hiddenNews !== News.id) {
+                this.$appState.newsActive = true;
+                this.$appState.announcement = News;
+            } else {
+                this.$appState.newsActive = false;
+            }
+        } else {
+            this.$appState.announcement = News;
+            this.$appState.newsActive = true;
+        }
+    },
+    methods: {
+        onClose() {
+            this.$appState.newsActive = false;
+            const item = {
+                hiddenNews: this.$appState.announcement.id
+            };
+
+            localStorage.setItem(this.$appState.storageKey, JSON.stringify(item));
+        }
+    }
+};
+</script>

apps/volt/components/app/AppTopBar.vue

@@ -0,0 +1,178 @@
+<template>
+    <div :ref="containerRef" class="layout-topbar">
+        <div class="layout-topbar-inner">
+            <div class="layout-topbar-logo-container">
+                <PrimeVueNuxtLink to="/" class="layout-topbar-logo" aria-label="PrimeVue logo">
+                    <svg width="165" height="40" viewBox="0 0 165 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M128.062 32C128.438 32 128.656 31.8125 128.75 31.4375L134.031 7.6875C134.125 7.25 133.938 7 133.469 7H130.5C130.125 7 129.906 7.1875 129.812 7.5625L126.5 24.3125L123.219 7.5625C123.125 7.1875 122.906 7 122.531 7H119.562C119.094 7 118.906 7.25 119 7.6875L124.25 31.4375C124.344 31.8125 124.562 32 124.938 32H128.062ZM144.562 32C147.5 32 149.062 30.4375 149.062 27.5V7.625C149.062 7.28125 148.781 7 148.438 7H145.562C145.219 7 144.938 7.28125 144.938 7.625V26.625C144.938 27.4688 144.5 27.875 143.688 27.875H142.062C141.25 27.875 140.812 27.4688 140.812 26.625V7.625C140.812 7.28125 140.531 7 140.188 7H137.188C136.844 7 136.562 7.28125 136.562 7.625V27.5C136.562 30.4375 138.125 32 141.062 32H144.562ZM164.656 31.5C164.656 31.8125 164.531 32 164.156 32H152.656C152.375 32 152.188 31.8125 152.188 31.5V7.5C152.188 7.1875 152.375 7 152.656 7H164.156C164.531 7 164.656 7.1875 164.656 7.5V10.625C164.656 10.9375 164.531 11.1562 164.156 11.1562H156.344V17.4062H162.312C162.625 17.4062 162.812 17.5938 162.812 17.9375V21.0312C162.812 21.375 162.625 21.5625 162.312 21.5625H156.344V27.875H164.156C164.531 27.875 164.656 28.0312 164.656 28.375V31.5Z"
+                            fill="var(--logo-color)"
+                        />
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M48.0938 32C48.4375 32 48.5938 31.8125 48.5938 31.5V23.625H52.3438C55.2812 23.625 56.8438 22.0312 56.8438 19.125V11.5C56.8438 8.5625 55.2812 7 52.3438 7H44.8438C44.5312 7 44.3438 7.1875 44.3438 7.5V31.5C44.3438 31.8125 44.5312 32 44.8438 32H48.0938ZM51.3438 19.5H48.5938V11.125H51.3438C52.1875 11.125 52.5938 11.5625 52.5938 12.375V18.25C52.5938 19.0312 52.1875 19.5 51.3438 19.5ZM63.9062 31.5C63.9062 31.8125 63.7188 32 63.4062 32H60.1562C59.8438 32 59.6562 31.8125 59.6562 31.5V7.5C59.6562 7.1875 59.8438 7 60.1562 7H68C70.9375 7 72.5 8.5625 72.5 11.5V19.125C72.5 21.2188 71.7188 22.5938 70.2188 23.25L72.375 31.4375C72.4688 31.8125 72.2812 32 71.9375 32H68.6875C68.375 32 68.2188 31.8438 68.1562 31.5625L66.0625 23.625H63.9062V31.5ZM67 19.5H63.9062V11.125H67C67.8125 11.125 68.25 11.5625 68.25 12.375V18.25C68.25 19.0625 67.8125 19.5 67 19.5ZM79.875 31.5C79.875 31.8125 79.6875 32 79.375 32H76.125C75.7812 32 75.625 31.8125 75.625 31.5V7.5C75.625 7.1875 75.7812 7 76.125 7H79.375C79.6875 7 79.875 7.1875 79.875 7.5V31.5ZM86.5 32C86.9062 32 87.125 31.7812 87.125 31.375V17.3125H87.3438L90.4375 31.4375C90.5312 31.8125 90.75 32 91.125 32H92.6562C93.0312 32 93.25 31.8125 93.3438 31.4375L96.4375 17.3125H96.6562V31.375C96.6562 31.7812 96.875 32 97.2812 32H100.188C100.594 32 100.812 31.7812 100.812 31.375V7.625C100.812 7.21875 100.594 7 100.188 7H96.0625C95.6875 7 95.4688 7.1875 95.375 7.5625L91.9062 23.125L88.4375 7.5625C88.3438 7.1875 88.125 7 87.75 7H83.625C83.2188 7 83 7.21875 83 7.625V31.375C83 31.7812 83.2188 32 83.625 32H86.5ZM116.406 31.5C116.406 31.8125 116.281 32 115.906 32H104.406C104.125 32 103.938 31.8125 103.938 31.5V7.5C103.938 7.1875 104.125 7 104.406 7H115.906C116.281 7 116.406 7.1875 116.406 7.5V10.625C116.406 10.9375 116.281 11.1562 115.906 11.1562H108.094V17.4062H114.062C114.375 17.4062 114.562 17.5938 114.562 17.9375V21.0312C114.562 21.375 114.375 21.5625 114.062 21.5625H108.094V27.875H115.906C116.281 27.875 116.406 28.0312 116.406 28.375V31.5Z"
+                            fill="var(--high-contrast-text-color)"
+                        />
+                        <path d="M25.5739 18.0458L22.8661 17.4443L24.9722 20.4519V29.7756L32.193 23.7603V13.5344L28.8835 14.7374L25.5739 18.0458Z" fill="var(--logo-color)" />
+                        <path d="M8.72522 18.0458L11.433 17.4443L9.32696 20.4519V29.7756L2.10609 23.7603V13.5344L5.41565 14.7374L8.72522 18.0458Z" fill="var(--logo-color)" />
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M10.2296 21.0534L12.6365 17.4443L14.1409 18.3466H20.1582L21.6626 17.4443L24.0696 21.0534V34.5878L22.2643 37.2947L20.1582 39.4H14.1409L12.0348 37.2947L10.2296 34.5878V21.0534Z"
+                            fill="var(--logo-color)"
+                        />
+                        <path d="M24.9722 35.4901L28.8835 31.5802V27.6702L24.9722 30.9786V35.4901Z" fill="var(--logo-color)" />
+                        <path d="M9.32697 35.4901L5.41566 31.5802V27.6702L9.32697 30.9786V35.4901Z" fill="var(--logo-color)" />
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M21.0609 0H20.1583V5.7988L21.8141 1.78842L21.0609 0ZM19.5762 7.20849L18.9548 7.51908V0H17.7513V11.6281L19.5762 7.20849ZM17.7513 14.2483L22.3605 3.08549L23.4678 5.7145L19.8574 17.1435H17.7513V14.2483ZM16.5478 11.6718V0H15.3443V7.51908L14.8434 7.26869L16.5478 11.6718ZM14.1409 5.45385V0H13.2383L12.6085 1.49519L14.1409 5.45385ZM12.0497 2.82181L16.5478 14.4419V17.1435H14.7426L10.8313 5.7145L12.0497 2.82181Z"
+                            fill="var(--high-contrast-text-color)"
+                        />
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M1.80522 12.3313L14.7426 17.1435H15.0435L11.1322 5.71452L0 4.81223L1.80522 12.3313ZM32.7948 12.3313L19.8574 17.1435H19.5565L23.167 5.71452L34.6 4.81223L32.7948 12.3313Z"
+                            fill="var(--logo-color)"
+                        />
+                        <path d="M24.0696 4.81221L30.3878 4.21069L26.1757 0H21.9635L24.0696 4.81221Z" fill="var(--high-contrast-text-color)" />
+                        <path d="M10.2295 4.81221L3.91129 4.21069L8.12346 0H12.3356L10.2295 4.81221Z" fill="var(--high-contrast-text-color)" />
+                        <path d="M4.70001 5.20001L11.2 5.70001L15.1 17.15H14.7L10.5 15.6L4.70001 5.20001Z" fill="var(--high-contrast-text-color)" />
+                        <path d="M29.8 5.20001L23.1 5.70001L19.4 17.15L19.9 17.14L23.8 15.7L29.8 5.20001Z" fill="var(--high-contrast-text-color)" />
+                        <path d="M12.1 18.2L12.6 17.4L14.3 18.2H20.3L21.6 17.4L22.2 18.2L17.15 26.8L12.1 18.2Z" fill="var(--high-contrast-text-color)" />
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0297 0L17.1214 13.1536L22.5526 0H12.0297Z" fill="var(--logo-color)" />
+                    </svg>
+                </PrimeVueNuxtLink>
+                <PrimeVueNuxtLink to="/" class="layout-topbar-icon" aria-label="PrimeVue logo">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                            fill="var(--logo-color)"
+                        />
+                        <path
+                            d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                            fill="var(--high-contrast-text-color)"
+                        />
+                    </svg>
+                </PrimeVueNuxtLink>
+            </div>
+
+            <ul class="topbar-items">
+                <li v-if="false">
+                    <div id="docsearch"></div>
+                </li>
+                <li>
+                    <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer" class="topbar-item">
+                        <i class="pi pi-github"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="topbar-item">
+                        <i class="pi pi-discord"></i>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://github.com/orgs/primefaces/discussions" target="_blank" rel="noopener noreferrer" class="topbar-item">
+                        <i class="pi pi-comments"></i>
+                    </a>
+                </li>
+                <li>
+                    <button type="button" class="topbar-item" @click="toggleDarkMode">
+                        <i :class="['pi', { 'pi-moon': $appState.darkTheme, 'pi-sun': !$appState.darkTheme }]"></i>
+                    </button>
+                </li>
+                <li class="relative">
+                    <button
+                        v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
+                        type="button"
+                        class="topbar-item config-item"
+                    >
+                        <i class="pi pi-palette"></i>
+                    </button>
+                    <AppConfigurator />
+                </li>
+                <li v-if="showMenuButton" class="menu-button">
+                    <button type="button" class="topbar-item menu-button" @click="onMenuButtonClick" aria-haspopup aria-label="Menu">
+                        <i class="pi pi-bars"></i>
+                    </button>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import EventBus from '@/layouts/AppEventBus';
+
+export default {
+    emits: ['menubutton-click'],
+    props: {
+        showMenuButton: {
+            type: Boolean,
+            default: true
+        }
+    },
+    scrollListener: null,
+    container: null,
+    mounted() {
+        this.bindScrollListener();
+    },
+    beforeUnmount() {
+        if (this.scrollListener) {
+            this.unbindScrollListener();
+        }
+    },
+    methods: {
+        onMenuButtonClick(event) {
+            this.$emit('menubutton-click', event);
+        },
+        toggleDarkMode() {
+            EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
+        },
+        bindScrollListener() {
+            if (!this.scrollListener) {
+                if (this.container) {
+                    this.scrollListener = () => {
+                        if (window.scrollY > 0) this.container.classList.add('layout-topbar-sticky');
+                        else this.container.classList.remove('layout-topbar-sticky');
+                    };
+                }
+            }
+
+            window.addEventListener('scroll', this.scrollListener);
+        },
+        unbindScrollListener() {
+            if (this.scrollListener) {
+                window.removeEventListener('scroll', this.scrollListener);
+                this.scrollListener = null;
+            }
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.isOutsideTopbarMenuClicked(event)) {
+                        this.unbindOutsideClickListener();
+                    }
+                };
+
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        isOutsideTopbarMenuClicked(event) {
+            return !(this.$refs.topbarMenu.isSameNode(event.target) || this.$refs.topbarMenu.contains(event.target));
+        },
+        containerRef(el) {
+            this.container = el;
+        }
+    }
+};
+</script>

apps/volt/components/app/PrimeVueNuxtLink.js

@@ -0,0 +1,4 @@
+export default defineNuxtLink({
+    componentName: 'PrimeVueNuxtLink',
+    trailingSlash: 'append'
+});

apps/volt/components/demo/DeferredDemo.vue

@@ -0,0 +1,78 @@
+<template>
+    <div v-if="!visible">
+        <div class="card">
+            <div class="deferred-demo-loading"></div>
+        </div>
+    </div>
+    <slot v-else></slot>
+</template>
+
+<script>
+export default {
+    name: 'DeferredDemo',
+    emits: ['load'],
+    props: {
+        options: {
+            type: Object,
+            default: null
+        }
+    },
+    data() {
+        return {
+            visible: false
+        };
+    },
+    observer: null,
+    timeout: null,
+    mounted() {
+        this.observer = new IntersectionObserver(([entry]) => {
+            clearTimeout(this.timeout);
+
+            if (entry.isIntersecting) {
+                this.timeout = setTimeout(() => {
+                    this.visible = true;
+                    this.observer.unobserve(this.$el);
+                    this.$emit('load');
+                }, 350);
+            }
+        }, this.options);
+
+        this.observer.observe(this.$el);
+    },
+    beforeUnmount() {
+        !this.visible && this.$el && this.observer?.unobserve(this.$el);
+        clearTimeout(this.timeout);
+    }
+};
+</script>
+<style>
+.deferred-demo-loading {
+    border-radius: 10px;
+    height: 350px;
+    position: relative;
+    overflow: hidden;
+}
+
+.deferred-demo-loading::after {
+    content: '';
+    animation: deferred-demo-loading 1.2s infinite;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    transform: translateX(-100%);
+    z-index: 1;
+    border-radius: 10px;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--p-surface-100), rgba(255, 255, 255, 0));
+}
+
+@keyframes deferred-demo-loading {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+</style>

apps/volt/components/doc/DocComponent.vue

@@ -0,0 +1,77 @@
+<template>
+    <div :class="['doc-component', className]">
+        <Head>
+            <Title>Volt | {{ title }}</Title>
+            <Meta name="description" :content="'Volt | ' + description" />
+        </Head>
+
+        <ul class="doc-tabmenu">
+            <li :class="{ 'doc-tabmenu-active': tab === 0 }">
+                <button type="button" @click="tab = 0">FEATURES</button>
+            </li>
+            <li :class="{ 'doc-tabmenu-active': tab === 1 }">
+                <button type="button" @click="tab = 1">CODE</button>
+            </li>
+        </ul>
+
+        <div class="doc-tabpanels">
+            <div v-show="tab === 0" class="doc-tabpanel">
+                <div class="doc-main">
+                    <div class="doc-intro">
+                        <h1>{{ header }}</h1>
+                        <p>
+                            <span>{{ description }}</span>
+                        </p>
+                        <div class="pt-3 flex gap-2">
+                            <a
+                                :href="`https://primevue.org${originPath}/#api`"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">API Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
+                            ></a>
+                            <a
+                                :href="`https://primevue.org${originPath}/#pt`"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">PassThrough Doc</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
+                            ></a>
+                            <a
+                                :href="`https://primevue.org${originPath}/#accessibility`"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm text-surface-900 dark:bg-surface-800 dark:hover:bg-surface-700"
+                                ><span class="text-surface-900 dark:text-surface-50 font-medium">Accessibility</span><i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i
+                            ></a>
+                        </div>
+                    </div>
+                    <DocSections :docs="componentDocs" />
+                </div>
+                <DocSectionNav :docs="componentDocs" />
+            </div>
+
+            <div v-if="tab === 1" class="doc-tabpanel">
+                <DocPreset :presetKey="header?.toLowerCase()" :introText="`${header} Code`" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+
+defineProps({
+    title: String,
+    header: String,
+    description: String,
+    componentDocs: Object,
+    className: String,
+    presetDoc: Object
+});
+
+const route = useRoute();
+const tab = ref(0);
+
+const originPath = computed(() => route.path);
+</script>

apps/volt/components/doc/DocPreset.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>{{ introText }}</h1>
+        </div>
+        <div class="xl:pe-72">
+            <DocSectionCode :code="code" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        presetKey: {
+            type: String,
+            default: null
+        },
+        introText: {
+            type: String,
+            default: null
+        }
+    },
+    data() {
+        return {
+            code: ''
+        };
+    },
+    async mounted() {
+        if (this.presetKey) {
+            const content = await import(`../../volt/${this.presetKey}/index.vue?raw`);
+
+            this.code = '\n' + content.default;
+        }
+    }
+};
+</script>

apps/volt/components/doc/DocSectionCode.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="doc-section-code">
+        <div class="doc-section-code-buttons">
+            <button v-tooltip.bottom="{ value: 'Copy Code', class: 'doc-section-code-tooltip' }" type="button" @click="copyCode" class="h-8 w-8 p-0 inline-flex items-center justify-center">
+                <i class="pi pi-copy"></i>
+            </button>
+        </div>
+
+        <div dir="ltr">
+            <template v-if="!lang">
+                <pre v-code><code>{{ code }}
+</code></pre>
+            </template>
+
+            <template v-else-if="lang === 'script'">
+                <pre v-code.script><code>
+{{ code }}
+</code></pre>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        code: {
+            type: null,
+            default: null
+        },
+        lang: {
+            type: String,
+            default: null
+        }
+    },
+    methods: {
+        async copyCode() {
+            await navigator.clipboard.writeText(this.code[this.codeLang]);
+        }
+    }
+};
+</script>

apps/volt/components/doc/DocSectionNav.vue

@@ -0,0 +1,127 @@
+<template>
+    <ul ref="nav" class="doc-section-nav">
+        <li v-for="doc of docs" :key="doc.label" :class="['navbar-item', { 'active-navbar-item': activeId === doc.id }]">
+            <div class="navbar-item-content">
+                <button @click="onButtonClick(doc)">{{ doc.label }}</button>
+            </div>
+
+            <template v-if="doc.children">
+                <ul>
+                    <li v-for="child of doc.children" :key="child.label" :class="['navbar-item', { 'active-navbar-item': activeId === child.id }]">
+                        <div class="navbar-item-content">
+                            <button @click="onButtonClick(child)">
+                                {{ child.label }}
+                            </button>
+                        </div>
+                    </li>
+                </ul>
+            </template>
+        </li>
+    </ul>
+</template>
+
+<script>
+import { findSingle, getHeight, getOffset, getWindowScrollTop, isVisible } from '@primeuix/utils/dom';
+import { isNotEmpty } from '@primeuix/utils/object';
+
+export default {
+    props: ['docs'],
+    data() {
+        return {
+            activeId: null,
+            isScrollBlocked: false,
+            scrollEndTimer: null,
+            topbarHeight: 0
+        };
+    },
+    watch: {
+        '$route.hash'() {
+            this.scrollCurrentUrl();
+        }
+    },
+    mounted() {
+        this.scrollCurrentUrl();
+
+        window.addEventListener('scroll', this.onScroll, { passive: true });
+    },
+    beforeUnmount() {
+        window.removeEventListener('scroll', this.onScroll, { passive: true });
+    },
+    methods: {
+        onScroll() {
+            if (!this.isScrollBlocked) {
+                const labels = [...document.querySelectorAll(':is(h1,h2,h3).doc-section-label')].filter((el) => isVisible(el));
+
+                const windowScrollTop = getWindowScrollTop();
+
+                labels.forEach((label) => {
+                    const { top } = getOffset(label);
+                    const threshold = this.getThreshold(label);
+
+                    if (top - threshold <= windowScrollTop) {
+                        const link = findSingle(label, 'a');
+
+                        this.activeId = link.id;
+                    }
+                });
+            }
+
+            clearTimeout(this.scrollEndTimer);
+            this.scrollEndTimer = setTimeout(() => {
+                this.isScrollBlocked = false;
+
+                const activeItem = findSingle(this.$refs.nav, '.active-navbar-item');
+
+                activeItem && activeItem.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }, 50);
+        },
+        scrollToLabelById(id, behavior = 'smooth') {
+            const label = document.getElementById(id);
+
+            label && label.parentElement.scrollIntoView({ block: 'start', behavior });
+        },
+        onButtonClick(doc) {
+            this.$router.push(`${this.checkRouteName}/#${doc.id}`);
+            setTimeout(() => {
+                this.activeId = doc.id;
+                this.scrollToLabelById(doc.id, 'smooth');
+                this.isScrollBlocked = true;
+            }, 1);
+        },
+        getThreshold(label) {
+            if (!this.topbarHeight) {
+                const topbar = findSingle(document.body, '.layout-topbar');
+
+                this.topbarHeight = topbar ? getHeight(topbar) : 0;
+            }
+
+            return this.topbarHeight + getHeight(label) * 1.5;
+        },
+        getIdOfTheSection(section) {
+            return section.querySelector('a').getAttribute('id');
+        },
+        scrollCurrentUrl() {
+            const hash = window.location.hash.substring(1);
+            const hasHash = isNotEmpty(hash);
+            const id = hasHash ? hash : (this.docs[0] || {}).id;
+
+            this.activeId = id;
+            hasHash &&
+                setTimeout(() => {
+                    this.scrollToLabelById(id);
+                }, 1);
+        }
+    },
+    computed: {
+        checkRouteName() {
+            const path = this.$router.currentRoute.value.path;
+
+            if (path.lastIndexOf('/') === path.length - 1) {
+                return path.slice(0, -1);
+            }
+
+            return path;
+        }
+    }
+};
+</script>

apps/volt/components/doc/DocSectionText.vue

@@ -0,0 +1,47 @@
+<template>
+    <component :is="headerTag" class="doc-section-label">
+        {{ $attrs.label }}
+        <NuxtLink :id="$attrs.id" :to="`${checkRouteName}/#${$attrs.id}`" target="_self" @click="onClick"> # </NuxtLink>
+    </component>
+    <div v-if="$attrs" class="doc-section-description">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+export default {
+    inheritAttrs: false,
+    methods: {
+        onClick(event) {
+            const parentElement = event.currentTarget.parentElement;
+            const hash = window.location.hash.substring(1);
+
+            hash === this.$attrs.id && event.preventDefault();
+
+            setTimeout(() => {
+                parentElement.scrollIntoView({ block: 'start' });
+            }, 0);
+        }
+    },
+    computed: {
+        checkRouteName() {
+            const path = this.$router.currentRoute.value.path;
+
+            if (path.lastIndexOf('/') === path.length - 1) {
+                return path.slice(0, -1);
+            }
+
+            return path;
+        },
+        headerTag() {
+            if (this.$attrs.level === 3) {
+                return 'h4';
+            } else if (this.$attrs.level === 2) {
+                return 'h3';
+            }
+
+            return 'h2';
+        }
+    }
+};
+</script>

apps/volt/components/doc/DocSections.vue

@@ -0,0 +1,26 @@
+<template>
+    <template v-for="(doc, i) of docs" :key="doc.label + '_' + i">
+        <section class="py-6">
+            <template v-if="doc.children">
+                <div :id="doc.id">
+                    <DocSectionText :id="doc.id" :label="doc.label">
+                        <p v-if="doc.description">{{ doc.description }}</p>
+                    </DocSectionText>
+                </div>
+                <template v-for="comp of doc.children" :key="comp.label">
+                    <component :is="{ ...comp.component }" :id="comp.id" :label="comp.label" :data="comp.data" :description="comp.description" :level="2" />
+                </template>
+            </template>
+
+            <template v-else-if="!doc.children && doc.component">
+                <component :is="{ ...doc.component }" :id="doc.id" :label="doc.label" :data="doc.data" :description="doc.description" />
+            </template>
+        </section>
+    </template>
+</template>
+
+<script>
+export default {
+    props: ['docs']
+};
+</script>

apps/volt/components/doc/codeeditor/index.js

@@ -0,0 +1,68 @@
+import sdk from '@stackblitz/sdk';
+import { getVueApp } from './templates';
+
+const useCodeSandbox = (language, code, service, extPages, dependencies, component, extFiles) => {
+    const getSandboxParameters = (sourceType) => {
+        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles }, sourceType);
+
+        files['sandbox.config.json'] = {
+            content: {
+                infiniteLoopProtection: false
+            }
+        };
+
+        return { files, dependenciesDemo, sourceFileName };
+    };
+
+    const sandboxParameters = getSandboxParameters({ language });
+
+    fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json'
+        },
+        body: JSON.stringify(sandboxParameters)
+    })
+        .then((response) => response.json())
+        .then((data) => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));
+};
+
+const useStackBlitz = (language, code, service, extPages, dependencies, component, extFiles, embedded = false) => {
+    const getStackBlitzParameters = (sourceType) => {
+        const { files, dependenciesDemo, sourceFileName } = getVueApp({ code, service, extPages, dependencies, component, extFiles, embedded }, sourceType);
+
+        return { files, dependenciesDemo, sourceFileName };
+    };
+
+    const stackBlitzParameters = getStackBlitzParameters({ language });
+
+    let files = {};
+
+    Object.entries(stackBlitzParameters.files).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content));
+
+    const primevueproject = {
+        title: embedded ? 'PrimeVue Tailwind Demo' : 'PrimeVue Demo',
+        template: 'node',
+        description: embedded
+            ? "This example demonstrates how to style components with Tailwind CSS using PrimeVue's unstyled property. As mentioned in the PrimeVue documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
+            : '**\n PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.',
+        dependencies: stackBlitzParameters.dependencies,
+        files
+    };
+
+    if (embedded) {
+        sdk.embedProject('embed', primevueproject, {
+            openFile: 'src/main.js',
+            view: 'default',
+            height: '800px'
+        });
+    } else {
+        sdk.openProject(primevueproject, {
+            newWindow: true,
+            openFile: [stackBlitzParameters.sourceFileName]
+        });
+    }
+};
+
+export { useCodeSandbox, useStackBlitz };

apps/volt/directives/CodeHighlight.js

@@ -0,0 +1,19 @@
+import { isClient } from '@primeuix/utils/dom';
+
+const CodeHighlight = {
+    mounted(el, binding) {
+        const modifiers = binding.modifiers;
+        const value = binding.value;
+
+        if (modifiers.script || value === 'script') el.className = 'language-javascript';
+        else if (modifiers.css || value === 'css') el.className = 'language-css';
+        else el.className = 'language-markup';
+
+        if (isClient()) {
+            window.Prism.highlightElement(el.children[0]);
+            el.children[0].parentElement.setAttribute('tabindex', '-1');
+        }
+    }
+};
+
+export default CodeHighlight;

apps/volt/doc/avatar/AvatarGroupDoc.vue

@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
+        </AvatarGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import AvatarGroup from '@/volt/avatargroup';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <AvatarGroup>
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
+            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
+            <Avatar label="+2" shape="circle" />
+        </AvatarGroup>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import AvatarGroup from '@/volt/avatargroup';
+<\/script>
+`);
+</script>

apps/volt/doc/avatar/IconDoc.vue

@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A font icon is displayed as an Avatar with the <i>icon</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Icon</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+<\/script>
+`);
+</script>

apps/volt/doc/avatar/ImageDoc.vue

@@ -0,0 +1,64 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use the <i>image</i> property to display an image as an Avatar.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Image</h5>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
+            </div>
+
+            <div class="flex-auto">
+                <h5>Gravatar</h5>
+                <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" size="xlarge" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+<\/script>
+`);
+</script>

apps/volt/doc/avatar/ImportDoc.vue

@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import InputText from '@/volt/inputtext';
+`
+        };
+    }
+};
+</script>

apps/volt/doc/avatar/LabelDoc.vue

@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A letter Avatar is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar label="U" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex flex-wrap gap-8">
+            <div class="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
+            </div>
+
+            <div class="flex-auto">
+                <h5>Badge</h5>
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar label="U" size="xlarge" />
+                </OverlayBadge>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Avatar from '@/volt/avatar';
+<\/script>
+`);
+</script>

apps/volt/doc/button/BadgeDoc.vue

@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/BasicDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text to display on a button is defined with the <i>label</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/ButtonGroupDoc.vue

@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ButtonGroup>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </ButtonGroup>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ButtonGroup from '@/volt/buttongroup';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <ButtonGroup>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Delete" icon="pi pi-trash" />
+            <Button label="Cancel" icon="pi pi-times" />
+        </ButtonGroup>
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ButtonGroup from '@/volt/buttongroup';
+<\/script>
+`);
+</script>

apps/volt/doc/button/DisabledDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be used.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Submit" disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" disabled />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/HeadlessDoc.vue

@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by adding the <i>asChild</i> property and defining your own UI element with the available bindings.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button v-slot="slotProps" asChild>
+            <button
+                v-bind="slotProps.a11yAttrs"
+                class="rounded-lg bg-gradient-to-br from-primary-400 to-primary-700 active:from-primary-700 active:to-primary-900 text-white border-none px-6 py-3 font-bold hover:ring-2 cursor-pointer ring-offset-2 ring-offset-surface-0 dark:ring-offset-surface-900 ring-primary transition-all"
+            >
+                SIGN UP
+            </button>
+        </Button>
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/IconOnlyDoc.vue

@@ -0,0 +1,123 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons can have icons without labels.</p>
+    </DocSectionText>
+    <div class="card">
+        <div class="flex justify-center mb-8">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+import SelectButton from '@/volt/selectbutton';
+import { ref } from 'vue';
+
+const size = ref('normal');
+const sizeOptions = ref([
+    { label: 'Small', value: 'small' },
+    { label: 'Normal', value: 'normal' },
+    { label: 'Large', value: 'large' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card">
+        <div class="flex justify-center mb-8">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" rounded />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="outlined" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="outlined" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="outlined" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="outlined" rounded />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" rounded />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" variant="text" raised rounded />
+            <SecondaryButton icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" variant="text" raised rounded />
+            <ContrastButton icon="pi pi-search" severity="success" aria-label="Search" :size="size" variant="text" raised rounded />
+            <DangerButton icon="pi pi-times" severity="info" aria-label="User" :size="size" variant="text" raised rounded />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+import SelectButton from '@/volt/selectbutton';
+import { ref } from 'vue';
+
+const size = ref('normal');
+const sizeOptions = ref([
+    { label: 'Small', value: 'small' },
+    { label: 'Normal', value: 'normal' },
+    { label: 'Large', value: 'large' }
+]);
+<\/script>
+`);
+</script>

apps/volt/doc/button/IconsDoc.vue

@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
+    </DocSectionText>
+    <div class="card flex flex-col items-center gap-4">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex flex-col items-center gap-4">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/ImportDoc.vue

@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import Button from '@/volt/button';
+import SecondaryButton from '@/volt/button/secondary';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+`
+        };
+    }
+};
+</script>

apps/volt/doc/button/LoadingDoc.vue

@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Busy state is controlled with the <i>loading</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const loading = ref(false);
+
+const load = () => {
+    loading.value = true;
+    setTimeout(() => {
+        loading.value = false;
+    }, 2000);
+};
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button type="button" label="Search" icon="pi pi-check" :loading="loading" @click="load" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const loading = ref(false);
+
+const load = () => {
+    loading.value = true;
+    setTimeout(() => {
+        loading.value = false;
+    }, 2000);
+};
+<\/script>
+`);
+</script>

apps/volt/doc/button/OutlinedDoc.vue

@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Outlined buttons display a border without a transparent background.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="outlined" />
+        <SecondaryButton label="Secondary" variant="outlined" />
+        <ContrastButton label="Contrast" variant="outlined" />
+        <DangerButton label="Danger" variant="outlined" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="outlined" />
+        <SecondaryButton label="Secondary" variant="outlined" />
+        <ContrastButton label="Contrast" variant="outlined" />
+        <DangerButton label="Danger" variant="outlined" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+<\/script>
+`);
+</script>

apps/volt/doc/button/RaisedDoc.vue

@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Raised buttons display a shadow to indicate elevation.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" raised />
+        <SecondaryButton label="Secondary" raised />
+        <ContrastButton label="Contrast" raised />
+        <DangerButton label="Danger" raised />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" raised />
+        <SecondaryButton label="Secondary" raised />
+        <ContrastButton label="Contrast" raised />
+        <DangerButton label="Danger" raised />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+<\/script>
+`);
+</script>

apps/volt/doc/button/RaisedTextDoc.vue

@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text buttons can be displayed elevated with the <i>raised</i> option.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" raised />
+        <SecondaryButton label="Secondary" variant="text" raised />
+        <ContrastButton label="Contrast" variant="text" raised />
+        <DangerButton label="Danger" variant="text" raised />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+   <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" raised />
+        <SecondaryButton label="Secondary" variant="text" raised />
+        <ContrastButton label="Contrast" variant="text" raised />
+        <DangerButton label="Danger" variant="text" raised />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+<\/script>
+`);
+</script>

apps/volt/doc/button/RoundedDoc.vue

@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Rounded buttons have a circular border radius.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" rounded />
+        <SecondaryButton label="Secondary" rounded />
+        <ContrastButton label="Contrast" rounded />
+        <DangerButton label="Danger" rounded />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" rounded />
+        <SecondaryButton label="Secondary" rounded />
+        <ContrastButton label="Contrast" rounded />
+        <DangerButton label="Danger" rounded />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+<\/script>
+`);
+</script>

apps/volt/doc/button/SeverityDoc.vue

@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Secondary, Contrast and Danger buttons are available as separate components for severity alternatives.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" />
+        <SecondaryButton label="Secondary" />
+        <ContrastButton label="Contrast" />
+        <DangerButton label="Danger" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" />
+        <SecondaryButton label="Secondary" />
+        <ContrastButton label="Contrast" />
+        <DangerButton label="Danger" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+<\/script>
+`);
+</script>

apps/volt/doc/button/SizesDoc.vue

@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap items-center justify-center gap-4">
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap items-center justify-center gap-4">
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/TemplateDoc.vue

@@ -0,0 +1,48 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Custom content inside a button is defined as children.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button variant="outlined" class="!border-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Button variant="outlined" class="!border-2">
+            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                    fill="var(--p-primary-color)"
+                />
+                <path
+                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                    fill="var(--p-text-color)"
+                />
+            </svg>
+        </Button>
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/button/TextDoc.vue

@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Text buttons are displayed as textual elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" />
+        <SecondaryButton label="Secondary" variant="text" />
+        <ContrastButton label="Contrast" variant="text" />
+        <DangerButton label="Danger" variant="text" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button label="Primary" variant="text" />
+        <SecondaryButton label="Secondary" variant="text" />
+        <ContrastButton label="Contrast" variant="text" />
+        <DangerButton label="Danger" variant="text" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import ContrastButton from '@/volt/button/contrast';
+import DangerButton from '@/volt/button/danger';
+import SecondaryButton from '@/volt/button/secondary';
+<\/script>
+`);
+</script>

apps/volt/doc/card/AdvancedDoc.vue

@@ -0,0 +1,62 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Card provides <i>header</i>, <i>title</i>, <i>subtitle</i>, <i>content</i> and <i>footer</i> as the named templates to place content.</p>
+    </DocSectionText>
+    <div class="mb-4 p-8 flex items-center justify-center">
+        <Card style="width: 25rem; overflow: hidden">
+            <template #header>
+                <img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
+            </template>
+            <template #title>Advanced Card</template>
+            <template #subtitle>Card subtitle</template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+            <template #footer>
+                <div class="flex gap-4 mt-1">
+                    <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                    <Button label="Save" class="w-full" />
+                </div>
+            </template>
+        </Card>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import Card from '@/volt/card';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <Card style="width: 25rem; overflow: hidden">
+        <template #header>
+            <img alt="user header" class="w-full" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" />
+        </template>
+        <template #title>Advanced Card</template>
+        <template #subtitle>Card subtitle</template>
+        <template #content>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                quas!
+            </p>
+        </template>
+        <template #footer>
+            <div class="flex gap-4 mt-1">
+                <Button label="Cancel" severity="secondary" outlined class="w-full" />
+                <Button label="Save" class="w-full" />
+            </div>
+        </template>
+    </Card>
+</template>
+
+<script setup>
+import Card from '@/volt/card';
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>

apps/volt/doc/card/BasicDoc.vue

@@ -0,0 +1,40 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A simple Card is created with a <i>title</i> property along with the content as children.</p>
+    </DocSectionText>
+    <div class="mb-4 p-8">
+        <Card>
+            <template #title>Simple Card</template>
+            <template #content>
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </template>
+        </Card>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Card from '@/volt/card';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <Card>
+        <template #title>Simple Card</template>
+        <template #content>
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                quas!
+            </p>
+        </template>
+    </Card>
+</template>
+
+<script setup>
+import Card from '@/volt/card';
+<\/script>
+`);
+</script>

apps/volt/doc/card/ImportDoc.vue

@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import Card from '@/volt/card';
+`
+        };
+    }
+};
+</script>

apps/volt/doc/checkbox/BasicDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Binary checkbox is used with the <i>v-model</i> for two-way value binding and the <i>binary</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary />
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>

apps/volt/doc/checkbox/DisabledDoc.vue

@@ -0,0 +1,35 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const checked1 = ref(false);
+const checked2 = ref(true);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center gap-2">
+        <Checkbox v-model="checked1" binary disabled />
+        <Checkbox v-model="checked2" binary disabled />
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const checked1 = ref(false);
+const checked2 = ref(true);
+<\/script>
+`);
+</script>

apps/volt/doc/checkbox/DynamicDoc.vue

@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Checkboxes can be generated using a list of values.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
+                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const selectedCategories = ref(['Marketing']);
+const categories = ref([
+    { name: 'Accounting', key: 'A' },
+    { name: 'Marketing', key: 'M' },
+    { name: 'Production', key: 'P' },
+    { name: 'Research', key: 'R' }
+]);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-col gap-4">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
+                <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
+                <label :for="category.key">{{ category.name }}</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const selectedCategories = ref(['Marketing']);
+const categories = ref([
+    { name: 'Accounting', key: 'A' },
+    { name: 'Marketing', key: 'M' },
+    { name: 'Production', key: 'P' },
+    { name: 'Research', key: 'R' }
+]);
+<\/script>
+`);
+</script>

apps/volt/doc/checkbox/FilledDoc.vue

@@ -0,0 +1,31 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary variant="filled" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" binary variant="filled" />
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+`);
+</script>

apps/volt/doc/checkbox/GroupDoc.vue

@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Multiple checkboxes can be grouped together.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
+            <label for="ingredient1"> Cheese </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
+            <label for="ingredient2"> Mushroom </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
+            <label for="ingredient3"> Pepper </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
+            <label for="ingredient4"> Onion </label>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const pizza = ref(null);
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center gap-4">
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
+            <label for="ingredient1"> Cheese </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
+            <label for="ingredient2"> Mushroom </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
+            <label for="ingredient3"> Pepper </label>
+        </div>
+        <div class="flex items-center gap-2">
+            <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
+            <label for="ingredient4"> Onion </label>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import Checkbox from '@/volt/checkbox';
+import { ref } from 'vue';
+
+const pizza = ref(null);
+<\/script>
+`);
+</script>

apps/volt/doc/checkbox/ImportDoc.vue

@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import Checkbox from '@/volt/checkbox';
+`
+        };
+    }
+};
+</script>