@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/components/togglebutton.md

@@ -0,0 +1,276 @@
+# ToggleButton
+
+ToggleButton is used to select a boolean value using a button.
+
+## Basic
+
+Two-way binding to a boolean property is defined using the standard v-model directive.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <ToggleButton v-model="checked" onLabel="On" offLabel="Off" class="w-24" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+```
+
+## Customized
+
+Use the icon template to customize what the component displays based on its internal state.
+
+```vue
+<template>
+    <div class="flex flex-wrap items-center justify-center gap-4">
+        <ToggleButton v-model="value1" onLabel="On" offLabel="Off" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="Locked" offLabel="Unlocked" class="min-w-29">
+            <template #icon="{ value }">
+                <Lock v-if="value" />
+                <LockOpen v-else />
+            </template>
+        </ToggleButton>
+        <ToggleButton v-model="value3" onLabel="Mute" offLabel="Unmute" class="min-w-26">
+            <template #icon="{ value }">
+                <VolumeUp v-if="value" />
+                <VolumeOff v-else />
+            </template>
+        </ToggleButton>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Lock from '@primeicons/vue/lock';
+import LockOpen from '@primeicons/vue/lock-open';
+import VolumeOff from '@primeicons/vue/volume-off';
+import VolumeUp from '@primeicons/vue/volume-up';
+
+const value1 = ref(false);
+const value2 = ref(false);
+const value3 = ref(false);
+<\/script>
+```
+
+## Sizes
+
+ToggleButton provides small and large sizes as alternatives to the base.
+
+```vue
+<template>
+    <div class="flex flex-col items-center gap-2">
+        <ToggleButton v-model="value1" onLabel="Small" offLabel="Small" size="small" class="min-w-16" />
+        <ToggleButton v-model="value2" onLabel="Normal" offLabel="Normal" class="min-w-20" />
+        <ToggleButton v-model="value3" onLabel="Large" offLabel="Large" size="large" class="min-w-28" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref(false);
+const value2 = ref(false);
+const value3 = ref(false);
+<\/script>
+```
+
+## Invalid
+
+The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with form validation.
+
+```vue
+<template>
+    <div class="flex items-center justify-center">
+        <ToggleButton v-model="checked" :invalid="!checked" onLabel="Invalid" offLabel="Invalid" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+```
+
+## Disabled
+
+When disabled is present, the element cannot be edited and focused.
+
+```vue
+<template>
+    <div class="flex items-center justify-center">
+        <ToggleButton v-model="checked" disabled onLabel="Disabled" offLabel="Disabled" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+```
+
+## Fluid
+
+The fluid prop makes the component take up the full width of its container when set to true.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <ToggleButton v-model="checked" onLabel="On" offLabel="Off" fluid />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+```
+
+## Forms
+
+ToggleButton integrates seamlessly with the PrimeVue Forms library.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col items-center gap-1">
+                <ToggleButton name="consent" onLabel="Accept All" offLabel="Reject All" class="min-w-40" />
+                <Message v-if="$form.consent?.invalid" severity="error" size="small" variant="simple">{{ $form.consent.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary">Submit</Button>
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    consent: false
+});
+
+const resolver = ref(zodResolver(
+    z.object({
+        consent: z.boolean().refine((val) => val === true, { message: 'Consent is mandatory.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with aria-labelledby or aria-label props, it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that does not change related to state. Keyboard Support Key Function tab Moves focus to the button. space Toggles the checked state.
+
+```vue
+<template>
+    <span id="rememberme">Remember Me</span>
+    <ToggleButton aria-labelledby="rememberme" />
+
+    <ToggleButton aria-label="Remember Me" />
+</template>
+```
+
+## Toggle Button API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| modelValue | boolean | false | Value of the component. |
+| defaultValue | boolean | - | The default value for the input when not controlled by  `modelValue` . |
+| name | string | - | The name attribute for the element, typically used in form submissions. |
+| onIcon | string | - | Icon for the on state. |
+| offIcon | string | - | Icon for the off state. |
+| onLabel | string | yes | Label for the on state. |
+| offLabel | string | no | Label for the off state. |
+| invalid | boolean | false | When present, it specifies that the component should have invalid state style. |
+| disabled | boolean | false | When present, it specifies that the element should be disabled. |
+| fluid | boolean | null | Spans 100% width of the container when enabled. |
+| readonly | boolean | - | When present, it specifies that an input field is read-only. |
+| tabindex | string | - | Index of the element in tabbing order. |
+| ariaLabelledby | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
+| size | HintedString<"small" \| "large"> | - | Defines the size of the component. |
+| formControl | Record<string, any> | - | Form control object, typically used for handling validation and form state. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<ToggleButtonPassThroughOptions<any>> | - | Used to pass attributes to DOM elements inside the component. |
+| ptOptions | any | - | Used to configure passthrough(pt) options of the component. |
+| unstyled | boolean | false | When enabled, it removes component related styles in the core. |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | ToggleButtonPassThroughOptionType<T> | Used to pass attributes to the root's DOM element. |
+| content | ToggleButtonPassThroughOptionType<T> | Used to pass attributes to the content's DOM element. |
+| icon | ToggleButtonPassThroughOptionType<T> | Used to pass attributes to the icon's DOM element. |
+| label | ToggleButtonPassThroughOptionType<T> | Used to pass attributes to the label's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-togglebutton | Class name of the root element |
+| p-togglebutton-icon | Class name of the icon element |
+| p-togglebutton-label | Class name of the label element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| togglebutton.padding | --p-togglebutton-padding | Padding of root |
+| togglebutton.border.radius | --p-togglebutton-border-radius | Border radius of root |
+| togglebutton.gap | --p-togglebutton-gap | Gap of root |
+| togglebutton.font.size | --p-togglebutton-font-size | Font size of root |
+| togglebutton.font.weight | --p-togglebutton-font-weight | Font weight of root |
+| togglebutton.disabled.background | --p-togglebutton-disabled-background | Disabled background of root |
+| togglebutton.disabled.border.color | --p-togglebutton-disabled-border-color | Disabled border color of root |
+| togglebutton.disabled.color | --p-togglebutton-disabled-color | Disabled color of root |
+| togglebutton.invalid.border.color | --p-togglebutton-invalid-border-color | Invalid border color of root |
+| togglebutton.focus.ring.width | --p-togglebutton-focus-ring-width | Focus ring width of root |
+| togglebutton.focus.ring.style | --p-togglebutton-focus-ring-style | Focus ring style of root |
+| togglebutton.focus.ring.color | --p-togglebutton-focus-ring-color | Focus ring color of root |
+| togglebutton.focus.ring.offset | --p-togglebutton-focus-ring-offset | Focus ring offset of root |
+| togglebutton.focus.ring.shadow | --p-togglebutton-focus-ring-shadow | Focus ring shadow of root |
+| togglebutton.transition.duration | --p-togglebutton-transition-duration | Transition duration of root |
+| togglebutton.sm.font.size | --p-togglebutton-sm-font-size | Sm font size of root |
+| togglebutton.sm.padding | --p-togglebutton-sm-padding | Sm padding of root |
+| togglebutton.lg.font.size | --p-togglebutton-lg-font-size | Lg font size of root |
+| togglebutton.lg.padding | --p-togglebutton-lg-padding | Lg padding of root |
+| togglebutton.background | --p-togglebutton-background | Background of root |
+| togglebutton.checked.background | --p-togglebutton-checked-background | Checked background of root |
+| togglebutton.hover.background | --p-togglebutton-hover-background | Hover background of root |
+| togglebutton.border.color | --p-togglebutton-border-color | Border color of root |
+| togglebutton.color | --p-togglebutton-color | Color of root |
+| togglebutton.hover.color | --p-togglebutton-hover-color | Hover color of root |
+| togglebutton.checked.color | --p-togglebutton-checked-color | Checked color of root |
+| togglebutton.checked.border.color | --p-togglebutton-checked-border-color | Checked border color of root |
+| togglebutton.icon.disabled.color | --p-togglebutton-icon-disabled-color | Disabled color of icon |
+| togglebutton.icon.color | --p-togglebutton-icon-color | Color of icon |
+| togglebutton.icon.hover.color | --p-togglebutton-icon-hover-color | Hover color of icon |
+| togglebutton.icon.checked.color | --p-togglebutton-icon-checked-color | Checked color of icon |
+| togglebutton.content.padding | --p-togglebutton-content-padding | Padding of content |
+| togglebutton.content.border.radius | --p-togglebutton-content-border-radius | Border radius of content |
+| togglebutton.content.checked.shadow | --p-togglebutton-content-checked-shadow | Checked shadow of content |
+| togglebutton.content.sm.padding | --p-togglebutton-content-sm-padding | Sm padding of content |
+| togglebutton.content.lg.padding | --p-togglebutton-content-lg-padding | Lg padding of content |
+| togglebutton.content.checked.background | --p-togglebutton-content-checked-background | Checked background of content |

package/data/llms/components/toggleswitch.md

@@ -0,0 +1,271 @@
+# ToggleSwitch
+
+ToggleSwitch is used to select a boolean value.
+
+## Basic
+
+Toggles a boolean setting between enabled and disabled states.
+
+```vue
+<template>
+    <div class="flex justify-center items-center gap-2">
+        <label for="switch">Off</label>
+        <ToggleSwitch v-model="checked" inputId="switch" />
+        <label for="switch">On</label>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+```
+
+## Controlled
+
+A controlled ToggleSwitch manages the checked state with v-model for two-way value binding.
+
+```vue
+<template>
+    <div class="flex justify-center items-center gap-2">
+        <ToggleSwitch v-model="checked" inputId="mode" />
+        <label for="mode">Airplane Mode</label>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(true);
+<\/script>
+```
+
+## Template
+
+The handle slot is available to display custom content.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <ToggleSwitch v-model="checked">
+            <template #handle="{ checked }">
+                <Check v-if="checked" class="text-xs!" />
+                <Times v-else class="text-xs!" />
+            </template>
+        </ToggleSwitch>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Check from '@primeicons/vue/check';
+import Times from '@primeicons/vue/times';
+
+const checked = ref(false);
+<\/script>
+```
+
+## Customization
+
+ToggleSwitch supports customization through the pt property. The appearance, including colors and other visual properties, can be modified by applying custom classes.
+
+```vue
+<template>
+    <div>
+        <label for="custom" class="max-w-xs mx-auto flex items-start gap-2 bg-slate-50 hover:bg-slate-100 dark:bg-slate-800 hover:dark:bg-slate-700 p-4 rounded-md transition-colors">
+            <div class="flex flex-col gap-1 flex-1">
+                <span class="m-0 text-medium text-slate-900 dark:text-slate-50">Try Beta Features</span>
+                <span class="m-0 text-sm text-slate-400">Experience upcoming features before they're officially released.</span>
+            </div>
+            <ToggleSwitch
+                v-model="checked"
+                inputId="custom"
+                :pt="{
+                    slider: { class: checked ? 'bg-blue-300! rounded-md!' : 'bg-slate-300! dark:bg-slate-600! rounded-md!' },
+                    handle: { class: checked ? 'bg-blue-900!' : 'bg-slate-500!' }
+                }"
+            />
+        </label>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(true);
+<\/script>
+```
+
+## Disabled
+
+When disabled is present, the element cannot be edited and focused.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <ToggleSwitch v-model="checked" disabled />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+```
+
+## Invalid
+
+The invalid state is applied using the invalid property to indicate failed validation, which can be integrated with form validation.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <ToggleSwitch v-model="checked" :invalid="!checked" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>
+```
+
+## Forms
+
+ToggleSwitch integrates seamlessly with the PrimeVue Forms library.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-48">
+            <div class="flex flex-col items-center gap-2">
+                <ToggleSwitch name="activation" />
+                <Message v-if="$form.activation?.invalid" severity="error" size="small" variant="simple">{{ $form.activation.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary">Submit</Button>
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    activation: false
+});
+const resolver = ref(zodResolver(
+    z.object({
+        activation: z.boolean().refine((val) => val === true, { message: 'Activation is required.' })
+    })
+));
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader ToggleSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby , aria-label props. Keyboard Support Key Function tab Moves focus to the switch. space Toggles the checked state.
+
+```vue
+<template>
+    <label for="switch1">Remember Me</label>
+    <ToggleSwitch inputId="switch1" />
+
+    <span id="switch2">Remember Me</span>
+    <ToggleSwitch aria-labelledby="switch2" />
+
+    <ToggleSwitch aria-label="Remember Me" />
+</template>
+```
+
+## Toggle Switch API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| modelValue | string \| boolean | false | Specifies whether a toggleswitch should be checked or not. |
+| defaultValue | string \| boolean | - | The default value for the input when not controlled by  `modelValue` . |
+| name | string | - | The name attribute for the element, typically used in form submissions. |
+| trueValue | any | true | Value in checked state. |
+| falseValue | any | false | Value in unchecked state. |
+| invalid | boolean | false | When present, it specifies that the component should have invalid state style. |
+| disabled | boolean | false | When present, it specifies that the component should be disabled. |
+| readonly | boolean | - | When present, it specifies that an input field is read-only. |
+| tabindex | number | - | Index of the element in tabbing order. |
+| inputId | string | - | Identifier of the underlying input element. |
+| inputClass | string \| object | - | Style class of the input field. |
+| inputStyle | object | - | Inline style of the input field. |
+| ariaLabelledby | string | - | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
+| ariaLabel | string | - | Establishes a string value that labels the component. |
+| formControl | Record<string, any> | - | Form control object, typically used for handling validation and form state. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<ToggleSwitchPassThroughOptions> | - | Used to pass attributes to DOM elements inside the component. |
+| ptOptions | any | - | Used to configure passthrough(pt) options of the component. |
+| unstyled | boolean | false | When enabled, it removes component related styles in the core. |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | ToggleSwitchPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| input | ToggleSwitchPassThroughOptionType | Used to pass attributes to the input's DOM element. |
+| slider | ToggleSwitchPassThroughOptionType | Used to pass attributes to the slider's DOM element. |
+| handle | ToggleSwitchPassThroughOptionType | Used to pass attributes to the handle's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-toggleswitch | Class name of the root element |
+| p-toggleswitch-input | Class name of the input element |
+| p-toggleswitch-slider | Class name of the slider element |
+| p-toggleswitch-handle | Class name of the handle element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| toggleswitch.width | --p-toggleswitch-width | Width of root |
+| toggleswitch.height | --p-toggleswitch-height | Height of root |
+| toggleswitch.border.radius | --p-toggleswitch-border-radius | Border radius of root |
+| toggleswitch.gap | --p-toggleswitch-gap | Gap of root |
+| toggleswitch.shadow | --p-toggleswitch-shadow | Shadow of root |
+| toggleswitch.focus.ring.width | --p-toggleswitch-focus-ring-width | Focus ring width of root |
+| toggleswitch.focus.ring.style | --p-toggleswitch-focus-ring-style | Focus ring style of root |
+| toggleswitch.focus.ring.color | --p-toggleswitch-focus-ring-color | Focus ring color of root |
+| toggleswitch.focus.ring.offset | --p-toggleswitch-focus-ring-offset | Focus ring offset of root |
+| toggleswitch.focus.ring.shadow | --p-toggleswitch-focus-ring-shadow | Focus ring shadow of root |
+| toggleswitch.border.width | --p-toggleswitch-border-width | Border width of root |
+| toggleswitch.border.color | --p-toggleswitch-border-color | Border color of root |
+| toggleswitch.hover.border.color | --p-toggleswitch-hover-border-color | Hover border color of root |
+| toggleswitch.checked.border.color | --p-toggleswitch-checked-border-color | Checked border color of root |
+| toggleswitch.checked.hover.border.color | --p-toggleswitch-checked-hover-border-color | Checked hover border color of root |
+| toggleswitch.invalid.border.color | --p-toggleswitch-invalid-border-color | Invalid border color of root |
+| toggleswitch.transition.duration | --p-toggleswitch-transition-duration | Transition duration of root |
+| toggleswitch.slide.duration | --p-toggleswitch-slide-duration | Slide duration of root |
+| toggleswitch.background | --p-toggleswitch-background | Background of root |
+| toggleswitch.disabled.background | --p-toggleswitch-disabled-background | Disabled background of root |
+| toggleswitch.hover.background | --p-toggleswitch-hover-background | Hover background of root |
+| toggleswitch.checked.background | --p-toggleswitch-checked-background | Checked background of root |
+| toggleswitch.checked.hover.background | --p-toggleswitch-checked-hover-background | Checked hover background of root |
+| toggleswitch.handle.border.radius | --p-toggleswitch-handle-border-radius | Border radius of handle |
+| toggleswitch.handle.size | --p-toggleswitch-handle-size | Size of handle |
+| toggleswitch.handle.background | --p-toggleswitch-handle-background | Background of handle |
+| toggleswitch.handle.disabled.background | --p-toggleswitch-handle-disabled-background | Disabled background of handle |
+| toggleswitch.handle.hover.background | --p-toggleswitch-handle-hover-background | Hover background of handle |
+| toggleswitch.handle.checked.background | --p-toggleswitch-handle-checked-background | Checked background of handle |
+| toggleswitch.handle.checked.hover.background | --p-toggleswitch-handle-checked-hover-background | Checked hover background of handle |
+| toggleswitch.handle.color | --p-toggleswitch-handle-color | Color of handle |
+| toggleswitch.handle.hover.color | --p-toggleswitch-handle-hover-color | Hover color of handle |
+| toggleswitch.handle.checked.color | --p-toggleswitch-handle-checked-color | Checked color of handle |
+| toggleswitch.handle.checked.hover.color | --p-toggleswitch-handle-checked-hover-color | Checked hover color of handle |

package/data/llms/components/toolbar.md

@@ -0,0 +1,140 @@
+# Toolbar
+
+Toolbar is a grouping component for buttons and other content.
+
+## Basic
+
+Combines action buttons and controls in a horizontal bar.
+
+```vue
+<template>
+    <Toolbar>
+        <template #start>
+            <Button class="mr-2" variant="text" severity="secondary">
+                <Plus />
+            </Button>
+            <Button class="mr-2" variant="text" severity="secondary">
+                <Print />
+            </Button>
+            <Button variant="text" severity="secondary">
+                <Upload />
+            </Button>
+        </template>
+
+        <template #center>
+            <IconField iconPosition="left">
+                <InputIcon>
+                    <Search />
+                </InputIcon>
+                <InputText placeholder="Search" />
+            </IconField>
+        </template>
+
+        <template #end>
+            <Button severity="secondary" variant="outlined" size="small">Cancel</Button>
+            <Button size="small" class="ml-2">Save</Button>
+        </template>
+    </Toolbar>
+</template>
+
+<script setup>
+import Plus from '@primeicons/vue/plus';
+import Print from '@primeicons/vue/print';
+import Search from '@primeicons/vue/search';
+import Upload from '@primeicons/vue/upload';
+<\/script>
+```
+
+## Custom
+
+A customized toolbar with navigation bar functionality.
+
+```vue
+<template>
+    <Toolbar class="@container" :style="{ 'border-radius': '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }">
+        <template #start>
+            <div class="flex items-center gap-1">
+                <span class="text-xl" style="color: var(--p-primary-400)">
+                    <Prime />
+                </span>
+                <span class="font-bold text-lg ml-2" style="color: var(--p-surface-0)">Brand</span>
+            </div>
+            <div class="ml-6 hidden @min-[620px]:flex gap-1">
+                <Button variant="text" size="small" class="text-surface-0! hover:bg-surface-700!">Products</Button>
+                <Button variant="text" size="small" class="text-surface-0! hover:bg-surface-700!">Solutions</Button>
+                <Button variant="text" size="small" class="text-surface-0! hover:bg-surface-700!">Resources</Button>
+                <Button variant="text" size="small" class="text-surface-0! hover:bg-surface-700!">Pricing</Button>
+            </div>
+        </template>
+
+        <template #end>
+            <div class="flex items-center gap-2">
+                <Button variant="text" size="small" iconOnly aria-label="Search" class="text-surface-0! hover:bg-surface-700!">
+                    <Search />
+                </Button>
+                <Button severity="contrast" size="small">Get Started</Button>
+                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+            </div>
+        </template>
+    </Toolbar>
+</template>
+
+<script setup>
+import Prime from '@primeicons/vue/prime';
+import Search from '@primeicons/vue/search';
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader Toolbar uses toolbar role for the root element, aria-orientation is not included as it defaults to horizontal . Any valid attribute is passed to the root element so you may add additional properties like aria-labelledby and aria-labelled to define the element if required. Keyboard Support Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.
+
+```vue
+<Toolbar aria-label="Actions">
+    Content
+</Toolbar>
+```
+
+## Toolbar API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| ariaLabelledby | string | - | Defines a string value that labels an interactive element. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<ToolbarPassThroughOptions> | - | Used to pass attributes to DOM elements inside the component. |
+| ptOptions | any | - | Used to configure passthrough(pt) options of the component. |
+| unstyled | boolean | false | When enabled, it removes component related styles in the core. |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | ToolbarPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| start | ToolbarPassThroughOptionType | Used to pass attributes to the start's DOM element. |
+| center | ToolbarPassThroughOptionType | Used to pass attributes to the center's DOM element. |
+| end | ToolbarPassThroughOptionType | Used to pass attributes to the right's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-toolbar | Class name of the root element |
+| p-toolbar-start | Class name of the start element |
+| p-toolbar-center | Class name of the center element |
+| p-toolbar-end | Class name of the end element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| toolbar.background | --p-toolbar-background | Background of root |
+| toolbar.border.color | --p-toolbar-border-color | Border color of root |
+| toolbar.border.radius | --p-toolbar-border-radius | Border radius of root |
+| toolbar.color | --p-toolbar-color | Color of root |
+| toolbar.gap | --p-toolbar-gap | Gap of root |
+| toolbar.padding | --p-toolbar-padding | Padding of root |