@primeng/mcp 21.1.1 → 21.1.3

package/dist/index.js

@@ -6,7 +6,7 @@ import { runPrimeMcpServer } from "@primeuix/mcp";
 // data/components.json
 var components_default = {
   version: "1.0.0",
-  generatedAt: "2026-01-28",
+  generatedAt: "2026-03-04",
   components: [
     {
       name: "accordion",
@@ -543,6 +543,11 @@ export class AccordionTemplateDemo {}`
             variable: "--p-accordion-header-font-weight",
             description: "Font weight of header"
           },
+          {
+            token: "accordion.header.font.size",
+            variable: "--p-accordion-header-font-size",
+            description: "Font size of header"
+          },
           {
             token: "accordion.header.border.radius",
             variable: "--p-accordion-header-border-radius",
@@ -908,9 +913,7 @@ export class AnimateonscrollBasicDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props. The input element has combobox role in addition to aria-autocomplete , aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list. In multiple mode, chip list uses listbox role whereas each chip has the option role with aria-label set to the label of the chip. The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the input element.",
-          examples: {
-            typescript: '<label for="ac1">Username</label>\n<p-autocomplete inputId="ac1"/>\n\n<span id="ac2">Email</span>\n<p-autocomplete ariaLabelledBy="ac2" />\n\n<p-autocomplete ariaLabel="City" />'
-          }
+          examples: null
         },
         {
           id: "advanced-chips",
@@ -2969,6 +2972,16 @@ export class AutocompleteVirtualScrollDemo implements OnInit {
             variable: "--p-autocomplete-option-border-radius",
             description: "Border radius of option"
           },
+          {
+            token: "autocomplete.option.font.weight",
+            variable: "--p-autocomplete-option-font-weight",
+            description: "Font weight of option"
+          },
+          {
+            token: "autocomplete.option.font.size",
+            variable: "--p-autocomplete-option-font-size",
+            description: "Font size of option"
+          },
           {
             token: "autocomplete.option.group.background",
             variable: "--p-autocomplete-option-group-background",
@@ -2984,6 +2997,11 @@ export class AutocompleteVirtualScrollDemo implements OnInit {
             variable: "--p-autocomplete-option-group-font-weight",
             description: "Font weight of option group"
           },
+          {
+            token: "autocomplete.option.group.font.size",
+            variable: "--p-autocomplete-option-group-font-size",
+            description: "Font size of option group"
+          },
           {
             token: "autocomplete.option.group.padding",
             variable: "--p-autocomplete-option-group-padding",
@@ -3620,6 +3638,11 @@ export class AvatarTemplateDemo {}`
             variable: "--p-avatar-height",
             description: "Height of root"
           },
+          {
+            token: "avatar.font.weight",
+            variable: "--p-avatar-font-weight",
+            description: "Font weight of root"
+          },
           {
             token: "avatar.font.size",
             variable: "--p-avatar-font-size",
@@ -4609,6 +4632,21 @@ export class BreadcrumbTemplateDemo implements OnInit {
             variable: "--p-breadcrumb-item-icon-hover-color",
             description: "Icon hover color of item"
           },
+          {
+            token: "breadcrumb.item.icon.size",
+            variable: "--p-breadcrumb-item-icon-size",
+            description: "Icon size of item icon"
+          },
+          {
+            token: "breadcrumb.item.label.font.weight",
+            variable: "--p-breadcrumb-item-label-font-weight",
+            description: "Font weight of item label"
+          },
+          {
+            token: "breadcrumb.item.label.font.size",
+            variable: "--p-breadcrumb-item-label-font-size",
+            description: "Font size of item label"
+          },
           {
             token: "breadcrumb.item.focus.ring.width",
             variable: "--p-breadcrumb-item-focus-ring-width",
@@ -4651,9 +4689,7 @@ export class BreadcrumbTemplateDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly.",
-          examples: {
-            typescript: '<p-button icon="pi pi-check" aria-label="Submit" />\n<p-button icon="pi pi-check" label="Submit" />\n\n<p-button class="youtube p-0" aria-label="Youtube">\n    <i class="pi pi-youtube px-2"></i>\n    <span class="px-4">Youtube</span>\n</p-button>'
-          }
+          examples: null
         },
         {
           id: "badge",
@@ -5510,6 +5546,11 @@ export class ButtonTextDemo {}`
             variable: "--p-button-icon-only-width",
             description: "Icon only width of root"
           },
+          {
+            token: "button.icon.only.width",
+            variable: "--p-button-icon-only-width",
+            description: "Font size of root"
+          },
           {
             token: "button.sm.font.size",
             variable: "--p-button-sm-font-size",
@@ -6641,6 +6682,16 @@ export class CardBasicDemo {}`
             token: "card.subtitle.color",
             variable: "--p-card-subtitle-color",
             description: "Color of subtitle"
+          },
+          {
+            token: "card.subtitle.font.size",
+            variable: "--p-card-subtitle-font-size",
+            description: "Font size of subtitle"
+          },
+          {
+            token: "card.subtitle.font.weight",
+            variable: "--p-card-subtitle-font-weight",
+            description: "Font weight of subtitle"
           }
         ]
       }
@@ -7404,9 +7455,7 @@ export class CarouselVerticalDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The cascadeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label , aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem.",
-          examples: {
-            typescript: '<span id="dd1">Options</span>\n<p-cascadeselect ariaLabelledBy="dd1"/>\n\n<p-cascadeselect ariaLabel="Options"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -9437,6 +9486,16 @@ export class CascadeselectTemplatedrivenformsDemo {
             variable: "--p-cascadeselect-lg-padding-y",
             description: "Lg padding y of root"
           },
+          {
+            token: "cascadeselect.font.weight",
+            variable: "--p-cascadeselect-font-weight",
+            description: "Font weight of current value"
+          },
+          {
+            token: "cascadeselect.font.size",
+            variable: "--p-cascadeselect-font-size",
+            description: "Font size of current value"
+          },
           {
             token: "cascadeselect.dropdown.width",
             variable: "--p-cascadeselect-dropdown-width",
@@ -9522,6 +9581,11 @@ export class CascadeselectTemplatedrivenformsDemo {
             variable: "--p-cascadeselect-option-selected-focus-color",
             description: "Selected focus color of option"
           },
+          {
+            token: "cascadeselect.option.selected.font.weight",
+            variable: "--p-cascadeselect-option-selected-font-weight",
+            description: "Font weight of a selected option"
+          },
           {
             token: "cascadeselect.option.padding",
             variable: "--p-cascadeselect-option-padding",
@@ -9547,6 +9611,16 @@ export class CascadeselectTemplatedrivenformsDemo {
             variable: "--p-cascadeselect-option-icon-size",
             description: "Icon size of option"
           },
+          {
+            token: "cascadeselect.option.font.weight",
+            variable: "--p-cascadeselect-option-font-weight",
+            description: "Font weight of option"
+          },
+          {
+            token: "cascadeselect.option.font.size",
+            variable: "--p-cascadeselect-option-font-size",
+            description: "Font size of option"
+          },
           {
             token: "cascadeselect.clear.icon.color",
             variable: "--p-cascadeselect-clear-icon-color",
@@ -11972,6 +12046,16 @@ export class ChipTemplateDemo {}`
             variable: "--p-chip-icon-color",
             description: "Color of icon"
           },
+          {
+            token: "chip.label.font.weight",
+            variable: "--p-chip-label-font-weight",
+            description: "Font weight of label"
+          },
+          {
+            token: "chip.label.font.size",
+            variable: "--p-chip-label-font-size",
+            description: "Font size of label"
+          },
           {
             token: "chip.remove.icon.size",
             variable: "--p-chip-remove-icon-size",
@@ -13203,6 +13287,21 @@ export class ConfirmdialogTemplateDemo {
             token: "confirmdialog.content.gap",
             variable: "--p-confirmdialog-content-gap",
             description: "Gap of content"
+          },
+          {
+            token: "confirmdialog.message.color",
+            variable: "--p-confirmdialog-message-color",
+            description: "Color of message"
+          },
+          {
+            token: "confirmdialog.message.font.weight",
+            variable: "--p-confirmdialog-message-font-weight",
+            description: "Font weight of message"
+          },
+          {
+            token: "confirmdialog.message.font.size",
+            variable: "--p-confirmdialog-message-font-size",
+            description: "Font size of message"
           }
         ]
       }
@@ -13636,6 +13735,21 @@ export class ConfirmpopupTemplateDemo {
             variable: "--p-confirmpopup-icon-color",
             description: "Color of icon"
           },
+          {
+            token: "confirmpopup.message.color",
+            variable: "--p-confirmpopup-message-color",
+            description: "Color of message"
+          },
+          {
+            token: "confirmpopup.message.font.weight",
+            variable: "--p-confirmpopup-message-font-weight",
+            description: "Font weight of message"
+          },
+          {
+            token: "confirmpopup.message.font.size",
+            variable: "--p-confirmpopup-message-font-size",
+            description: "Font size of message"
+          },
           {
             token: "confirmpopup.footer.gap",
             variable: "--p-confirmpopup-footer-gap",
@@ -14408,6 +14522,21 @@ export class ContextmenuTemplateDemo implements OnInit {
             variable: "--p-contextmenu-item-icon-active-color",
             description: "Icon active color of item"
           },
+          {
+            token: "contextmenu.item.icon.size",
+            variable: "--p-contextmenu-item-icon-size",
+            description: "Icon size of item"
+          },
+          {
+            token: "contextmenu.item.label.font.weight",
+            variable: "--p-contextmenu-item-label-font-weight",
+            description: "Font weight of item label"
+          },
+          {
+            token: "contextmenu.item.label.font.size",
+            variable: "--p-contextmenu-item-label-font-size",
+            description: "Font size of item label"
+          },
           {
             token: "contextmenu.submenu.mobile.indent",
             variable: "--p-contextmenu-submenu-mobile-indent",
@@ -15492,9 +15621,7 @@ export class DataviewSortingDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: 'Screen Reader Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby , aria-label props. The input element has combobox role in addition to aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup. The optional DatePicker button requires includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the chooseDate key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label to be able to notify users about the current value. Popup has a dialog role along with aria-modal and aria-label . The navigation buttons at the header has an aria-label retrieved from the prevYear , nextYear , prevMonth , nextMonth , prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys. Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute. Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour , nextHour , prevMinute , nextMinute , prevSecond , nextSecond , am and pm keys. DatePicker also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.',
-          examples: {
-            typescript: '<label for="date1">Date</label>\n<p-datepicker inputId="date1"/>\n\n<span id="date2">Date</span>\n<p-datepicker ariaLabelledBy="date2"/>\n\n<p-datepicker ariaLabel="Date"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -15867,6 +15994,30 @@ export class DatepickerInvalidDemo {
           description: "Locale for different languages and formats is defined globally, refer to the PrimeNG Locale configuration for more information.",
           examples: null
         },
+        {
+          id: "mask",
+          label: "Mask",
+          description: "DatePicker can be used with the pInputMask directive to enforce a specific input format.",
+          examples: {
+            typescript: `import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DatePickerModule } from 'primeng/datepicker';
+import { InputMaskModule } from 'primeng/inputmask';
+
+@Component({
+    template: \`
+        <div class="card flex justify-center">
+            <p-datepicker [(ngModel)]="date" dateFormat="dd/mm/yy" placeholder="dd/mm/yyyy" pInputMask="99/99/9999" />
+        </div>
+    \`,
+    standalone: true,
+    imports: [DatePickerModule, InputMaskModule, FormsModule]
+})
+export class DatepickerMaskDemo {
+    date: Date | undefined;
+}`
+          }
+        },
         {
           id: "methods",
           label: "methods-doc",
@@ -15876,10 +16027,45 @@ export class DatepickerInvalidDemo {
           }
         },
         {
-          id: "minmaxdox.ts",
-          label: "minmaxdox",
+          id: "minmax",
+          label: "Min / Max",
           description: "Boundaries for the permitted dates that can be entered are defined with minDate and maxDate properties.",
-          examples: null
+          examples: {
+            typescript: `import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DatePickerModule } from 'primeng/datepicker';
+
+@Component({
+    template: \`
+        <div class="card flex justify-center">
+            <p-datepicker [(ngModel)]="date" [minDate]="minDate" [maxDate]="maxDate" [readonlyInput]="true" />
+        </div>
+    \`,
+    standalone: true,
+    imports: [DatePickerModule, FormsModule]
+})
+export class DatepickerMinmaxDemo implements OnInit {
+    date: Date | undefined;
+    minDate: Date | undefined;
+    maxDate: Date | undefined;
+
+    ngOnInit() {
+        let today = new Date();
+        let month = today.getMonth();
+        let year = today.getFullYear();
+        let prevMonth = month === 0 ? 11 : month - 1;
+        let prevYear = prevMonth === 11 ? year - 1 : year;
+        let nextMonth = month === 11 ? 0 : month + 1;
+        let nextYear = nextMonth === 0 ? year + 1 : year;
+        this.minDate = new Date();
+        this.minDate.setMonth(prevMonth);
+        this.minDate.setFullYear(prevYear);
+        this.maxDate = new Date();
+        this.maxDate.setMonth(nextMonth);
+        this.maxDate.setFullYear(nextYear);
+    }
+}`
+          }
         },
         {
           id: "month",
@@ -15928,8 +16114,8 @@ export class DatepickerMultipleDemo {
           }
         },
         {
-          id: "multiplemonths.",
-          label: "multiplemonths.-doc",
+          id: "multiplemonths",
+          label: "Multiple Months",
           description: "Number of months to display is configured with the numberOfMonths property.",
           examples: {
             typescript: `import { Component } from '@angular/core';
@@ -15945,7 +16131,7 @@ import { DatePickerModule } from 'primeng/datepicker';
     standalone: true,
     imports: [DatePickerModule, FormsModule]
 })
-export class DatepickerMultiplemonths.Demo {
+export class DatepickerMultiplemonthsDemo {
     date: Date[] | undefined;
 }`
           }
@@ -17451,6 +17637,11 @@ export class DatepickerYearDemo {
             variable: "--p-datepicker-title-font-weight",
             description: "Font weight of title"
           },
+          {
+            token: "datepicker.title.font.size",
+            variable: "--p-datepicker-title-font-size",
+            description: "Font size of title"
+          },
           {
             token: "datepicker.dropdown.width",
             variable: "--p-datepicker-dropdown-width",
@@ -17571,6 +17762,16 @@ export class DatepickerYearDemo {
             variable: "--p-datepicker-select-month-border-radius",
             description: "Border radius of select month"
           },
+          {
+            token: "datepicker.select.month.font.weight",
+            variable: "--p-datepicker-select-month-font-weight",
+            description: "Font weight of select month"
+          },
+          {
+            token: "datepicker.select.month.font.size",
+            variable: "--p-datepicker-select-month-font-size",
+            description: "Font size of select month"
+          },
           {
             token: "datepicker.select.year.hover.background",
             variable: "--p-datepicker-select-year-hover-background",
@@ -17596,6 +17797,16 @@ export class DatepickerYearDemo {
             variable: "--p-datepicker-select-year-border-radius",
             description: "Border radius of select year"
           },
+          {
+            token: "datepicker.select.year.font.weight",
+            variable: "--p-datepicker-select-year-font-weight",
+            description: "Font weight of select year"
+          },
+          {
+            token: "datepicker.select.year.font.size",
+            variable: "--p-datepicker-select-year-font-size",
+            description: "Font size of select year"
+          },
           {
             token: "datepicker.group.border.color",
             variable: "--p-datepicker-group-border-color",
@@ -17621,6 +17832,11 @@ export class DatepickerYearDemo {
             variable: "--p-datepicker-week-day-font-weight",
             description: "Font weight of week day"
           },
+          {
+            token: "datepicker.week.day.font.size",
+            variable: "--p-datepicker-week-day-font-size",
+            description: "Font size of week day"
+          },
           {
             token: "datepicker.week.day.color",
             variable: "--p-datepicker-week-day-color",
@@ -17706,6 +17922,16 @@ export class DatepickerYearDemo {
             variable: "--p-datepicker-date-focus-ring-shadow",
             description: "Focus ring shadow of date"
           },
+          {
+            token: "datepicker.date.font.weight",
+            variable: "--p-datepicker-date-font-weight",
+            description: "Font weight of date"
+          },
+          {
+            token: "datepicker.date.font.size",
+            variable: "--p-datepicker-date-font-size",
+            description: "Font size of date"
+          },
           {
             token: "datepicker.month.view.margin",
             variable: "--p-datepicker-month-view-margin",
@@ -17766,6 +17992,21 @@ export class DatepickerYearDemo {
             variable: "--p-datepicker-time-picker-button-gap",
             description: "Button gap of time picker"
           },
+          {
+            token: "datepicker.time.picker.color",
+            variable: "--p-datepicker-time-picker-color",
+            description: "Color of time picker label"
+          },
+          {
+            token: "datepicker.time.picker.font.weight",
+            variable: "--p-datepicker-time-picker-font-weight",
+            description: "Font weight of time picker label"
+          },
+          {
+            token: "datepicker.time.picker.font.size",
+            variable: "--p-datepicker-time-picker-font-size",
+            description: "Font size of time picker label"
+          },
           {
             token: "datepicker.today.background",
             variable: "--p-datepicker-today-background",
@@ -17788,13 +18029,7 @@ export class DatepickerYearDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Trigger element also requires aria-expanded and aria-controls to be handled explicitly. Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may use closeButtonProps to customize the element and override the default aria-label . Maximize element is a button with an aria-label that refers to the aria.maximizeLabel and aria.minimizeLabel property of the locale API. It cannot be customized using the maximizeButtonProps . Overlay Keyboard Support Key Function tab Moves focus to the next the focusable element within the dialog. shift + tab Moves focus to the previous the focusable element within the dialog. escape Closes the dialog if closeOnEscape is true. Close Button Keyboard Support Key Function enter Closes the dialog. space Closes the dialog.",
-          examples: {
-            typescript: `<p-button icon="pi pi-external-link" (click)="visible = true" aria-controls="{{visible ? 'dialog' : null}}" aria-expanded="{{visible ? true : false}}" />
-
-<p-dialog id="dialog" header="Header" [(visible)]="visible" [style]="{ width: '50vw' }" (onHide)="visible = false">
-    <p>Content</p>
-</p-dialog>`
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -20228,22 +20463,7 @@ export class DragdropDropindicatorDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Drawer component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In addition aria-modal is added since focus is kept within the drawer when opened. It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Trigger element also requires aria-expanded and aria-controls to be handled explicitly. Overlay Keyboard Support Key Function tab Moves focus to the next the focusable element within the drawer. shift + tab Moves focus to the previous the focusable element within the drawer. escape Closes the dialog if closeOnEscape is true. Close Button Keyboard Support Key Function enter Closes the drawer. space Closes the drawer.",
-          examples: {
-            typescript: `<p-button
-    icon="pi pi-arrow-right"
-    (click)="visible = true"
-    aria-controls="{{visible ? 'drawer' : null}}"
-    aria-expanded="{{visible ? true : false}}"
-></p-button>
-<p-drawer
-    [(visible)]="visible"
-    id="drawer"
-    (onHide)="visible = false"
-    role="region"
->
-    content
-</p-drawer>`
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -22097,6 +22317,11 @@ export class FieldsetToggleableDemo {}`
             variable: "--p-fieldset-legend-font-weight",
             description: "Font weight of legend"
           },
+          {
+            token: "fieldset.legend.font.size",
+            variable: "--p-fieldset-legend-font-size",
+            description: "Font size of legend"
+          },
           {
             token: "fieldset.legend.focus.ring.width",
             variable: "--p-fieldset-legend-focus-ring-width",
@@ -23173,6 +23398,36 @@ export class FileuploadTemplateDemo {
             variable: "--p-fileupload-file-info-gap",
             description: "Info gap of file"
           },
+          {
+            token: "fileupload.file.name.color",
+            variable: "--p-fileupload-file-name-color",
+            description: "Color of file name"
+          },
+          {
+            token: "fileupload.file.name.font.weight",
+            variable: "--p-fileupload-file-name-font-weight",
+            description: "Font weight of file name"
+          },
+          {
+            token: "fileupload.file.name.font.size",
+            variable: "--p-fileupload-file-name-font-size",
+            description: "Font size of file name"
+          },
+          {
+            token: "fileupload.file.size.color",
+            variable: "--p-fileupload-file-size-color",
+            description: "Color of file size"
+          },
+          {
+            token: "fileupload.file.size.font.weight",
+            variable: "--p-fileupload-file-size-font-weight",
+            description: "Font weight of file size"
+          },
+          {
+            token: "fileupload.file.size.font.size",
+            variable: "--p-fileupload-file-size-font-size",
+            description: "Font size of file size"
+          },
           {
             token: "fileupload.file.list.gap",
             variable: "--p-fileupload-file-list-gap",
@@ -23394,6 +23649,11 @@ export class FloatlabelVariantsDemo {
             variable: "--p-floatlabel-position-y",
             description: "Position y of root"
           },
+          {
+            token: "floatlabel.font.size",
+            variable: "--p-floatlabel-font-size",
+            description: "Font size of root"
+          },
           {
             token: "floatlabel.font.weight",
             variable: "--p-floatlabel-font-weight",
@@ -25465,9 +25725,7 @@ export class IftalabelInvalidDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader ImageComponent component uses a native range slider internally. Value to describe the component can be defined using aria-labelledby and aria-label props. Keyboard Support Key Function tab Moves focus to the component. left arrow up arrow Decrements the value. right arrow down arrow Increments the value. home Set the minimum value. end Set the maximum value. page up Increments the value by 10 steps. page down Decrements the value by 10 steps.",
-          examples: {
-            typescript: '<span id="image_label">Compare Images</span>\n<p-imagecompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">\n    ...\n</p-imagecompare>\n\n<p-imagecompare class="shadow-lg rounded-2xl" aria-label="Compare Images">\n    ...\n</p-imagecompare>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -26447,6 +26705,16 @@ export class InputgroupMultipleDemo {}`
             token: "inputgroup.addon.min.width",
             variable: "--p-inputgroup-addon-min-width",
             description: "Min width of addon"
+          },
+          {
+            token: "inputgroup.addon.font.weight",
+            variable: "--p-inputgroup-addon-font-weight",
+            description: "Font weight of addon"
+          },
+          {
+            token: "inputgroup.addon.font.size",
+            variable: "--p-inputgroup-addon-font-size",
+            description: "Font size of addon"
           }
         ]
       }
@@ -26459,10 +26727,8 @@ export class InputgroupMultipleDemo {}`
         {
           id: "accessibility",
           label: "Accessibility",
-          description: "Screen Reader InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy , ariaLabel props.",
-          examples: {
-            typescript: '<label for="date">Date</label>\n<p-inputmask inputId="date"/>\n\n<span id="phone">Phone</span>\n<p-inputmask ariaLabelledBy="phone"/>\n\n<p-inputmask ariaLabel="Age"/>'
-          }
+          description: "Screen Reader InputMask directive is used with a native input element that implicitly includes any passed attribute. Value to describe the component can either be provided via label tag combined with id attribute or using aria-labelledby , aria-label attributes.",
+          examples: null
         },
         {
           id: "basic",
@@ -26471,16 +26737,17 @@ export class InputgroupMultipleDemo {}`
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask mask="99-999999" [(ngModel)]="value" placeholder="99-999999" />
+            <input pInputText pInputMask="99-999999" [(ngModel)]="value" placeholder="99-999999" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskBasicDemo {
     value: string | undefined;
@@ -26489,7 +26756,7 @@ export class InputmaskBasicDemo {
         },
         {
           id: "clearicon",
-          label: "Clear Icon",
+          label: "clearicon-doc",
           description: "When showClear is enabled, a clear icon is displayed to clear the value.",
           examples: {
             typescript: `import { Component } from '@angular/core';
@@ -26517,16 +26784,17 @@ export class InputmaskCleariconDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask mask="999-99-9999" [(ngModel)]="value" [disabled]="true" />
+            <input pInputText pInputMask="999-99-9999" [(ngModel)]="value" disabled />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskDisabledDemo {
     value: string | undefined;
@@ -26540,16 +26808,17 @@ export class InputmaskDisabledDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask mask="99-999999" [(ngModel)]="value" variant="filled" placeholder="99-999999" />
+            <input pInputText pInputMask="99-999999" [(ngModel)]="value" variant="filled" placeholder="99-999999" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskFilledDemo {
     value: string | undefined;
@@ -26564,27 +26833,28 @@ export class InputmaskFilledDemo {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { FloatLabelModule } from 'primeng/floatlabel';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex flex-wrap justify-center items-end gap-4">
             <p-floatlabel>
-                <p-inputmask id="over_label" [(ngModel)]="value1" mask="999-99-9999" />
+                <input pInputText id="over_label" [(ngModel)]="value1" pInputMask="999-99-9999" />
                 <label for="over_label">Over Label</label>
             </p-floatlabel>
             <p-floatlabel variant="in">
-                <p-inputmask id="in_label" [(ngModel)]="value2" mask="999-99-9999" />
+                <input pInputText id="in_label" [(ngModel)]="value2" pInputMask="999-99-9999" />
                 <label for="in_label">In Label</label>
             </p-floatlabel>
             <p-floatlabel variant="on">
-                <p-inputmask id="on_label" [(ngModel)]="value3" mask="999-99-9999" />
+                <input pInputText id="on_label" [(ngModel)]="value3" pInputMask="999-99-9999" />
                 <label for="on_label">On Label</label>
             </p-floatlabel>
         </div>
     \`,
     standalone: true,
-    imports: [FloatLabelModule, InputMaskModule, FormsModule]
+    imports: [FloatLabelModule, InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskFloatlabelDemo {
     value1: string | undefined;
@@ -26600,16 +26870,17 @@ export class InputmaskFloatlabelDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card">
-            <p-inputmask mask="99-999999" [(ngModel)]="value" placeholder="99-999999" fluid />
+            <input pInputText pInputMask="99-999999" [(ngModel)]="value" placeholder="99-999999" fluid />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskFluidDemo {
     value: string | undefined;
@@ -26624,19 +26895,20 @@ export class InputmaskFluidDemo {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IftaLabelModule } from 'primeng/iftalabel';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
             <p-iftalabel>
-                <p-inputmask id="ssn" [(ngModel)]="value" mask="999-99-9999" autocomplete="off" />
+                <input pInputText id="ssn" [(ngModel)]="value" pInputMask="999-99-9999" autocomplete="off" />
                 <label for="ssn">SSN</label>
             </p-iftalabel>
         </div>
     \`,
     standalone: true,
-    imports: [IftaLabelModule, InputMaskModule, FormsModule]
+    imports: [IftaLabelModule, InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskIftalabelDemo {
     value: string | undefined;
@@ -26650,17 +26922,18 @@ export class InputmaskIftalabelDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex flex-wrap justify-center gap-4">
-            <p-inputmask [(ngModel)]="value1" mask="99-999999" placeholder="Serial Key" [invalid]="!value1" />
-            <p-inputmask [(ngModel)]="value2" mask="99-999999" placeholder="Serial Key" [invalid]="!value2" variant="filled" />
+            <input pInputText [(ngModel)]="value1" pInputMask="99-999999" placeholder="Serial Key" [invalid]="!value1" />
+            <input pInputText [(ngModel)]="value2" pInputMask="99-999999" placeholder="Serial Key" [invalid]="!value2" variant="filled" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskInvalidDemo {
     value1: string | undefined;
@@ -26675,6 +26948,7 @@ export class InputmaskInvalidDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
@@ -26682,20 +26956,20 @@ import { InputMaskModule } from 'primeng/inputmask';
         <p-fluid class="card flex flex-wrap gap-4">
             <div class="flex-auto">
                 <span class="font-bold block mb-2">SSN</span>
-                <p-inputmask mask="999-99-9999" [(ngModel)]="value1" placeholder="999-99-9999" />
+                <input pInputText pInputMask="999-99-9999" [(ngModel)]="value1" placeholder="999-99-9999" />
             </div>
             <div class="flex-auto">
                 <span class="font-bold block mb-2">Phone</span>
-                <p-inputmask mask="(999) 999-9999" [(ngModel)]="value2" placeholder="(999) 999-9999" />
+                <input pInputText pInputMask="(999) 999-9999" [(ngModel)]="value2" placeholder="(999) 999-9999" />
             </div>
             <div class="flex-auto">
                 <span class="font-bold block mb-2">Serial Number</span>
-                <p-inputmask mask="a*-999-a999" [(ngModel)]="value3" placeholder="a*-999-a999" />
+                <input pInputText pInputMask="a*-999-a999" [(ngModel)]="value3" placeholder="a*-999-a999" />
             </div>
         </p-fluid>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskMaskDemo {
     value1: string | undefined;
@@ -26711,16 +26985,17 @@ export class InputmaskMaskDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask mask="(999) 999-9999? x99999" [(ngModel)]="value" placeholder="(999) 999-9999? x99999" />
+            <input pInputText pInputMask="(999) 999-9999? x99999" [(ngModel)]="value" placeholder="(999) 999-9999? x99999" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskOptionalDemo {
     value: string | undefined;
@@ -26734,10 +27009,11 @@ export class InputmaskOptionalDemo {
           examples: {
             typescript: `import { Component, inject } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { InputMaskModule } from 'primeng/inputmask';
 import { MessageModule } from 'primeng/message';
 import { ToastModule } from 'primeng/toast';
 import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputMaskModule } from 'primeng/inputmask';
 import { MessageService } from 'primeng/api';
 
 @Component({
@@ -26746,7 +27022,7 @@ import { MessageService } from 'primeng/api';
         <div class="card flex justify-center">
             <form [formGroup]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4 sm:w-56">
                 <div class="flex flex-col gap-1">
-                    <p-inputmask mask="99-999999" formControlName="value" placeholder="99-999999" [invalid]="isInvalid('value')" fluid />
+                    <input pInputText pInputMask="99-999999" formControlName="value" placeholder="99-999999" [invalid]="isInvalid('value')" fluid />
                     @if (isInvalid('value')) {
                         <p-message severity="error" size="small" variant="simple">Serial number is required.</p-message>
                     }
@@ -26756,7 +27032,7 @@ import { MessageService } from 'primeng/api';
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, MessageModule, ToastModule, ButtonModule, ReactiveFormsModule]
+    imports: [MessageModule, ToastModule, ButtonModule, InputTextModule, InputMaskModule, ReactiveFormsModule]
 })
 export class InputmaskReactiveformsDemo {
     messageService = inject(MessageService);
@@ -26793,18 +27069,19 @@ export class InputmaskReactiveformsDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex flex-col items-center gap-4">
-            <p-inputmask [(ngModel)]="value1" placeholder="Small" size="small" mask="99-999999" />
-            <p-inputmask [(ngModel)]="value2" placeholder="Normal" mask="99-999999" />
-            <p-inputmask [(ngModel)]="value3" placeholder="Large" size="large" mask="99-999999" />
+            <input pInputText [(ngModel)]="value1" placeholder="Small" pSize="small" pInputMask="99-999999" />
+            <input pInputText [(ngModel)]="value2" placeholder="Normal" pInputMask="99-999999" />
+            <input pInputText [(ngModel)]="value3" placeholder="Large" pSize="large" pInputMask="99-999999" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskSizesDemo {
     value1: string | undefined;
@@ -26820,16 +27097,17 @@ export class InputmaskSizesDemo {
           examples: {
             typescript: `import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { InputTextModule } from 'primeng/inputtext';
 import { InputMaskModule } from 'primeng/inputmask';
 
 @Component({
     template: \`
         <div class="card flex justify-center">
-            <p-inputmask [(ngModel)]="value" mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
+            <input pInputText [(ngModel)]="value" pInputMask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, FormsModule]
+    imports: [InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskSlotcharDemo {
     value: string | undefined;
@@ -26843,10 +27121,11 @@ export class InputmaskSlotcharDemo {
           examples: {
             typescript: `import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { InputMaskModule } from 'primeng/inputmask';
 import { MessageModule } from 'primeng/message';
 import { ToastModule } from 'primeng/toast';
 import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { InputMaskModule } from 'primeng/inputmask';
 import { MessageService } from 'primeng/api';
 
 @Component({
@@ -26855,7 +27134,7 @@ import { MessageService } from 'primeng/api';
         <div class="card flex justify-center">
             <form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex justify-center flex-col gap-4 md:w-56">
                 <div class="flex flex-col gap-1">
-                    <p-inputmask name="serial" mask="99-999999" #serialNumber="ngModel" [(ngModel)]="value" placeholder="99-999999" [invalid]="serialNumber.invalid && (serialNumber.touched || exampleForm.submitted)" required fluid />
+                    <input pInputText name="serial" pInputMask="99-999999" #serialNumber="ngModel" [(ngModel)]="value" placeholder="99-999999" [invalid]="serialNumber.invalid && (serialNumber.touched || exampleForm.submitted)" required fluid />
                     @if (serialNumber.invalid && (serialNumber.touched || exampleForm.submitted)) {
                         <p-message severity="error" size="small" variant="simple">Serial number is required.</p-message>
                     }
@@ -26865,7 +27144,7 @@ import { MessageService } from 'primeng/api';
         </div>
     \`,
     standalone: true,
-    imports: [InputMaskModule, MessageModule, ToastModule, ButtonModule, FormsModule]
+    imports: [MessageModule, ToastModule, ButtonModule, InputTextModule, InputMaskModule, FormsModule]
 })
 export class InputmaskTemplatedrivenformsDemo {
     messageService = inject(MessageService);
@@ -27265,9 +27544,7 @@ export class InputmaskTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel , ariaDescribedBy props. The input element uses spinbutton role in addition to the aria-valuemin , aria-valuemax and aria-valuenow attributes.",
-          examples: {
-            typescript: '<label for="price">Price</label>\n<p-inputnumber inputId="price" />\n\n<span id="label_number">Number</span>\n<p-inputnumber ariaLabelledBy="label_number" />\n\n<p-inputnumber ariaLabel="Number" />\n\n<p-inputnumber ariaDescribedBy="describe" />\n<small id="describe">Information</small>'
-          }
+          examples: null
         },
         {
           id: "buttons",
@@ -28887,9 +29164,7 @@ export class InputotpTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby , aria-label props.",
-          examples: {
-            typescript: '<label for="firstname">Firstname</label>\n<input pInputText id="firstname" />\n\n<span id="lastname">Lastname</span>\n<input pInputText aria-labelledby="lastname" />\n\n<input pInputText aria-label="Age" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -29549,6 +29824,16 @@ export class InputtextTemplatedrivenformsDemo {
             token: "inputtext.lg.padding.y",
             variable: "--p-inputtext-lg-padding-y",
             description: "Lg padding y of root"
+          },
+          {
+            token: "inputtext.font.weight",
+            variable: "--p-inputtext-font-weight",
+            description: "Font weight of root"
+          },
+          {
+            token: "inputtext.font.size",
+            variable: "--p-inputtext-font-size",
+            description: "Font size of root"
           }
         ]
       }
@@ -29687,9 +29972,7 @@ export class KeyfilterRegexDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Knob element component uses slider role in addition to the aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and ariaLabel props.",
-          examples: {
-            typescript: '<span id="label_number">Number</span>\n<p-knob ariaLabelledBy="label_number"/>\n\n<p-knob ariaLabel="Number"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -30344,6 +30627,16 @@ export class KnobTemplatedrivenformsDemo {
             token: "knob.text.color",
             variable: "--p-knob-text-color",
             description: "Color of text"
+          },
+          {
+            token: "knob.text.font.size",
+            variable: "--p-knob-text-font-size",
+            description: "Font size of text"
+          },
+          {
+            token: "knob.text.font.weight",
+            variable: "--p-knob-text-font-weight",
+            description: "Font weight of text"
           }
         ]
       }
@@ -30357,9 +30650,7 @@ export class KnobTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can be provided ariaLabelledBy or ariaLabel props. The list element has a listbox role with the aria-multiselectable attribute that sets to true when multiple selection is enabled. Each list item has an option role with aria-selected and aria-disabled as their attributes.",
-          examples: {
-            typescript: '<span id="lb">Options</span>\n<p-listbox ariaLabelledBy="lb"/>\n\n<p-listbox ariaLabel="City"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -31784,6 +32075,11 @@ export class ListboxVirtualscrollDemo {
             variable: "--p-listbox-option-selected-focus-color",
             description: "Selected focus color of option"
           },
+          {
+            token: "listbox.option.selected.font.weight",
+            variable: "--p-listbox-option-selected-font-weight",
+            description: "Font weight of a selected option"
+          },
           {
             token: "listbox.option.padding",
             variable: "--p-listbox-option-padding",
@@ -31799,6 +32095,16 @@ export class ListboxVirtualscrollDemo {
             variable: "--p-listbox-option-striped-background",
             description: "Striped background of option"
           },
+          {
+            token: "listbox.option.font.weight",
+            variable: "--p-listbox-option-font-weight",
+            description: "Font weight of option"
+          },
+          {
+            token: "listbox.option.font.size",
+            variable: "--p-listbox-option-font-size",
+            description: "Font size of option"
+          },
           {
             token: "listbox.option.group.background",
             variable: "--p-listbox-option-group-background",
@@ -31814,6 +32120,11 @@ export class ListboxVirtualscrollDemo {
             variable: "--p-listbox-option-group-font-weight",
             description: "Font weight of option group"
           },
+          {
+            token: "listbox.option.group.font.size",
+            variable: "--p-listbox-option-group-font-size",
+            description: "Font size of option group"
+          },
           {
             token: "listbox.option.group.padding",
             variable: "--p-listbox-option-group-padding",
@@ -32835,6 +33146,21 @@ export class MegamenuVerticalDemo implements OnInit {
             variable: "--p-megamenu-item-icon-active-color",
             description: "Icon active color of item"
           },
+          {
+            token: "megamenu.item.icon.size",
+            variable: "--p-megamenu-item-icon-size",
+            description: "Icon size of item"
+          },
+          {
+            token: "megamenu.item.label.font.weight",
+            variable: "--p-megamenu-item-label-font-weight",
+            description: "Font weight of item label"
+          },
+          {
+            token: "megamenu.item.label.font.size",
+            variable: "--p-megamenu-item-label-font-size",
+            description: "Font size of item label"
+          },
           {
             token: "megamenu.overlay.padding",
             variable: "--p-megamenu-overlay-padding",
@@ -32890,6 +33216,11 @@ export class MegamenuVerticalDemo implements OnInit {
             variable: "--p-megamenu-submenu-label-font-weight",
             description: "Font weight of submenu label"
           },
+          {
+            token: "megamenu.submenu.label.font.size",
+            variable: "--p-megamenu-submenu-label-font-size",
+            description: "Font size of submenu label"
+          },
           {
             token: "megamenu.submenu.label.background",
             variable: "--p-megamenu-submenu-label-background",
@@ -33772,6 +34103,21 @@ export class MenuTemplateDemo implements OnInit {
             variable: "--p-menu-item-icon-focus-color",
             description: "Icon focus color of item"
           },
+          {
+            token: "menu.item.icon.size",
+            variable: "--p-menu-item-icon-size",
+            description: "Icon size of item"
+          },
+          {
+            token: "menu.item.label.font.weight",
+            variable: "--p-menu-item-label-font-weight",
+            description: "Font weight of item label"
+          },
+          {
+            token: "menu.item.label.font.size",
+            variable: "--p-menu-item-label-font-size",
+            description: "Font size of item label"
+          },
           {
             token: "menu.submenu.label.padding",
             variable: "--p-menu-submenu-label-padding",
@@ -33782,6 +34128,11 @@ export class MenuTemplateDemo implements OnInit {
             variable: "--p-menu-submenu-label-font-weight",
             description: "Font weight of submenu label"
           },
+          {
+            token: "menu.submenu.label.font.size",
+            variable: "--p-menu-submenu-label-font-size",
+            description: "Font size of submenu label"
+          },
           {
             token: "menu.submenu.label.background",
             variable: "--p-menu-submenu-label-background",
@@ -34531,6 +34882,21 @@ export class MenubarTemplateDemo implements OnInit {
             variable: "--p-menubar-item-icon-active-color",
             description: "Icon active color of item"
           },
+          {
+            token: "menubar.item.icon.size",
+            variable: "--p-menubar-item-icon-size",
+            description: "Icon size of item"
+          },
+          {
+            token: "menubar.item.label.font.weight",
+            variable: "--p-menubar-item-label-font-weight",
+            description: "Font weight of item label"
+          },
+          {
+            token: "menubar.item.label.font.size",
+            variable: "--p-menubar-item-label-font-size",
+            description: "Font size of item label"
+          },
           {
             token: "menubar.submenu.padding",
             variable: "--p-menubar-submenu-padding",
@@ -36003,6 +36369,16 @@ export class MetergroupVerticalDemo {
             variable: "--p-metergroup-label-marker-size",
             description: "Size of label marker"
           },
+          {
+            token: "metergroup.label.text.font.weight",
+            variable: "--p-metergroup-label-text-font-weight",
+            description: "Font weight of label text"
+          },
+          {
+            token: "metergroup.label.text.font.size",
+            variable: "--p-metergroup-label-text-font-size",
+            description: "Font size of label text"
+          },
           {
             token: "metergroup.label.icon.size",
             variable: "--p-metergroup-label-icon-size",
@@ -36030,9 +36406,7 @@ export class MetergroupVerticalDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The multiselect component has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls attribute that refers to the id of the popup listbox. The popup listbox uses listbox as the role with aria-multiselectable enabled. Each list item has an option role along with aria-label , aria-selected and aria-disabled attributes. Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the selectAll and unselectAll keys of the aria property from the locale API. If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element. Close button uses close key of the aria property from the locale API as the aria-label by default, this can be overriden with the closeButtonProps .",
-          examples: {
-            typescript: '<span id="dd1">Options</span>\n<p-multiselect ariaLabelledBy="dd1"/>\n\n<p-multiselect ariaLabel="Options"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -37924,6 +38298,16 @@ export class MultiselectVirtualscrollDemo {
             variable: "--p-multiselect-lg-padding-y",
             description: "Lg padding y of root"
           },
+          {
+            token: "multiselect.font.weight",
+            variable: "--p-multiselect-font-weight",
+            description: "Font weight of root"
+          },
+          {
+            token: "multiselect.font.size",
+            variable: "--p-multiselect-font-size",
+            description: "Font size of root"
+          },
           {
             token: "multiselect.dropdown.width",
             variable: "--p-multiselect-dropdown-width",
@@ -38009,6 +38393,11 @@ export class MultiselectVirtualscrollDemo {
             variable: "--p-multiselect-option-selected-focus-color",
             description: "Selected focus color of option"
           },
+          {
+            token: "multiselect.option.selected.font.weight",
+            variable: "--p-multiselect-option-selected-font-weight",
+            description: "Font weight of a selected option"
+          },
           {
             token: "multiselect.option.padding",
             variable: "--p-multiselect-option-padding",
@@ -38024,6 +38413,16 @@ export class MultiselectVirtualscrollDemo {
             variable: "--p-multiselect-option-gap",
             description: "Gap of option"
           },
+          {
+            token: "multiselect.option.font.weight",
+            variable: "--p-multiselect-option-font-weight",
+            description: "Font weight of option"
+          },
+          {
+            token: "multiselect.option.font.size",
+            variable: "--p-multiselect-option-font-size",
+            description: "Font size of option"
+          },
           {
             token: "multiselect.option.group.background",
             variable: "--p-multiselect-option-group-background",
@@ -38039,6 +38438,11 @@ export class MultiselectVirtualscrollDemo {
             variable: "--p-multiselect-option-group-font-weight",
             description: "Font weight of option group"
           },
+          {
+            token: "multiselect.option.group.font.size",
+            variable: "--p-multiselect-option-group-font-size",
+            description: "Font size of option group"
+          },
           {
             token: "multiselect.option.group.padding",
             variable: "--p-multiselect-option-group-padding",
@@ -38071,9 +38475,7 @@ export class MultiselectVirtualscrollDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. Controls buttons are button elements with an aria-label that refers to the aria.moveTop , aria.moveUp , aria.moveDown , aria.moveBottom , aria.moveTo , aria.moveAllTo , aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may use moveTopButtonProps , moveUpButtonProps , moveDownButtonProps , moveToButtonProps , moveAllToButtonProps , moveFromButtonProps , moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. OrderList Keyboard Support Key Function tab Moves focus to the first selected option, if there is none then first option receives the focus. up arrow Moves focus to the previous option. down arrow Moves focus to the next option. enter Toggles the selected state of the focused option. space Toggles the selected state of the focused option. home Moves focus to the first option. end Moves focus to the last option. shift + down arrow Moves focus to the next option and toggles the selection state. shift + up arrow Moves focus to the previous option and toggles the selection state. shift + space Selects the items between the most recently selected option and the focused option. control + shift + home Selects the focused options and all the options up to the first one. control + shift + end Selects the focused options and all the options down to the first one. control + a Selects all options. Buttons Keyboard Support Key Function enter Executes button action. space Executes button action.",
-          examples: {
-            typescript: '<span id="lb">Options</span>\n<p-orderlist ariaLabelledBy="lb" />\n\n<p-orderlist ariaLabel="City" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -40343,6 +40745,16 @@ export class PaginatorTemplateDemo {
             variable: "--p-paginator-nav-button-border-radius",
             description: "Border radius of nav button"
           },
+          {
+            token: "paginator.nav.button.font.weight",
+            variable: "--p-paginator-nav-button-font-weight",
+            description: "Font weight of nav button"
+          },
+          {
+            token: "paginator.nav.button.font.size",
+            variable: "--p-paginator-nav-button-font-size",
+            description: "Font size of nav button"
+          },
           {
             token: "paginator.nav.button.focus.ring.width",
             variable: "--p-paginator-nav-button-focus-ring-width",
@@ -40373,6 +40785,16 @@ export class PaginatorTemplateDemo {
             variable: "--p-paginator-current-page-report-color",
             description: "Color of current page report"
           },
+          {
+            token: "paginator.current.page.report.font.weight",
+            variable: "--p-paginator-current-page-report-font-weight",
+            description: "Font weight of current page report"
+          },
+          {
+            token: "paginator.current.page.report.font.size",
+            variable: "--p-paginator-current-page-report-font-size",
+            description: "Font size of current page report"
+          },
           {
             token: "paginator.jump.to.page.input.max.width",
             variable: "--p-paginator-jump-to-page-input-max-width",
@@ -40618,9 +41040,9 @@ export class PanelToggleableDemo {}`
             description: "Defines template option for header."
           },
           {
-            name: "icon",
+            name: "icons",
             type: "TemplateRef<void>",
-            description: "Defines template option for icon."
+            description: "Defines template option for icons."
           },
           {
             name: "content",
@@ -40827,6 +41249,11 @@ export class PanelToggleableDemo {}`
             variable: "--p-panel-title-font-weight",
             description: "Font weight of title"
           },
+          {
+            token: "panel.title.font.size",
+            variable: "--p-panel-title-font-size",
+            description: "Font size of title"
+          },
           {
             token: "panel.content.padding",
             variable: "--p-panel-content-padding",
@@ -41817,6 +42244,21 @@ export class PanelmenuTemplateDemo implements OnInit {
             variable: "--p-panelmenu-item-icon-focus-color",
             description: "Icon focus color of item"
           },
+          {
+            token: "panelmenu.item.icon.size",
+            variable: "--p-panelmenu-item-icon-size",
+            description: "Icon size of item"
+          },
+          {
+            token: "panelmenu.item.label.font.weight",
+            variable: "--p-panelmenu-item-label-font-weight",
+            description: "Font weight of item label"
+          },
+          {
+            token: "panelmenu.item.label.font.size",
+            variable: "--p-panelmenu-item-label-font-size",
+            description: "Font size of item label"
+          },
           {
             token: "panelmenu.submenu.indent",
             variable: "--p-panelmenu-submenu-indent",
@@ -41844,9 +42286,7 @@ export class PanelmenuTemplateDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy , ariaLabel props. Screen reader is notified about the changes to the strength of the password using a section that has aria-live while typing.",
-          examples: {
-            typescript: '<label for="pwd1">Password</label>\n<p-password inputId="pwd1" />\n\n<span id="pwd2">Password</span>\n<p-password ariaLabelledBy="pwd2" />\n\n<p-password ariaLabel="Password" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -42829,6 +43269,16 @@ export class PasswordTogglemaskDemo {
             variable: "--p-password-content-gap",
             description: "Gap of content"
           },
+          {
+            token: "password.meter.text.font.weight",
+            variable: "--p-password-meter-text-font-weight",
+            description: "Font weight of meter text"
+          },
+          {
+            token: "password.meter.text.font.size",
+            variable: "--p-password-meter-text-font-size",
+            description: "Font size of meter text"
+          },
           {
             token: "password.strength.weak.background",
             variable: "--p-password-strength-weak-background",
@@ -42856,9 +43306,7 @@ export class PasswordTogglemaskDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the source listbox and target listbox can be provided with ariaLabelledBy or ariaLabel props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. Controls buttons are button elements with an aria-label that refers to the aria.moveTop , aria.moveUp , aria.moveDown , aria.moveBottom , aria.moveTo , aria.moveAllTo , aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may use moveTopButtonProps , moveUpButtonProps , moveDownButtonProps , moveToButtonProps , moveAllToButtonProps , moveFromButtonProps , moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. PickList Keyboard Support Key Function tab Moves focus to the first selected option, if there is none then first option receives the focus. up arrow Moves focus to the previous option. down arrow Moves focus to the next option. enter Toggles the selected state of the focused option. space Toggles the selected state of the focused option. home Moves focus to the first option. end Moves focus to the last option. shift + down arrow Moves focus to the next option and toggles the selection state. shift + up arrow Moves focus to the previous option and toggles the selection state. shift + space Selects the items between the most recently selected option and the focused option. control + shift + home Selects the focused options and all the options up to the first one. control + shift + end Selects the focused options and all the options down to the first one. control + a Selects all options. Buttons Keyboard Support Key Function enter Executes button action. space Executes button action.",
-          examples: {
-            typescript: '<span id="lb">Options</span>\n<p-picklist ariaLabelledBy="lb" />\n\n<p-picklist ariaLabel="City" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -44367,9 +44815,7 @@ export class PopoverTemplateDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader ProgressBar components uses progressbar role along with aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props.",
-          examples: {
-            typescript: '<span id="label_status">Status</span>\n<p-progressbar aria-labelledby="label_status" />\n\n<p-progressbar aria-label="Status" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -44662,9 +45108,7 @@ export class ProgressbarTemplateDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.",
-          examples: {
-            typescript: '<p-progress-spinner aria-label="Loading"></p-progress-spinner>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -44832,9 +45276,7 @@ export class ProgressspinnerCustomDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader RadioButton component uses a hidden native radio button element 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 ariaLabelledBy , ariaLabel props.",
-          examples: {
-            typescript: '<label for="rb1">One</label>\n<p-radiobutton inputId="rb1" />\n\n<span id="rb2">Two</span>\n<p-radiobutton ariaLabelledBy="rb2" />\n\n<p-radiobutton ariaLabel="Three" />'
-          }
+          examples: null
         },
         {
           id: "disabled",
@@ -46186,303 +46628,43 @@ export class RippleDefaultDemo {}`
           id: "basic",
           label: "Basic",
           description: "VirtualScroller requires items as the data to display, itemSize for the dimensions of an item and item template are required on component. In addition, an initial array is required based on the total number of items to display. Size of the viewport is configured using scrollWidth , scrollHeight properties directly or with CSS width and height styles.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                        {{ item }}
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerBasicDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "delay",
           label: "Delay",
           description: "Scroll delay is adjusted by using delay property.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex flex-wrap justify-center gap-4">
-            <div>
-                <span class="font-bold block mb-2">No Delay</span>
-                <p-virtualscroller [items]="items" [itemSize]="50" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-            <div>
-                <span class="font-bold block mb-2">150ms</span>
-                <p-virtualscroller [items]="items" [itemSize]="50" [delay]="150" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-            <div>
-                <span class="font-bold block mb-2">500ms</span>
-                <p-virtualscroller [items]="items" [itemSize]="50" [delay]="500" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerDelayDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "grid",
           label: "Grid",
           description: "Scrolling can be enabled vertically and horizontally when orientation is set as both . In this mode, itemSize should be an array where first value is the height of an item and second is the width.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="[50, 100]" orientation="both" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                        <div *ngFor="let el of item" style="width: 100px">{{ el }}</div>
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerGridDemo implements OnInit {
-    items!: string[][];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`));
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "horizontal",
           label: "Horizontal",
           description: "Setting orientation to horizontal enables scrolling horizontally. In this case, the itemSize should refer to the width of an item.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="50" scrollHeight="200px" orientation="horizontal" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" style="writing-mode: vertical-lr; width: 50px;" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }">
-                        {{ item }}
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerHorizontalDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "lazyload",
           label: "lazyload-doc",
           description: "Lazy mode is handy to deal with large datasets where instead of loading the entire data, small chunks of data are loaded on demand by invoking onLazyLoad callback everytime scrolling requires a new chunk. To implement lazy loading, enable lazy attribute, initialize your data as a placeholder with a length and finally implement a method callback using onLazyLoad that actually loads a chunk from a datasource. onLazyLoad gets an event object that contains information about the chunk of data to load such as the index and number of items to load. Notice that a new template called loadingItem is also required to display as a placeholder while the new items are being loaded.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-interface LazyEvent {
-    first: number;
-    last: number;
-}
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" [loading]="lazyLoading" [lazy]="true" (onLazyLoad)="onLazyLoad($event)" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                        {{ item }}
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [VirtualScrollerModule]
-})
-export class ScrollerLazyloadDemo implements OnInit {
-    items!: string[];
-    lazyLoading: boolean = true;
-    loadLazyTimeout: any;
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 });
-    }
-
-    onLazyLoad(event: LazyEvent) {
-        this.lazyLoading = true;
-        
-        if (this.loadLazyTimeout) {
-            clearTimeout(this.loadLazyTimeout);
-        }
-        
-        //imitate delay of a backend call
-        this.loadLazyTimeout = setTimeout(
-            () => {
-                const { first, last } = event;
-                const lazyItems = [...this.items];
-        
-                for (let i = first; i < last; i++) {
-                    lazyItems[i] = \`Item #\${i}\`;
-                }
-        
-                this.items = lazyItems;
-                this.lazyLoading = false;
-                this.cd.markForCheck();
-            },
-            Math.random() * 1000 + 250
-        );
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "loader",
           label: "loader-doc",
           description: "Busy state is enabled by adding showLoader property which blocks the UI with a modal by default. Alternatively, loader template can be used to customize items e.g. with Skeleton .",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { SkeletonModule } from 'primeng/skeleton';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex flex-wrap justify-center gap-4">
-            <div>
-                <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-            <div>
-                <p-virtualscroller [items]="items" [itemSize]="50" [showLoader]="true" [delay]="250" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                    <ng-template #item let-item let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            {{ item }}
-                        </div>
-                    </ng-template>
-                    <ng-template pTemplate="loader" let-options="options">
-                        <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                            <p-skeleton [width]="options.even ? '60%' : '50%'" height="1.3rem"></p-skeleton>
-                        </div>
-                    </ng-template>
-                </p-virtualscroller>
-            </div>
-        </div>
-    \`,
-    standalone: true,
-    imports: [SkeletonModule, VirtualScrollerModule]
-})
-export class ScrollerLoaderDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "programmatic",
           label: "Programmatic",
           description: "Scrolling to a specific index can be done with the scrollToIndex function.",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex flex-col items-center gap-4">
-            <p-button label="Reset" (click)="reset()" />
-            <p-virtualscroller #sc [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-                        {{ item }}
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [ButtonModule, VirtualScrollerModule]
-})
-export class ScrollerProgrammaticDemo implements OnInit {
-    items: string[] = [];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-
-    reset() {
-        this.sc.scrollToIndex(0, 'smooth');
-    }
-}`
-          }
+          examples: null
         },
         {
           id: "scrolloptions",
@@ -46494,51 +46676,7 @@ export class ScrollerProgrammaticDemo implements OnInit {
           id: "template",
           label: "Template",
           description: "Scroller content is customizable by using ng-template . Valid values are content , item , loader and loadericon",
-          examples: {
-            typescript: `import { Component, OnInit } from '@angular/core';
-import { SkeletonModule } from 'primeng/skeleton';
-import { VirtualScrollerModule } from 'primeng/virtualscroller';
-
-@Component({
-    template: \`
-        <div class="card flex justify-center">
-            <p-virtualscroller [items]="items" [itemSize]="25 * 7" [showLoader]="true" [delay]="250" [numToleratedItems]="20" styleClass="border border-surface" [style]="{ width: '200px', height: '200px' }">
-                <ng-template #item let-item let-options="options">
-                    <div class="flex flex-col align-items-strech" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }">
-                        <div class="flex items-center px-2" style="height: 25px">Item: {{ item }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Index: {{ options.index }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Count: {{ options.count }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">First: {{ options.first }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Last: {{ options.last }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Even: {{ options.even }}</div>
-                        <div class="flex items-center px-2" style="height: 25px">Odd: {{ options.odd }}</div>
-                    </div>
-                </ng-template>
-                <ng-template #loader let-options="options">
-                    <div class="flex flex-col items-stretch" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }">
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
-                        <div class="flex items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                    </div>
-                </ng-template>
-            </p-virtualscroller>
-        </div>
-    \`,
-    standalone: true,
-    imports: [SkeletonModule, VirtualScrollerModule]
-})
-export class ScrollerTemplateDemo implements OnInit {
-    items!: string[];
-
-    ngOnInit() {
-        this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
-    }
-}`
-          }
+          examples: null
         }
       ],
       api: {
@@ -47344,9 +47482,7 @@ export class ScrolltopElementDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The select element has a combobox role in addition to aria-haspopup and aria-expanded attributes. If the editable option is enabled aria-autocomplete is also added. The relation between the combobox and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which option to read during keyboard navigation within the popup list. The popup list has an id that refers to the aria-controls attribute of the combobox element and uses listbox as the role. Each list item has an option role, an id to match the aria-activedescendant of the input element along with aria-label , aria-selected and aria-disabled attributes. If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.",
-          examples: {
-            typescript: '<span id="dd1">Options</span>\n<p-select ariaLabelledBy="dd1"/>\n\n<p-select ariaLabel="Options"/>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -49383,6 +49519,16 @@ export class SelectVirtualscrollDemo {
             variable: "--p-select-lg-padding-y",
             description: "Lg padding y of root"
           },
+          {
+            token: "select.font.weight",
+            variable: "--p-select-font-weight",
+            description: "Font weight of root"
+          },
+          {
+            token: "select.font.size",
+            variable: "--p-select-font-size",
+            description: "Font size of root"
+          },
           {
             token: "select.dropdown.width",
             variable: "--p-select-dropdown-width",
@@ -49468,6 +49614,11 @@ export class SelectVirtualscrollDemo {
             variable: "--p-select-option-selected-focus-color",
             description: "Selected focus color of option"
           },
+          {
+            token: "select.option.selected.font.weight",
+            variable: "--p-select-option-selected-font-weight",
+            description: "Font weight of a selected option"
+          },
           {
             token: "select.option.padding",
             variable: "--p-select-option-padding",
@@ -49478,6 +49629,16 @@ export class SelectVirtualscrollDemo {
             variable: "--p-select-option-border-radius",
             description: "Border radius of option"
           },
+          {
+            token: "select.option.font.weight",
+            variable: "--p-select-option-font-weight",
+            description: "Font weight of option"
+          },
+          {
+            token: "select.option.font.size",
+            variable: "--p-select-option-font-size",
+            description: "Font size of option"
+          },
           {
             token: "select.option.group.background",
             variable: "--p-select-option-group-background",
@@ -49493,6 +49654,11 @@ export class SelectVirtualscrollDemo {
             variable: "--p-select-option-group-font-weight",
             description: "Font weight of option group"
           },
+          {
+            token: "select.option.group.font.size",
+            variable: "--p-select-option-group-font-size",
+            description: "Font size of option group"
+          },
           {
             token: "select.option.group.padding",
             variable: "--p-select-option-group-padding",
@@ -50371,9 +50537,7 @@ export class SkeletonShapesDemo {}`
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Slider element component uses slider role on the handle in addition to the aria-orientation , aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and ariaLabel props.",
-          examples: {
-            typescript: '<span id="label_number">Number</span>\n<p-slider ariaLabelledBy="label_number" />\n\n<p-slider ariaLabel="Number" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -50946,9 +51110,7 @@ export class SliderVerticalDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the aria-labelledby or aria-label props. Addititonally the button includes includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the button.",
-          examples: {
-            typescript: '<p-speeddial aria-label="Options" />'
-          }
+          examples: null
         },
         {
           id: "circle",
@@ -51791,9 +51953,7 @@ export class SpeeddialTooltipDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader SplitButton component renders two native button elements, main button uses the label property to define aria-label by default which can be customized with buttonProps . Dropdown button requires an explicit definition to describe it using menuButtonProps option and also includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the dropdown button.",
-          examples: {
-            typescript: `<p-splitbutton [buttonProps]="{'aria-label': 'Default Action'}" [menuButtonProps]="{'aria-label': 'More Options'}" />`
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -53877,6 +54037,11 @@ export class StepperVerticalDemo {}`
             variable: "--p-stepper-step-title-font-weight",
             description: "Font weight of step title"
           },
+          {
+            token: "stepper.step.title.font.size",
+            variable: "--p-stepper-step-title-font-size",
+            description: "Font size of step title"
+          },
           {
             token: "stepper.step.number.background",
             variable: "--p-stepper-step-number-background",
@@ -60184,6 +60349,11 @@ export class TabsTabmenuDemo {
             variable: "--p-tabs-tab-font-weight",
             description: "Font weight of tab"
           },
+          {
+            token: "tabs.tab.font.size",
+            variable: "--p-tabs-tab-font-size",
+            description: "Font size of tab"
+          },
           {
             token: "tabs.tab.margin",
             variable: "--p-tabs-tab-margin",
@@ -60922,6 +61092,16 @@ export class TerminalBasicDemo {
             variable: "--p-terminal-border-radius",
             description: "Border radius of root"
           },
+          {
+            token: "terminal.font.weight",
+            variable: "--p-terminal-font-weight",
+            description: "Font weight of root"
+          },
+          {
+            token: "terminal.font.size",
+            variable: "--p-terminal-font-size",
+            description: "Font size of root"
+          },
           {
             token: "terminal.prompt.gap",
             variable: "--p-terminal-prompt-gap",
@@ -60944,9 +61124,7 @@ export class TerminalBasicDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby , aria-label props.",
-          examples: {
-            typescript: '<label for="address1">Address 1</label>\n<textarea pTextarea id="address1"></textarea>\n\n<span id="address2">Address 2</span>\n<textarea pTextarea aria-labelledby="address2"></textarea>\n\n<textarea pTextarea aria-label="Address Details"></textarea>'
-          }
+          examples: null
         },
         {
           id: "autoresize",
@@ -61508,6 +61686,16 @@ export class TextareaTemplatedrivenformsDemo {
             token: "textarea.lg.padding.y",
             variable: "--p-textarea-lg-padding-y",
             description: "Lg padding y of root"
+          },
+          {
+            token: "textarea.font.weight",
+            variable: "--p-textarea-font-weight",
+            description: "Font weight of root"
+          },
+          {
+            token: "textarea.font.size",
+            variable: "--p-textarea-font-size",
+            description: "Font size of root"
           }
         ]
       }
@@ -62414,6 +62602,21 @@ export class TieredmenuTemplateDemo implements OnInit {
             variable: "--p-tieredmenu-item-icon-active-color",
             description: "Icon active color of item"
           },
+          {
+            token: "tieredmenu.item.icon.size",
+            variable: "--p-tieredmenu-item-icon-size",
+            description: "Icon size of item"
+          },
+          {
+            token: "tieredmenu.item.label.font.weight",
+            variable: "--p-tieredmenu-item-label-font-weight",
+            description: "Font weight of item label"
+          },
+          {
+            token: "tieredmenu.item.label.font.size",
+            variable: "--p-tieredmenu-item-label-font-size",
+            description: "Font size of item label"
+          },
           {
             token: "tieredmenu.submenu.mobile.indent",
             variable: "--p-tieredmenu-submenu-mobile-indent",
@@ -63977,9 +64180,7 @@ export class ToastTemplateDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "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 ariaLabelledBy or ariaLabel 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.",
-          examples: {
-            typescript: '<span id="rememberme">Remember Me</span>\n<p-togglebutton ariaLabelledBy="rememberme" />\n\n<p-togglebutton ariaLabel="Remember Me" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -64470,6 +64671,11 @@ export class TogglebuttonTemplatedrivenformsDemo {
             variable: "--p-togglebutton-gap",
             description: "Gap of root"
           },
+          {
+            token: "togglebutton.font.size",
+            variable: "--p-togglebutton-font-size",
+            description: "Font size of root"
+          },
           {
             token: "togglebutton.font.weight",
             variable: "--p-togglebutton-font-weight",
@@ -64647,9 +64853,7 @@ export class TogglebuttonTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader InputSwitch 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 ariaLabelledBy , ariaLabel props.",
-          examples: {
-            typescript: '<label for="switch1">Remember Me</label>\n<p-toggleswitch inputId="switch1" />\n\n<span id="switch2">Remember Me</span>\n<p-toggleswitch ariaLabelledBy="switch2" />\n\n<p-toggleswitch ariaLabel="Remember Me" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -65241,9 +65445,7 @@ export class ToggleswitchTemplatedrivenformsDemo {
           id: "accessibility",
           label: "Accessibility",
           description: "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.",
-          examples: {
-            typescript: '<p-toolbar aria-label="Actions">\n    Content\n</p-toolbar>'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -65937,6 +66139,16 @@ export class TooltipPositionDemo {}`
             token: "tooltip.color",
             variable: "--p-tooltip-color",
             description: "Color of root"
+          },
+          {
+            token: "tooltip.font.weight",
+            variable: "--p-tooltip-font-weight",
+            description: "Font weight of root"
+          },
+          {
+            token: "tooltip.font.size",
+            variable: "--p-tooltip-font-size",
+            description: "Font size of root"
           }
         ]
       }
@@ -67295,6 +67507,21 @@ export class TreeVirtualscrolllazyDemo implements OnInit {
             variable: "--p-tree-node-icon-selected-color",
             description: "Selected color of node icon"
           },
+          {
+            token: "tree.node.label.font.weight",
+            variable: "--p-tree-node-label-font-weight",
+            description: "Font weight of node label"
+          },
+          {
+            token: "tree.node.label.font.size",
+            variable: "--p-tree-node-label-font-size",
+            description: "Font size of node label"
+          },
+          {
+            token: "tree.node.label.selected.font.weight",
+            variable: "--p-tree-node-label-selected-font-weight",
+            description: "Font weight of a selected node label"
+          },
           {
             token: "tree.node.toggle.button.border.radius",
             variable: "--p-tree-node-toggle-button-border-radius",
@@ -67377,9 +67604,7 @@ export class TreeVirtualscrolllazyDemo implements OnInit {
           id: "accessibility",
           label: "Accessibility",
           description: "Screen Reader Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label , aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected . Checkbox and toggle icons are hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem. If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.",
-          examples: {
-            typescript: '<span id="dd1">Options</span>\n<p-treeselect ariaLabelledBy="dd1" />\n\n<p-treeselect ariaLabel="Options" />'
-          }
+          examples: null
         },
         {
           id: "basic",
@@ -68900,6 +69125,16 @@ export class TreeselectVirtualscrollDemo implements OnInit {
             variable: "--p-treeselect-lg-padding-y",
             description: "Lg padding y of root"
           },
+          {
+            token: "treeselect.font.weight",
+            variable: "--p-treeselect-font-weight",
+            description: "Font weight of root"
+          },
+          {
+            token: "treeselect.font.size",
+            variable: "--p-treeselect-font-size",
+            description: "Font size of root"
+          },
           {
             token: "treeselect.dropdown.width",
             variable: "--p-treeselect-dropdown-width",
@@ -72652,6 +72887,11 @@ export class TreetableTemplateDemo implements OnInit {
             variable: "--p-treetable-column-title-font-weight",
             description: "Font weight of column title"
           },
+          {
+            token: "treetable.column.title.font.size",
+            variable: "--p-treetable-column-title-font-size",
+            description: "Font size of column title"
+          },
           {
             token: "treetable.row.background",
             variable: "--p-treetable-row-background",
@@ -72727,6 +72967,16 @@ export class TreetableTemplateDemo implements OnInit {
             variable: "--p-treetable-body-cell-selected-border-color",
             description: "Selected border color of body cell"
           },
+          {
+            token: "treetable.body.cell.font.weight",
+            variable: "--p-treetable-body-cell-font-weight",
+            description: "Font weight of body cell"
+          },
+          {
+            token: "treetable.body.cell.font.size",
+            variable: "--p-treetable-body-cell-font-size",
+            description: "Font size of body cell"
+          },
           {
             token: "treetable.footer.cell.background",
             variable: "--p-treetable-footer-cell-background",
@@ -72752,6 +73002,11 @@ export class TreetableTemplateDemo implements OnInit {
             variable: "--p-treetable-column-footer-font-weight",
             description: "Font weight of column footer"
           },
+          {
+            token: "treetable.column.footer.font.size",
+            variable: "--p-treetable-column-footer-font-size",
+            description: "Font size of column footer"
+          },
           {
             token: "treetable.footer.background",
             variable: "--p-treetable-footer-background",
@@ -73251,18 +73506,7 @@ export class TreetableTemplateDemo implements OnInit {
           id: "example-",
           label: "Example-",
           description: "Unstyled components require styling using your preferred approach. We recommend using Tailwind CSS with PassThrough attributes, a combination that works seamlessly together. The tailwindcss-primeui even provides special variants such as p-outlined: , p-vertical for the PrimeNG components. The example below demonstrates how to style a button component with Tailwind CSS using PassThrough attributes. Before you begin, refer to the pass through section in the button documentation to familiarize yourself with the component's internal structure and PassThrough attributes. In this example, we'll target the root , label and icon elements to apply custom styles.",
-          examples: {
-            typescript: `<p-button
-    label="Search"
-    icon="pi pi-search"
-    [unstyled]="true"
-    [pt]="{ 
-        root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2', 
-        label: 'text-white font-bold text-lg', 
-        icon: 'text-white !text-xl' 
-    }"
-/>`
-          }
+          examples: null
         },
         {
           id: "global-",
@@ -73296,17 +73540,13 @@ export class TreetableTemplateDemo implements OnInit {
           id: "basic-",
           label: "Basic-",
           description: "PrimeIcons use the pi pi-&#123;icon&#125; syntax such as pi pi-check . A standalone icon can be displayed using an element such as i or span",
-          examples: {
-            typescript: '<i class="pi pi-check"></i>\n<i class="pi pi-times"></i>\n<span class="pi pi-search"></span>\n<span class="pi pi-user"></span>'
-          }
+          examples: null
         },
         {
           id: "color-",
           label: "Color-",
           description: "Icon color is defined with the color property which is inherited from parent by default.",
-          examples: {
-            typescript: '<i class="pi pi-check" style="color: slateblue"></i>\n<i class="pi pi-times" style="color: green"></i>\n<i class="pi pi-search" style="color: var(--primary-color)"></i>\n<i class="pi pi-user" style="color: #708090"></i>'
-          }
+          examples: null
         },
         {
           id: "constants-",
@@ -73348,17 +73588,13 @@ export class TreetableTemplateDemo implements OnInit {
           id: "size-",
           label: "Size-",
           description: "Size of an icon is controlled with the font-size property of the element.",
-          examples: {
-            typescript: '<i class="pi pi-check" style="font-size: 1rem"></i>\n<i class="pi pi-times" style="font-size: 1.5rem"></i>\n<i class="pi pi-search" style="font-size: 2rem"></i>\n<i class="pi pi-user" style="font-size: 2.5rem"></i>'
-          }
+          examples: null
         },
         {
           id: "spin-",
           label: "Spin-",
           description: "Special pi-spin class applies infinite rotation to an icon.",
-          examples: {
-            typescript: '<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>\n<i class="pi pi-spin pi-cog" style="font-size: 2rem"></i>'
-          }
+          examples: null
         }
       ]
     },
@@ -73372,33 +73608,25 @@ export class TreetableTemplateDemo implements OnInit {
           id: "fontawesome-",
           label: "Fontawesome-",
           description: "Font Awesome is a popular icon library with a wide range of icons.",
-          examples: {
-            typescript: '<p-dropdown>\n    <ng-template #dropdownicon>\n        <i class="fa-light fa-chevron-down"></i>\n    </ng-template>\n</p-dropdown>'
-          }
+          examples: null
         },
         {
           id: "image-",
           label: "Image-",
           description: "Any type of image can be used as an icon.",
-          examples: {
-            typescript: '<p-dropdown>\n    <ng-template #dropdownicon>\n        <img alt="dropdown icon" src="/assets/icons/arrow_down.png">\n    </ng-template>\n</p-dropdown>'
-          }
+          examples: null
         },
         {
           id: "material-",
           label: "Material-",
           description: "Material icons is the official icon library based on Google Material Design.",
-          examples: {
-            typescript: '<p-dropdown>\n    <ng-template #dropdownicon>\n        <span class="material-icons">arrow_drop_down</span>\n    </ng-template>\n</p-dropdown>'
-          }
+          examples: null
         },
         {
           id: "svg-",
           label: "Svg-",
           description: "Inline SVGs are embedded inside the dom.",
-          examples: {
-            typescript: '<p-dropdown>\n    <ng-template #dropdownicon>\n        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\n            <g id="chevron-down">\n                <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>\n            </g>\n        </svg>\n    </ng-template>\n</p-dropdown>'
-          }
+          examples: null
         }
       ]
     },
@@ -73462,9 +73690,7 @@ export class TreetableTemplateDemo implements OnInit {
           id: "animations-",
           label: "Animations-",
           description: "The plugin also adds extended animation utilities that can be used with the styleclass and animateonscroll directives.",
-          examples: {
-            typescript: '<p-select [(ngModel)]="animation" [options]="animations" placeholder="Select One" class="w-full sm:w-44" />\n<div class="py-8 overflow-hidden">\n   <div [ngClass]="dynamicAnimationClasses"></div>\n</div>'
-          }
+          examples: null
         },
         {
           id: "colorpalette-",
@@ -73839,7 +74065,7 @@ export class TreetableTemplateDemo implements OnInit {
 // package.json
 var package_default = {
   name: "@primeng/mcp",
-  version: "21.1.1",
+  version: "21.1.3",
   author: "PrimeTek Informatics",
   description: "Model Context Protocol (MCP) server for PrimeNg component library",
   homepage: "https://primeng.org/",