@quidgest/ui 0.26.0 → 0.27.0

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.26.0",
+  "version": "0.27.0",
   "components": [
     {
       "name": "QAccordion",
@@ -129,7 +129,7 @@
         {
           "title": "With Default Expanded",
           "description": "Accordion with one section expanded by default.",
-          "code": "<QAccordion :model-value=\"2\" />"
+          "code": "<QAccordion model-value=\"2\" />"
         },
         {
           "title": "Multiple",
@@ -227,27 +227,27 @@
         {
           "title": "With Image",
           "description": "Displays an avatar with an image.",
-          "code": "<QAvatar :src=\"https://i.pravatar.cc/150?img=10\" :alt=\"User Avatar\" />"
+          "code": "<QAvatar src=\"https://i.pravatar.cc/150?img=10\" alt=\"User Avatar\" />"
         },
         {
           "title": "With Initials",
           "description": "Displays an avatar with initials.",
-          "code": "<QAvatar :initials=\"CS\" />"
+          "code": "<QAvatar initials=\"CS\" />"
         },
         {
           "title": "Custom Size",
           "description": "Displays an avatar with a custom size.",
-          "code": "<QAvatar :size=\"120px\" :src=\"https://i.pravatar.cc/150?img=10\" :alt=\"User Avatar\" />"
+          "code": "<QAvatar size=\"120px\" src=\"https://i.pravatar.cc/150?img=10\" alt=\"User Avatar\" />"
         },
         {
           "title": "Square Shape",
           "description": "Displays an avatar with a square shape.",
-          "code": "<QAvatar :shape=\"square\" :initials=\"SQ\" :src=\"https://i.pravatar.cc/150?img=10\" :alt=\"User Avatar\" />"
+          "code": "<QAvatar shape=\"square\" initials=\"SQ\" src=\"https://i.pravatar.cc/150?img=10\" alt=\"User Avatar\" />"
         },
         {
           "title": "Custom Colors",
           "description": "Displays an avatar with a custom background color. Text color is automatically adjusted for readability.",
-          "code": "<QAvatar :initials=\"CS\" :color=\"#a22eb9\" />"
+          "code": "<QAvatar initials=\"CS\" color=\"#a22eb9\" />"
         }
       ]
     },
@@ -550,6 +550,100 @@
         }
       ]
     },
+    {
+      "name": "QBreadcrumbs",
+      "description": "A page-navigation trail. Each crumb can be a route (`to`, requires `vue-router` in the host app), a link (`href`), or static text — the last crumb always renders as static text with `aria-current=\"page\"`, regardless of its props.",
+      "meta": {
+        "props": [
+          {
+            "name": "id",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The component unique identifier.",
+            "required": false,
+            "category": "Identification"
+          },
+          {
+            "name": "maxVisible",
+            "type": {
+              "kind": "primitive",
+              "name": "number"
+            },
+            "description": "Maximum number of crumbs to show before collapsing the middle ones into\nan ellipsis control that opens a dropdown. The first and current crumb\nplus the ellipsis control always take up 3 of these slots, so values\nbelow `3` are treated as `3`.",
+            "default": "3",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "ariaLabel",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "Accessible label for the `nav` landmark.",
+            "required": false,
+            "category": "Accessibility"
+          },
+          {
+            "name": "icons",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom icons for the default separator and the collapsed-items control.",
+            "default": "DEFAULT_ICONS",
+            "required": false,
+            "category": "Configuration"
+          },
+          {
+            "name": "texts",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom accessible strings.",
+            "default": "DEFAULT_TEXTS",
+            "required": false,
+            "category": "Configuration"
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "default",
+            "description": "The `QBreadcrumb` children that make up the trail."
+          },
+          {
+            "name": "separator",
+            "description": "Overrides the separator rendered between every crumb, all at once.\nFalls back to the chevron icon (`icons.separator`) when omitted."
+          }
+        ]
+      },
+      "examples": [
+        {
+          "title": "Default",
+          "description": "The full trail, with a leading icon on each crumb.",
+          "code": "<q-breadcrumbs v-bind=\"args\">\n\t\t\t\t<q-breadcrumb label=\"Home\" href=\"/\" :icon=\"{ icon: 'home' }\" />\n\t\t\t\t<q-breadcrumb label=\"Documents\" href=\"/documents\" :icon=\"{ icon: 'folder' }\" />\n\t\t\t\t<q-breadcrumb label=\"Quarterly Report\" :icon=\"{ icon: 'file-document' }\" />\n\t\t\t</q-breadcrumbs>"
+        },
+        {
+          "title": "Collapsed",
+          "description": "A long trail collapses its middle crumbs into an ellipsis control that opens a dropdown, keeping the first and current crumb visible. The control has an accessible name (`aria-label`) and the dropdown is keyboard operable.",
+          "code": "<q-breadcrumbs v-bind=\"args\">\n\t\t\t\t<q-breadcrumb label=\"Home\" href=\"/\" :icon=\"{ icon: 'home' }\" />\n\t\t\t\t<q-breadcrumb label=\"Documents\" href=\"/documents\" :icon=\"{ icon: 'folder' }\" />\n\t\t\t\t<q-breadcrumb label=\"Projects\" href=\"/documents/projects\" :icon=\"{ icon: 'folder' }\" />\n\t\t\t\t<q-breadcrumb label=\"Quarterly Report\" :icon=\"{ icon: 'file-document' }\" />\n\t\t\t</q-breadcrumbs>"
+        },
+        {
+          "title": "Mixed Crumb Types",
+          "description": "A mix of the three supported crumb kinds: a route (`to`), a link (`href`), and static text (neither).",
+          "code": "<q-breadcrumbs v-bind=\"args\">\n\t\t\t\t<q-breadcrumb label=\"Home (route)\" to=\"/\" />\n\t\t\t\t<q-breadcrumb label=\"Archive (static, no navigation)\" />\n\t\t\t\t<q-breadcrumb label=\"Reports (link)\" href=\"/reports\" />\n\t\t\t\t<q-breadcrumb label=\"Quarterly Report (current)\" />\n\t\t\t</q-breadcrumbs>"
+        },
+        {
+          "title": "Custom Separator",
+          "description": "Overriding the default chevron separator for the whole trail at once, via the `separator` slot on `QBreadcrumbs`.",
+          "code": "<q-breadcrumbs v-bind=\"args\">\n\t\t\t\t<q-breadcrumb label=\"Home\" href=\"/\" />\n\t\t\t\t<q-breadcrumb label=\"Documents\" href=\"/documents\" />\n\t\t\t\t<q-breadcrumb label=\"Quarterly Report\" />\n\t\t\t\t<template #separator>/</template>\n\t\t\t</q-breadcrumbs>"
+        }
+      ]
+    },
     {
       "name": "QButton",
       "description": "Displays a button that triggers an action.",
@@ -740,22 +834,22 @@
         {
           "title": "Default",
           "description": "The default button, suitable for most situations. Displays a label provided by the `label` prop.",
-          "code": "<QButton :label=\"Button\" />"
+          "code": "<QButton label=\"Button\" />"
         },
         {
           "title": "Icons",
           "description": "Displays an icon alongside the button label.",
-          "code": "<div style=\"display: flex; align-items: center; gap: 0.25rem; flex-direction: column; width: fit-content\">\n\t\t\t  <div style=\"display: flex; gap: 0.25rem\">\n\t\t\t  \t<q-button v-bind=\"args\" :label=\"undefined\" icon-pos=\"start\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"start\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"end\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t  </div>\n\t\t\t  <div style=\"display: flex; gap: 0.25rem\">\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"top\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"bottom\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t  </div>\n\t\t\t</div>"
+          "code": "<div style=\"display: flex; align-items: center; gap: 0.25rem; flex-direction: column; width: fit-content\">\n\t\t\t  <div style=\"display: flex; gap: 0.25rem\">\n\t\t\t  \t<q-button v-bind=\"args\" :label=\"undefined\" aria-label=\"Mark as done\" icon-pos=\"start\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"start\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"end\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t  </div>\n\t\t\t  <div style=\"display: flex; gap: 0.25rem\">\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"top\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t    <q-button v-bind=\"args\" icon-pos=\"bottom\">\n\t\t\t      <q-icon icon=\"check-circle\" />\n\t\t\t    </q-button>\n\t\t\t  </div>\n\t\t\t</div>"
         },
         {
           "title": "Append",
           "description": "Trailing content via the `append` slot — for example a chevron beside a leading icon. Labeled buttons tighten end padding when `#append` contains a `.q-icon`.",
-          "code": "<div style=\"display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap\">\n\t\t\t\t<q-button v-bind=\"args\">\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<q-icon icon=\"chevron-down\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-button>\n\t\t\t\t<q-button v-bind=\"args\">\n\t\t\t\t\t<q-icon icon=\"dots-horizontal\" />\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<q-icon icon=\"chevron-down\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-button>\n\t\t\t\t<q-button v-bind=\"args\" :label=\"undefined\">\n\t\t\t\t\t<q-icon icon=\"dots-horizontal\" />\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<q-icon icon=\"chevron-down\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-button>\n\t\t\t</div>"
+          "code": "<div style=\"display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap\">\n\t\t\t\t<q-button v-bind=\"args\">\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<q-icon icon=\"chevron-down\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-button>\n\t\t\t\t<q-button v-bind=\"args\">\n\t\t\t\t\t<q-icon icon=\"dots-horizontal\" />\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<q-icon icon=\"chevron-down\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-button>\n\t\t\t\t<q-button v-bind=\"args\" :label=\"undefined\" aria-label=\"More\">\n\t\t\t\t\t<q-icon icon=\"dots-horizontal\" />\n\t\t\t\t\t<template #append>\n\t\t\t\t\t\t<q-icon icon=\"chevron-down\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-button>\n\t\t\t</div>"
         },
         {
           "title": "Loading",
           "description": "Displays a loading animation and cannot be clicked.",
-          "code": "<QButton :label=\"Submit\" :loading=\"true\" />"
+          "code": "<QButton label=\"Submit\" :loading=\"true\" />"
         },
         {
           "title": "Color",
@@ -765,22 +859,22 @@
         {
           "title": "Disabled",
           "description": "Cannot be clicked.",
-          "code": "<QButton :label=\"Disabled\" :disabled=\"true\" />"
+          "code": "<QButton label=\"Disabled\" :disabled=\"true\" />"
         },
         {
           "title": "Borderless",
           "description": "Does not display the default outer border.",
-          "code": "<QButton :label=\"Borderless\" :borderless=\"true\" />"
+          "code": "<QButton label=\"Borderless\" :borderless=\"true\" />"
         },
         {
           "title": "Elevated",
           "description": "Features a subtle shadow for an elevated visual effect.",
-          "code": "<QButton :label=\"Elevated\" :borderless=\"true\" :elevated=\"true\" />"
+          "code": "<QButton label=\"Elevated\" :borderless=\"true\" :elevated=\"true\" />"
         },
         {
           "title": "Block",
           "description": "Occupies the available space.",
-          "code": "<QButton :label=\"Button\" :block=\"true\" />"
+          "code": "<QButton label=\"Button\" :block=\"true\" />"
         },
         {
           "title": "Effect",
@@ -1318,7 +1412,7 @@
         {
           "title": "Auto Play",
           "description": "Carousel with autoplay enabled, cycling through slides every 3 seconds. Indicators are also shown for better user experience.",
-          "code": "<QCarousel :slides=\"slides\" :show-indicators=\"true\" :auto-cycle-interval=\"3000\" :ride=\"carousel\" />"
+          "code": "<QCarousel :slides=\"slides\" :show-indicators=\"true\" :auto-cycle-interval=\"3000\" ride=\"carousel\" />"
         },
         {
           "title": "Non Wrapping",
@@ -1333,17 +1427,17 @@
         {
           "title": "Full Featured",
           "description": "A more complex example combining multiple features. Auto-playing, with controls and indicators, and a custom animation duration.",
-          "code": "<QCarousel :slides=\"slides\" :show-controls=\"true\" :show-indicators=\"true\" :auto-cycle-interval=\"4000\" :ride=\"carousel\" :wrap=\"true\" :animation-duration=\"800\" />"
+          "code": "<QCarousel :slides=\"slides\" :show-controls=\"true\" :show-indicators=\"true\" :auto-cycle-interval=\"4000\" ride=\"carousel\" :wrap=\"true\" :animation-duration=\"800\" />"
         },
         {
           "title": "Loading",
           "description": "Carousel in a loading state with a skeleton placeholder. This story demonstrates the `loading` prop in action.",
-          "code": "<QCarousel :slides=\"\" :show-controls=\"true\" :loading=\"true\" />"
+          "code": "<QCarousel :slides=\"[]\" :show-controls=\"true\" :loading=\"true\" />"
         },
         {
           "title": "Empty",
           "description": "Empty state example Demonstrates how to customize the `#empty` slot of QCarousel to show a friendly UI when there are no slides.",
-          "code": "<q-carousel v-bind=\"args\">\n        <template #empty>\n          <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center;\">\n            <img src=\"/placeholder.svg\" alt=\"Empty\" style=\"width: 120px; height: 120px; opacity: 0.6; margin-bottom: 1rem;\" />\n            <h3 style=\"margin: 0 0 0.5rem;\">No slides available</h3>\n            <p style=\"margin: 0 0 1rem; color: #666;\">Start by adding some slides to showcase your content.</p>\n            <QButton variant=\"bold\">\n              Add Slide\n            </QButton>\n          </div>\n        </template>\n      </q-carousel>"
+          "code": "<q-carousel v-bind=\"args\">\n        <template #empty>\n          <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center;\">\n            <img src=\"/placeholder.svg\" alt=\"Empty\" style=\"width: 120px; height: 120px; opacity: 0.6; margin-bottom: 1rem;\" />\n            <h3 style=\"margin: 0 0 0.5rem;\">No slides available</h3>\n            <p style=\"margin: 0 0 1rem; color: var(--q-theme-neutral-dark);\">Start by adding some slides to showcase your content.</p>\n            <QButton variant=\"bold\">\n              Add Slide\n            </QButton>\n          </div>\n        </template>\n      </q-carousel>"
         }
       ]
     },
@@ -1537,12 +1631,12 @@
         {
           "title": "Default",
           "description": "A default checkbox.",
-          "code": "<QCheckbox :label=\"Accept terms and conditions\" />"
+          "code": "<QCheckbox label=\"Accept terms and conditions\" />"
         },
         {
           "title": "Label Placement",
           "description": "A checkbox with a label positioned on the left side. Useful for layouts that require labels on the opposite side of the control.",
-          "code": "<QCheckbox :label=\"Accept terms and conditions\" :label-placement=\"left\" />"
+          "code": "<QCheckbox label=\"Accept terms and conditions\" label-placement=\"left\" />"
         },
         {
           "title": "Readonly",
@@ -1567,7 +1661,7 @@
         {
           "title": "Icons",
           "description": "A checkbox with custom icons for the checked and indeterminate states. This allows for a more personalized or context-specific design.",
-          "code": "<QCheckbox :model-value=\"true\" :label=\"Diferent icon\" :icons=\"{\n\t\t\tchecked: { icon: 'skip-next' },\n\t\t\tindeterminate: { icon: 'skip-next' }\n\t\t}\" />"
+          "code": "<QCheckbox :model-value=\"true\" label=\"Diferent icon\" :icons=\"{\n\t\t\tchecked: { icon: 'skip-next' },\n\t\t\tindeterminate: { icon: 'skip-next' }\n\t\t}\" />"
         },
         {
           "title": "Indeterminate",
@@ -1582,7 +1676,7 @@
         {
           "title": "Borderless",
           "description": "Displays borderless checkbox.",
-          "code": "<QCheckbox :label=\"Accept terms and conditions\" :borderless=\"true\" :model-value=\"true\" />"
+          "code": "<QCheckbox label=\"Accept terms and conditions\" :borderless=\"true\" :model-value=\"true\" />"
         }
       ]
     },
@@ -1936,32 +2030,27 @@
         {
           "title": "Placeholder",
           "description": "Provides a hint or example text inside the field.",
-          "code": "<QColorPicker :placeholder=\" #000000\" />"
+          "code": "<QColorPicker placeholder=\" #000000\" />"
         },
         {
           "title": "Readonly",
           "description": "Conveys a read-only appearance to the field.",
-          "code": "<QColorPicker :model-value=\"#000000\" :readonly=\"true\" />"
+          "code": "<QColorPicker model-value=\"#000000\" :readonly=\"true\" />"
         },
         {
           "title": "Disabled",
           "description": "Disables the field, preventing interaction with it.",
-          "code": "<QColorPicker :model-value=\"#000000\" :disabled=\"true\" />"
-        },
-        {
-          "title": "Label",
-          "description": "Provides a textual description for the field.",
-          "code": "<QColorPicker :model-value=\"#0c55ca\" :label=\"Background color\" />"
+          "code": "<QColorPicker model-value=\"#000000\" :disabled=\"true\" />"
         },
         {
           "title": "Required",
           "description": "Displays an asterisk (*) next to the label, to indicate that the field is required.",
-          "code": "<QColorPicker :label=\"Main color\" :required=\"true\" />"
+          "code": "<QColorPicker label=\"Main color\" :required=\"true\" />"
         },
         {
           "title": "White",
           "description": "Displays the field's visualization mode when the white color is selected, that has no contrast with the background.",
-          "code": "<QColorPicker :label=\"White color\" :model-value=\"#ffffff\" />"
+          "code": "<QColorPicker label=\"White color\" model-value=\"#ffffff\" />"
         }
       ]
     },
@@ -2342,27 +2431,27 @@
         {
           "title": "Placeholder",
           "description": "Provides a hint or example text inside the combobox.",
-          "code": "<QCombobox :placeholder=\"Radiohead\" />"
+          "code": "<QCombobox placeholder=\"Radiohead\" />"
         },
         {
           "title": "Readonly",
           "description": "Conveys a read-only appearance to the combobox.",
-          "code": "<QCombobox :model-value=\"arctic_monkeys\" :readonly=\"true\" />"
+          "code": "<QCombobox model-value=\"arctic_monkeys\" :readonly=\"true\" />"
         },
         {
           "title": "Disabled",
           "description": "Disables the combobox, preventing interaction with it.",
-          "code": "<QCombobox :model-value=\"radiohead\" :disabled=\"true\" />"
+          "code": "<QCombobox model-value=\"radiohead\" :disabled=\"true\" />"
         },
         {
           "title": "Clearable",
           "description": "Displays a clear button, allowing the user to clear the selected value.",
-          "code": "<QCombobox :model-value=\"radiohead\" :clearable=\"true\" />"
+          "code": "<QCombobox model-value=\"radiohead\" :clearable=\"true\" />"
         },
         {
           "title": "Loading",
           "description": "Displays a loading animation that lets users know content is being loaded.",
-          "code": "<QCombobox :items=\"\" :loading=\"true\" />"
+          "code": "<QCombobox :items=\"[]\" :loading=\"true\" />"
         },
         {
           "title": "Description In Items",
@@ -2607,47 +2696,47 @@
         {
           "title": "Date Only",
           "description": "Date-only picker with required field indication",
-          "code": "<QDateTimePicker :format=\"dd/MM/yyyy\" :label=\"Select Date\" :placeholder=\"Choose date\" />"
+          "code": "<QDateTimePicker format=\"dd/MM/yyyy\" label=\"Select Date\" placeholder=\"Choose date\" />"
         },
         {
           "title": "Date Time With Seconds",
           "description": "DateTime picker with seconds display",
-          "code": "<QDateTimePicker :format=\"dd/MM/yyyy HH:mm:ss\" :label=\"Select Date and Time\" :placeholder=\"Choose date and time\" />"
+          "code": "<QDateTimePicker format=\"dd/MM/yyyy HH:mm:ss\" label=\"Select Date and Time\" placeholder=\"Choose date and time\" />"
         },
         {
           "title": "Date Time 12 Hour Format",
           "description": "DateTime picker with 12-hour format (AM/PM)",
-          "code": "<QDateTimePicker :format=\"dd/MM/yyyy hh:mm a\" :label=\"Select Date and Time (12-hour format)\" :placeholder=\"Choose date and time\" />"
+          "code": "<QDateTimePicker format=\"dd/MM/yyyy hh:mm a\" label=\"Select Date and Time (12-hour format)\" placeholder=\"Choose date and time\" />"
         },
         {
           "title": "Time Only",
           "description": "Time-only picker",
-          "code": "<QDateTimePicker :format=\"HH:mm\" :label=\"Select Time\" :placeholder=\"HH:mm\" :model-value=\"14:00\" />"
+          "code": "<QDateTimePicker format=\"HH:mm\" label=\"Select Time\" placeholder=\"HH:mm\" model-value=\"14:00\" />"
         },
         {
           "title": "Time Only 12 Hour Format",
           "description": "Time-only picker with 12-hour format (AM/PM)",
-          "code": "<QDateTimePicker :format=\"hh:mm a\" :label=\"Select Time\" :placeholder=\"hh:mm a\" />"
+          "code": "<QDateTimePicker format=\"hh:mm a\" label=\"Select Time\" placeholder=\"hh:mm a\" />"
         },
         {
           "title": "Localized Picker",
           "description": "Localized DateTime picker (Portuguese)",
-          "code": "<QDateTimePicker :label=\"Selecionar data e hora\" :placeholder=\"Selecionar data e hora\" />"
+          "code": "<QDateTimePicker label=\"Selecionar data e hora\" placeholder=\"Selecionar data e hora\" />"
         },
         {
           "title": "Read Only",
           "description": "Read-only DateTime picker",
-          "code": "<QDateTimePicker :label=\"View Only Date and Time\" :readonly=\"true\" />"
+          "code": "<QDateTimePicker label=\"View Only Date and Time\" :readonly=\"true\" />"
         },
         {
           "title": "Disabled",
           "description": "Disabled DateTime picker",
-          "code": "<QDateTimePicker :label=\"Disabled Picker\" :disabled=\"true\" />"
+          "code": "<QDateTimePicker label=\"Disabled Picker\" :disabled=\"true\" />"
         },
         {
           "title": "Range",
           "description": "Range DateTime picker",
-          "code": "<QDateTimePicker :label=\"Select a date range\" :range=\"true\" />"
+          "code": "<QDateTimePicker label=\"Select a date range\" :range=\"true\" />"
         }
       ]
     },
@@ -2940,6 +3029,17 @@
             "required": false,
             "category": "Configuration"
           },
+          {
+            "name": "texts",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom text configurations.",
+            "default": "DEFAULT_TEXTS",
+            "required": false,
+            "category": "Configuration"
+          },
           {
             "name": "entryKey",
             "type": {
@@ -3003,32 +3103,32 @@
         {
           "title": "Dismissible",
           "description": "Displays an extra button on the header of the dialog, allowing the user to close it without interacting with the footer buttons.",
-          "code": "<QDialog :text=\"You clicked the button!\" :dismissible=\"true\" />"
+          "code": "<QDialog text=\"You clicked the button!\" :dismissible=\"true\" />"
         },
         {
           "title": "With Title",
           "description": "Displays a header with a custom title.",
-          "code": "<QDialog :text=\"You clicked the button!\" :title=\"What did you do?\" :dismissible=\"true\" />"
+          "code": "<QDialog text=\"You clicked the button!\" title=\"What did you do?\" :dismissible=\"true\" />"
         },
         {
           "title": "Flush",
           "description": "Edge-to-edge layout (no body inset or section dividers) — same chrome `QDialogProvider` uses for programmatic dialogs.",
-          "code": "<QDialog :title=\"Confirm\" :text=\"Edge-to-edge body and no section hairlines.\" :flush=\"true\" :dismissible=\"true\" />"
+          "code": "<QDialog title=\"Confirm\" text=\"Edge-to-edge body and no section hairlines.\" :flush=\"true\" :dismissible=\"true\" />"
         },
         {
           "title": "With Icon",
           "description": "Shows a custom icon instead of the default one.",
-          "code": "<QDialog :text=\"You clicked the button?\" :icon=\"{\n\t\t\ticon: 'help-circle-outline'\n\t\t}\" />"
+          "code": "<QDialog text=\"You clicked the button?\" :icon=\"{\n\t\t\ticon: 'help-circle-outline'\n\t\t}\" />"
         },
         {
           "title": "Custom Buttons",
           "description": "Custom buttons on the dialog allow the user to customize its look and behavior.",
-          "code": "<QDialog :text=\"What shall we do?\" :icon=\"{\n\t\t\ticon: 'help-circle-outline'\n\t\t}\" :buttons=\"[\n\t\t\t{\n\t\t\t\tid: 'scroll-btn',\n\t\t\t\ticon: {\n\t\t\t\t\ticon: 'arrow-up'\n\t\t\t\t},\n\t\t\t\taction: () => {\n\t\t\t\t\twindow.scrollTo({ top: 0, behavior: 'smooth' })\n\t\t\t\t},\n\t\t\t\tprops: {\n\t\t\t\t\tlabel: 'Scroll to Top',\n\t\t\t\t\tvariant: 'bold'\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'refresh-btn',\n\t\t\t\ticon: {\n\t\t\t\t\ticon: 'refresh'\n\t\t\t\t},\n\t\t\t\taction: () => {\n\t\t\t\t\tlocation.reload()\n\t\t\t\t},\n\t\t\t\tprops: {\n\t\t\t\t\tlabel: 'Refresh the page!',\n\t\t\t\t\tvariant: 'bold',\n\t\t\t\t\tcolor: 'danger'\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'cancel-btn',\n\t\t\t\ticon: {\n\t\t\t\t\ticon: 'cancel'\n\t\t\t\t},\n\t\t\t\tprops: {\n\t\t\t\t\tlabel: 'Cancel'\n\t\t\t\t}\n\t\t\t}\n\t\t]\" />"
+          "code": "<QDialog text=\"What shall we do?\" :icon=\"{\n\t\t\ticon: 'help-circle-outline'\n\t\t}\" :buttons=\"[\n\t\t\t{\n\t\t\t\tid: 'scroll-btn',\n\t\t\t\ticon: {\n\t\t\t\t\ticon: 'arrow-up'\n\t\t\t\t},\n\t\t\t\taction: () => {\n\t\t\t\t\twindow.scrollTo({ top: 0, behavior: 'smooth' })\n\t\t\t\t},\n\t\t\t\tprops: {\n\t\t\t\t\tlabel: 'Scroll to Top',\n\t\t\t\t\tvariant: 'bold'\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'refresh-btn',\n\t\t\t\ticon: {\n\t\t\t\t\ticon: 'refresh'\n\t\t\t\t},\n\t\t\t\taction: () => {\n\t\t\t\t\tlocation.reload()\n\t\t\t\t},\n\t\t\t\tprops: {\n\t\t\t\t\tlabel: 'Refresh the page!',\n\t\t\t\t\tvariant: 'bold',\n\t\t\t\t\tcolor: 'danger'\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'cancel-btn',\n\t\t\t\ticon: {\n\t\t\t\t\ticon: 'cancel'\n\t\t\t\t},\n\t\t\t\tprops: {\n\t\t\t\t\tlabel: 'Cancel'\n\t\t\t\t}\n\t\t\t}\n\t\t]\" />"
         },
         {
           "title": "HTML Support",
           "description": "Enables HTML support for the dialog text.",
-          "code": "<QDialog :text=\"This is a tooltip. Did you know that the contents of tooltips can be formatted?<br><br>HTML is fully supported, so text formatting options such as <b>bold</b>, <i>italic</i>, or even<br>newlines can be used.\" />"
+          "code": "<QDialog text=\"This is a tooltip. Did you know that the contents of tooltips can be formatted?&lt;br>&lt;br>HTML is fully supported, so text formatting options such as &lt;b>bold&lt;/b>, &lt;i>italic&lt;/i>, or even&lt;br>newlines can be used.\" />"
         },
         {
           "title": "Advanced",
@@ -3063,7 +3163,7 @@
         {
           "title": "Popup Form",
           "description": "An example of a popup form.",
-          "code": "<q-button label=\"Click me\" @click=\"modelValue = true\" />\n\t\t\t<q-dialog v-model=\"modelValue\" v-bind=\"args\">\n\t\t\t\t<template #header>\n\t\t\t\t\t<h2 style=\"font-size: 1.05rem; text-transform: uppercase; margin: 0;\">\n\t\t\t\t\t\tContact\n\t\t\t\t\t</h2>\n\t\t\t\t</template>\n\t\t\t\t<template #body>\n\t\t\t\t\t<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n\t\t\t\t\t\t<q-text-field size=\"block\" label=\"Name\"/>\n\t\t\t\t\t\t<q-text-field size=\"block\" label=\"E-mail\"/>\n\t\t\t\t\t\t<q-text-field size=\"block\" label=\"Telephone\"/>\n\t\t\t\t\t\t<q-text-area size=\"block\" label=\"Description\"/>\n\t\t\t\t\t\t<q-date-time-picker size=\"medium\" label=\"Date\"/>\n\t\t\t\t\t\t<q-select :items=\"items\" label=\"Select\" />\n\t\t\t\t\t\t<q-text-field size=\"block\" label=\"Title\"/>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template #footer>\n\t\t\t\t\t<div style=\"display: flex; gap: 0.5rem;\">\n\t\t\t\t\t\t<q-button label=\"Save\" variant=\"bold\" @click=\"modelValue = false\">\n\t\t\t\t\t\t\t<q-icon icon=\"floppy\" />\n\t\t\t\t\t\t</q-button>\n\t\t\t\t\t\t<q-button label=\"Cancel\" @click=\"modelValue = false\">\n\t\t\t\t\t\t\t<q-icon icon=\"cancel\" />\n\t\t\t\t\t\t</q-button>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</q-dialog>"
+          "code": "<q-button label=\"Click me\" @click=\"modelValue = true\" />\n\t\t\t<q-dialog v-model=\"modelValue\" v-bind=\"args\">\n\t\t\t\t<template #header>\n\t\t\t\t\t<h2 style=\"font-size: 1.05rem; text-transform: uppercase; margin: 0;\">\n\t\t\t\t\t\tContact\n\t\t\t\t\t</h2>\n\t\t\t\t</template>\n\t\t\t\t<template #body>\n\t\t\t\t\t<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n\t\t\t\t\t\t<q-text-field size=\"block\" label=\"Name\"/>\n\t\t\t\t\t\t<q-text-field size=\"block\" label=\"E-mail\"/>\n\t\t\t\t\t\t<q-text-field size=\"block\" label=\"Telephone\"/>\n\t\t\t\t\t\t<q-text-area size=\"block\" label=\"Description\"/>\n\t\t\t\t\t\t<q-date-time-picker size=\"medium\" label=\"Date\"/>\n\t\t\t\t\t\t<q-select :items=\"items\" label=\"Select\" />\n\t\t\t\t\t\t<q-text-field size=\"block\" label=\"Title\"/>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template #footer.append>\n\t\t\t\t\t<div style=\"display: flex; gap: 0.5rem;\">\n\t\t\t\t\t\t<q-button label=\"Save\" variant=\"bold\" @click=\"modelValue = false\">\n\t\t\t\t\t\t\t<q-icon icon=\"floppy\" />\n\t\t\t\t\t\t</q-button>\n\t\t\t\t\t\t<q-button label=\"Cancel\" @click=\"modelValue = false\">\n\t\t\t\t\t\t\t<q-icon icon=\"cancel\" />\n\t\t\t\t\t\t</q-button>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t</q-dialog>"
         },
         {
           "title": "Overflown",
@@ -3803,27 +3903,27 @@
         {
           "title": "With Label",
           "description": "A file input with a label.",
-          "code": "<QFileUpload :label=\"Upload your file\" />"
+          "code": "<QFileUpload label=\"Upload your file\" />"
         },
         {
           "title": "Disabled",
           "description": "A disabled file input.",
-          "code": "<QFileUpload :disabled=\"true\" :label=\"Disabled file input\" />"
+          "code": "<QFileUpload :disabled=\"true\" label=\"Disabled file input\" />"
         },
         {
           "title": "Read Only",
           "description": "A read-only file input.",
-          "code": "<QFileUpload :readonly=\"true\" :label=\"Read-only file input\" />"
+          "code": "<QFileUpload :readonly=\"true\" label=\"Read-only file input\" />"
         },
         {
           "title": "Required",
           "description": "A required file input.",
-          "code": "<QFileUpload :required=\"true\" :label=\"Required file input\" />"
+          "code": "<QFileUpload :required=\"true\" label=\"Required file input\" />"
         },
         {
           "title": "Accept Images",
           "description": "A file input with a specific accepted file type (images only).",
-          "code": "<QFileUpload :label=\"Upload an image\" :accept=\"image/*\" />"
+          "code": "<QFileUpload label=\"Upload an image\" accept=\"image/*\" />"
         },
         {
           "title": "Extras",
@@ -4184,17 +4284,17 @@
         {
           "title": "Default",
           "description": "The default gauge uses semantic ranges and supporting KPI information.",
-          "code": "<QGauge :model-value=\"76\" :label=\"Delivery performance\" :target=\"80\" :target-label=\"Target 80%\" :show-target-value=\"true\" :unit=\"%\" :secondary-label=\"+4.2% from last month\" />"
+          "code": "<QGauge :model-value=\"76\" label=\"Delivery performance\" :target=\"80\" target-label=\"Target 80%\" :show-target-value=\"true\" unit=\"%\" secondary-label=\"+4.2% from last month\" />"
         },
         {
           "title": "Lower Is Better",
           "description": "Range order and colors can represent metrics where lower values are better.",
-          "code": "<QGauge :model-value=\"18\" :label=\"Average response time\" :max=\"60\" :target=\"20\" :target-comparison=\"at-most\" :target-label=\"Target 20 min\" :show-target-value=\"true\" :unit=\"min\" :secondary-label=\"-3 min from last month\" :ranges=\"[\n\t\t\t{ from: 0, to: 20, color: 'success', label: 'On target' },\n\t\t\t{ from: 20, to: 40, color: 'warning', label: 'Attention' },\n\t\t\t{ from: 40, to: 60, color: 'danger', label: 'Critical' }\n\t\t]\" />"
+          "code": "<QGauge :model-value=\"18\" label=\"Average response time\" :max=\"60\" :target=\"20\" target-comparison=\"at-most\" target-label=\"Target 20 min\" :show-target-value=\"true\" unit=\"min\" secondary-label=\"-3 min from last month\" :ranges=\"[\n\t\t\t{ from: 0, to: 20, color: 'success', label: 'On target' },\n\t\t\t{ from: 20, to: 40, color: 'warning', label: 'Attention' },\n\t\t\t{ from: 40, to: 60, color: 'danger', label: 'Critical' }\n\t\t]\" />"
         },
         {
           "title": "Explicit Ticks",
           "description": "Explicit ticks and formatters support domain-specific values.",
-          "code": "<QGauge :model-value=\"10.6\" :label=\"Revenue\" :max=\"21\" :target=\"15\" :target-label=\"Target 15M\" :show-target-value=\"true\" :unit=\"Dollars\" :ticks=\"0,3,6,9,12,15,18,21\" :value-label=\"(value: number) => `${value.toFixed(1)}M`\" :tick-formatter=\"(value: number) => (value === 0 ? '0' : `${value}M`)\" :ranges=\"[\n\t\t\t{ from: 0, to: 6, color: 'danger', label: 'Below target' },\n\t\t\t{ from: 6, to: 15, color: 'warning', label: 'Approaching target' },\n\t\t\t{ from: 15, to: 21, color: 'success', label: 'On target' }\n\t\t]\" />"
+          "code": "<QGauge :model-value=\"10.6\" label=\"Revenue\" :max=\"21\" :target=\"15\" target-label=\"Target 15M\" :show-target-value=\"true\" unit=\"Dollars\" :ticks=\"[0, 3, 6, 9, 12, 15, 18, 21]\" :value-label=\"(value: number) => `${value.toFixed(1)}M`\" :tick-formatter=\"(value: number) => (value === 0 ? '0' : `${value}M`)\" :ranges=\"[\n\t\t\t{ from: 0, to: 6, color: 'danger', label: 'Below target' },\n\t\t\t{ from: 6, to: 15, color: 'warning', label: 'Approaching target' },\n\t\t\t{ from: 15, to: 21, color: 'success', label: 'On target' }\n\t\t]\" />"
         },
         {
           "title": "Responsive Composition",
@@ -4271,17 +4371,17 @@
         {
           "title": "SVG Icon",
           "description": "Example using [Material Design Icons](https://pictogrammers.com/library/mdi/).",
-          "code": "<QIcon :icon=\"home\" :type=\"svg\" />"
+          "code": "<QIcon icon=\"home\" type=\"svg\" />"
         },
         {
           "title": "Font Icon",
           "description": "Example using [Font Awesome Icons](https://fontawesome.com/).",
-          "code": "<QIcon :icon=\"house\" :type=\"font\" />"
+          "code": "<QIcon icon=\"house\" type=\"font\" />"
         },
         {
           "title": "Custom Colors",
           "description": "Displays an icon with a custom color, conveying semantic meaning.",
-          "code": "<QIcon :icon=\"check\" :type=\"svg\" :color=\"success\" />"
+          "code": "<QIcon icon=\"check\" type=\"svg\" color=\"success\" />"
         }
       ]
     },
@@ -4448,12 +4548,12 @@
         {
           "title": "Default",
           "description": "Groups multiple fields together.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"First name\" />\n\t\t\t\t<q-text-field placeholder=\"Last name\" />\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field aria-label=\"First name\" placeholder=\"First name\" />\n\t\t\t\t<q-text-field aria-label=\"Last name\" placeholder=\"Last name\" />\n\t\t\t</q-input-group>"
         },
         {
           "title": "Prepend Icon",
           "description": "Adds an icon before the fields.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"First name\" />\n\t\t\t\t<q-text-field placeholder=\"Last name\" />\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field aria-label=\"First name\" placeholder=\"First name\" />\n\t\t\t\t<q-text-field aria-label=\"Last name\" placeholder=\"Last name\" />\n\t\t\t</q-input-group>"
         },
         {
           "title": "Append Icon",
@@ -4463,52 +4563,52 @@
         {
           "title": "Custom Prepend",
           "description": "Adds custom elements before the fields.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #prepend>\n\t\t\t\t\t<span>@</span>\n\t\t\t\t</template>\n\t\t\t\t<q-text-field placeholder=\"Username\" />\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #prepend>\n\t\t\t\t\t<span>@</span>\n\t\t\t\t</template>\n\t\t\t\t<q-text-field aria-label=\"Username\" placeholder=\"Username\" />\n\t\t\t</q-input-group>"
         },
         {
           "title": "Custom Append",
           "description": "Adds custom elements after the fields.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"john.doe\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<span>@mail.com</span>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field aria-label=\"Email\" placeholder=\"john.doe\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<span>@mail.com</span>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         },
         {
           "title": "Both Addons",
           "description": "Places addons both before and after the fields.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"john.doe\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<span>.com</span>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field aria-label=\"Email\" placeholder=\"john.doe\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<span>.com</span>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         },
         {
           "title": "Button Addon",
           "description": "Groups buttons with fields.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"Search\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"magnify\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field aria-label=\"Search\" placeholder=\"Search\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button aria-label=\"Search\">\n\t\t\t\t\t\t<q-icon icon=\"magnify\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         },
         {
           "title": "Append Only",
           "description": "Append-only group — all four corners of the control should be rounded.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button aria-label=\"Settings\">\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         },
         {
           "title": "Prepend Only",
           "description": "Prepend-only group — all four corners of the control should be rounded.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #prepend>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #prepend>\n\t\t\t\t\t<q-button aria-label=\"Settings\">\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         },
         {
           "title": "Button Group Addon",
           "description": "Further extends button addons with multiple buttons.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"Search\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"magnify\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field aria-label=\"Search\" placeholder=\"Search\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button aria-label=\"Search\">\n\t\t\t\t\t\t<q-icon icon=\"magnify\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t\t<q-button aria-label=\"Settings\">\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         },
         {
-          "title": "Label",
-          "description": "Provides a textual description for the group.",
-          "code": "<QInputGroup :label=\"Full name\" :required=\"true\" />"
+          "title": "Required",
+          "description": "Displays an asterisk next to the group label.",
+          "code": "<QInputGroup label=\"Full name\" :required=\"true\" />"
         },
         {
           "title": "Mixed Heights",
           "description": "Keeps sibling controls aligned when one child has a larger intrinsic height.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"Name\" />\n\t\t\t\t<q-text-area placeholder=\"Notes\" :rows=\"3\" />\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field aria-label=\"Name\" placeholder=\"Name\" />\n\t\t\t\t<q-text-area aria-label=\"Notes\" placeholder=\"Notes\" :rows=\"3\" />\n\t\t\t</q-input-group>"
         },
         {
           "title": "Advanced Usage",
           "description": "Supports the creation of custom input groups using selects, text fields, buttons, and more.",
-          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-combobox\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\tplaceholder=\"PT (+351)\"\n\t\t\t\t\tclearable\n\t\t\t\t\t:items=\"countryCodes\" />\n\t\t\t\t<q-text-field\n\t\t\t\t\tsize=\"large\"\n\t\t\t\t\tplaceholder=\"912345678\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button label=\"Verify\">\n\t\t\t\t\t\t<q-icon icon=\"check\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-combobox\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\taria-label=\"Country code\"\n\t\t\t\t\tplaceholder=\"PT (+351)\"\n\t\t\t\t\tclearable\n\t\t\t\t\t:items=\"countryCodes\" />\n\t\t\t\t<q-text-field\n\t\t\t\t\tsize=\"large\"\n\t\t\t\t\taria-label=\"Number\"\n\t\t\t\t\tplaceholder=\"912345678\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button label=\"Verify\">\n\t\t\t\t\t\t<q-icon icon=\"check\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         }
       ]
     },
@@ -4594,7 +4694,7 @@
         {
           "title": "Default",
           "description": "Default label with simple text.",
-          "code": "<QLabel :label=\"Label\" />"
+          "code": "<QLabel label=\"Label\" />"
         },
         {
           "title": "With Prepend",
@@ -4664,6 +4764,16 @@
             "required": false,
             "category": "Identification"
           },
+          {
+            "name": "label",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "Accessible name for the listbox.",
+            "required": false,
+            "category": "Content"
+          },
           {
             "name": "modelValue",
             "type": {
@@ -4998,12 +5108,12 @@
         {
           "title": "Default",
           "description": "The default meter.",
-          "code": "<QMeter :model-value=\"2\" :max=\"5\" :label=\"Tasks completed\" :value-label=\"(value: number, max: number) => `${value} of ${max}`\" />"
+          "code": "<QMeter :model-value=\"2\" :max=\"5\" label=\"Tasks completed\" :value-label=\"(value: number, max: number) => `${value} of ${max}`\" />"
         },
         {
           "title": "Semantic",
           "description": "The meter bar color can be used to convey semantic meaning, such as status or severity.",
-          "code": "<QMeter :model-value=\"75\" :max=\"100\" :color=\"success\" :label=\"Storage\" :value-label=\"(value: number, max: number) => `${value} GB available of ${max} GB`\" />"
+          "code": "<QMeter :model-value=\"75\" :max=\"100\" color=\"success\" label=\"Storage\" :value-label=\"(value: number, max: number) => `${value} GB available of ${max} GB`\" />"
         }
       ]
     },
@@ -5246,12 +5356,12 @@
         {
           "title": "Obfuscation",
           "description": "Role without permission — plain Restricted, no reveal control.",
-          "code": "<QObfuscation :label=\"Field label\" :revealable=\"false\" />"
+          "code": "<QObfuscation label=\"Field label\" :revealable=\"false\" />"
         },
         {
           "title": "Obfuscation Bullets",
           "description": "Bullet mask when obfuscation uses dots instead of Restricted.",
-          "code": "<QObfuscation :label=\"Field label\" :revealable=\"false\" :mask=\"bullets\" :bullet-count=\"12\" />"
+          "code": "<QObfuscation label=\"Field label\" :revealable=\"false\" mask=\"bullets\" :bullet-count=\"12\" />"
         },
         {
           "title": "Revealable Hidden",
@@ -5321,7 +5431,7 @@
         {
           "title": "Multiple Fields",
           "description": "PDF-style consulta grid: mixed restricted vs revealable fields.",
-          "code": "<div style=\"display: grid; grid-template-columns: 10rem 1fr 10rem 1fr; gap: 0.75rem 1.5rem; max-width: 44rem; align-items: baseline;\">\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" />\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedA\">\n\t\t\t\t\tField value revealed\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" />\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation\n\t\t\t\t\t:revealable=\"true\"\n\t\t\t\t\tv-model:revealed=\"revealedB\">\n\t\t\t\t\tField value revealed\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" mask=\"bullets\" />\n\n\t\t\t\t<span style=\"opacity: 0.8;\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" />\n\t\t\t</div>"
+          "code": "<div style=\"display: grid; grid-template-columns: 10rem 1fr 10rem 1fr; gap: 0.75rem 1.5rem; max-width: 44rem; align-items: baseline;\">\n\t\t\t\t<span style=\"color: var(--q-theme-neutral);\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" />\n\n\t\t\t\t<span style=\"color: var(--q-theme-neutral);\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedA\">\n\t\t\t\t\tField value revealed\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<span style=\"color: var(--q-theme-neutral);\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" />\n\n\t\t\t\t<span style=\"color: var(--q-theme-neutral);\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation\n\t\t\t\t\t:revealable=\"true\"\n\t\t\t\t\tv-model:revealed=\"revealedB\">\n\t\t\t\t\tField value revealed\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<span style=\"color: var(--q-theme-neutral);\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" mask=\"bullets\" />\n\n\t\t\t\t<span style=\"color: var(--q-theme-neutral);\">{{ args.label }}</span>\n\t\t\t\t<q-obfuscation :revealable=\"false\" />\n\t\t\t</div>"
         }
       ]
     },
@@ -6104,6 +6214,17 @@
             "default": "DEFAULT_ICONS",
             "required": false,
             "category": "Configuration"
+          },
+          {
+            "name": "texts",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom text configurations for the visibility toggle.",
+            "default": "DEFAULT_TEXTS",
+            "required": false,
+            "category": "Configuration"
           }
         ],
         "events": [
@@ -6165,27 +6286,22 @@
         {
           "title": "Readonly",
           "description": "Conveys a read-only appearance to the field.",
-          "code": "<QPasswordField :model-value=\"r34d0n1y\" :readonly=\"true\" :toggle=\"true\" />"
+          "code": "<QPasswordField model-value=\"r34d0n1y\" :readonly=\"true\" :toggle=\"true\" />"
         },
         {
           "title": "Disabled",
           "description": "Disables the field, preventing interaction with it.",
-          "code": "<QPasswordField :model-value=\"d1sabl3d\" :disabled=\"true\" :toggle=\"true\" />"
-        },
-        {
-          "title": "Label",
-          "description": "Provides a textual description for the field.",
-          "code": "<QPasswordField :label=\"Password\" />"
+          "code": "<QPasswordField model-value=\"d1sabl3d\" :disabled=\"true\" :toggle=\"true\" />"
         },
         {
           "title": "Required",
           "description": "Displays an asterisk (*) next to the label, to indicate that the field is required.",
-          "code": "<QPasswordField :label=\"Password\" :required=\"true\" />"
+          "code": "<QPasswordField label=\"Password\" :required=\"true\" />"
         },
         {
           "title": "Login Form",
-          "description": "Combine with input group to create a custom login form.",
-          "code": "<q-input-group>\n\t\t\t\t<q-password-field\n\t\t\t\t\tv-model:masked=\"masked\"\n\t\t\t\t\tplaceholder=\"Enter your password\"\n\t\t\t\t\tv-bind=\"args\">\n\t\t\t\t\t<template #prepend>\n\t\t\t\t\t\t<q-icon icon=\"lock\" style=\"color: var(--q-theme-primary); margin: 0 0.5rem;\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-password-field>\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button @click=\"toggleMask\">\n\t\t\t\t\t\t<q-icon :icon=\"masked ? 'eye' : 'eye-off'\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+          "description": "Combine with input group to create a custom login form. The field is named with `aria-label` so the show/hide row stays a single control.",
+          "code": "<q-input-group>\n\t\t\t\t<q-password-field\n\t\t\t\t\tv-model:masked=\"masked\"\n\t\t\t\t\tplaceholder=\"Enter your password\"\n\t\t\t\t\taria-label=\"Password\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\t:label=\"undefined\">\n\t\t\t\t\t<template #prepend>\n\t\t\t\t\t\t<q-icon icon=\"lock\" style=\"color: var(--q-theme-primary); margin: 0 0.5rem;\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-password-field>\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button\n\t\t\t\t\t\t:aria-label=\"masked ? 'Show password' : 'Hide password'\"\n\t\t\t\t\t\t@click=\"toggleMask\">\n\t\t\t\t\t\t<q-icon :icon=\"masked ? 'eye' : 'eye-off'\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         }
       ]
     },
@@ -7200,22 +7316,22 @@
         {
           "title": "Default",
           "description": "Uses the default `en-US` locale and emits a complete international value.",
-          "code": "<QPhoneField :label=\"Phone number\" :clearable=\"true\" :size=\"large\" />"
+          "code": "<QPhoneField label=\"Phone number\" :clearable=\"true\" size=\"large\" />"
         },
         {
           "title": "International Value",
           "description": "Derives the country, flag, calling code, and national presentation from an E.164 value.",
-          "code": "<QPhoneField :model-value=\"+442079460018\" />"
+          "code": "<QPhoneField model-value=\"+442079460018\" />"
         },
         {
           "title": "Restricted Countries",
           "description": "Restricts and orders the countries shown in the searchable selector. This is a runtime filter; the component still includes the complete flag stylesheet.",
-          "code": "<QPhoneField :countries=\"['PT', 'ES', 'FR', 'GB']\" :model-value=\"+351912345678\" />"
+          "code": "<QPhoneField :countries=\"['PT', 'ES', 'FR', 'GB']\" model-value=\"+351912345678\" />"
         },
         {
           "title": "Paste Detection",
           "description": "Paste a number beginning with `+` or `00` to update the country automatically.",
-          "code": "<QPhoneField :label=\"Paste an international number\" />"
+          "code": "<QPhoneField label=\"Paste an international number\" />"
         },
         {
           "title": "Required Validation",
@@ -7230,17 +7346,17 @@
         {
           "title": "Readonly",
           "description": "Prevents editing and country selection while retaining the formatted value.",
-          "code": "<QPhoneField :model-value=\"+351912345678\" :readonly=\"true\" />"
+          "code": "<QPhoneField model-value=\"+351912345678\" :readonly=\"true\" />"
         },
         {
           "title": "Disabled",
           "description": "Disables all interaction with the field.",
-          "code": "<QPhoneField :model-value=\"+351912345678\" :disabled=\"true\" />"
+          "code": "<QPhoneField model-value=\"+351912345678\" :disabled=\"true\" />"
         },
         {
           "title": "Invalid",
           "description": "Combines an application-provided invalid state with the component validation styling.",
-          "code": "<QPhoneField :model-value=\"+35191\" :invalid=\"true\" />"
+          "code": "<QPhoneField model-value=\"+35191\" :invalid=\"true\" />"
         }
       ]
     },
@@ -7430,7 +7546,7 @@
         {
           "title": "Title",
           "description": "Displays a header section with the title of the popover.",
-          "code": "<QPopover :title=\"What is Lorem Ipsum?\" :text=\"Lorem Ipsum is simply dummy text of the printing and typesetting industry.\" />"
+          "code": "<QPopover title=\"What is Lorem Ipsum?\" text=\"Lorem Ipsum is simply dummy text of the printing and typesetting industry.\" />"
         },
         {
           "title": "Placement Variations",
@@ -7440,7 +7556,7 @@
         {
           "title": "HTML Content",
           "description": "Render rich HTML content including links, formatting, and lists.",
-          "code": "<QPopover :html=\"true\" :title=\"Welcome to our Platform!\" :text=\"`\n      <p>Here are some quick steps to get you started:</p>\n      <ol>\n        <li>Configure your <strong>workspace settings</strong></li>\n        <li>Check our <a href=\"#\">documentation</a></li>\n        <li>Join our <a href=\"#\">community</a></li>\n      </ol>\n      <div style=\"margin-top: 1rem\">\n        <span>💡 Pro tip:</span>\n        Enable dark mode in your profile settings for better viewing experience.\n      </div>\n    `\" />"
+          "code": "<QPopover :html=\"true\" title=\"Welcome to our Platform!\" text=\"\n      &lt;p>Here are some quick steps to get you started:&lt;/p>\n      &lt;ol>\n        &lt;li>Configure your &lt;strong>workspace settings&lt;/strong>&lt;/li>\n        &lt;li>Check our &lt;a href=&quot;#&quot;>documentation&lt;/a>&lt;/li>\n        &lt;li>Join our &lt;a href=&quot;#&quot;>community&lt;/a>&lt;/li>\n      &lt;/ol>\n      &lt;div style=&quot;margin-top: 1rem&quot;>\n        &lt;span>💡 Pro tip:&lt;/span>\n        Enable dark mode in your profile settings for better viewing experience.\n      &lt;/div>\n    \" />"
         },
         {
           "title": "Custom Header",
@@ -7450,7 +7566,7 @@
         {
           "title": "No Arrow",
           "description": "Clean appearance without directional arrow.",
-          "code": "<QPopover :arrow=\"false\" :title=\"Minimal Design\" :text=\"This version removes the visual indicator for simpler interfaces.\" />"
+          "code": "<QPopover :arrow=\"false\" title=\"Minimal Design\" text=\"This version removes the visual indicator for simpler interfaces.\" />"
         },
         {
           "title": "Interactive Content",
@@ -7822,7 +7938,7 @@
         {
           "title": "Side Panel",
           "description": "Displays properties with the panel positioned to the right.",
-          "code": "<QPropertyList :fields=\"noGroupFields\" :panel-position=\"right\" />"
+          "code": "<QPropertyList :fields=\"noGroupFields\" panel-position=\"right\" />"
         },
         {
           "title": "Readonly",
@@ -8238,12 +8354,12 @@
         {
           "title": "Borderless",
           "description": "A group box without borders.",
-          "code": "<QSection :title=\"Borderless\" :borderless=\"true\" />"
+          "code": "<QSection title=\"Borderless\" :borderless=\"true\" />"
         },
         {
           "title": "Block",
           "description": "A group box spanning full width of its container.",
-          "code": "<QSection :title=\"Block Group Box\" :block=\"true\" />"
+          "code": "<QSection title=\"Block Group Box\" :block=\"true\" />"
         },
         {
           "title": "Variants",
@@ -8626,17 +8742,17 @@
         {
           "title": "Readonly",
           "description": "Conveys a read-only appearance to the select.",
-          "code": "<QSelect :model-value=\"italic\" :readonly=\"true\" />"
+          "code": "<QSelect model-value=\"italic\" :readonly=\"true\" />"
         },
         {
           "title": "Disabled",
           "description": "Disables the select, preventing interaction with it.",
-          "code": "<QSelect :model-value=\"italic\" :disabled=\"true\" />"
+          "code": "<QSelect model-value=\"italic\" :disabled=\"true\" />"
         },
         {
           "title": "Clearable",
           "description": "Displays a clear button, allowing the user to clear the selected value.",
-          "code": "<QSelect :model-value=\"italic\" :clearable=\"true\" />"
+          "code": "<QSelect model-value=\"italic\" :clearable=\"true\" />"
         },
         {
           "title": "Item Groups",
@@ -8651,7 +8767,7 @@
         {
           "title": "Loading",
           "description": "Displays a loading animation that lets users know content is being loaded.",
-          "code": "<QSelect :items=\"\" :loading=\"true\" />"
+          "code": "<QSelect :items=\"[]\" :loading=\"true\" />"
         },
         {
           "title": "Description In Items",
@@ -8787,12 +8903,12 @@
         {
           "title": "Right",
           "description": "Sidebar positioned on the right side of the screen.",
-          "code": "<QSidebar :show-labels=\"true\" :position=\"right\" />"
+          "code": "<QSidebar :show-labels=\"true\" position=\"right\" />"
         },
         {
           "title": "Starts Expanded",
           "description": "Sidebar with a panel expanded by default.",
-          "code": "<QSidebar :show-labels=\"true\" :model-value=\"activity\" />"
+          "code": "<QSidebar :show-labels=\"true\" model-value=\"activity\" />"
         },
         {
           "title": "Panel Size",
@@ -8812,17 +8928,17 @@
         {
           "title": "Header",
           "description": "Use the `header` slot to add a sticky header to a sidebar panel.",
-          "code": "<QSidebar v-bind=\"args\">\n\t\t\t\t<q-sidebar-item value=\"activity\" title=\"Activity\" :icon=\"{ icon: 'bell' }\">\n\t\t\t\t\t<template #header>\n\t\t\t\t\t\t<img src=\"/logo.png\" style=\"max-height: 100px; max-width: 150px;\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-sidebar-item>\n\t\t\t\t<q-sidebar-item value=\"chat\" title=\"Chat\" :icon=\"{ icon: 'chat' }\" />\n\t\t\t\t<q-sidebar-item value=\"calendar\" title=\"Calendar\" :icon=\"{ icon: 'calendar' }\" />\n\t\t\t\t<q-sidebar-item value=\"calls\" title=\"Calls\" :icon=\"{ icon: 'phone' }\" />\n\t\t\t</QSidebar>"
+          "code": "<QSidebar v-bind=\"args\">\n\t\t\t\t<q-sidebar-item value=\"activity\" title=\"Activity\" :icon=\"{ icon: 'bell' }\">\n\t\t\t\t\t<template #header>\n\t\t\t\t\t\t<img src=\"/logo.png\" alt=\"Quidgest\" style=\"max-height: 100px; max-width: 150px;\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-sidebar-item>\n\t\t\t\t<q-sidebar-item value=\"chat\" title=\"Chat\" :icon=\"{ icon: 'chat' }\" />\n\t\t\t\t<q-sidebar-item value=\"calendar\" title=\"Calendar\" :icon=\"{ icon: 'calendar' }\" />\n\t\t\t\t<q-sidebar-item value=\"calls\" title=\"Calls\" :icon=\"{ icon: 'phone' }\" />\n\t\t\t</QSidebar>"
         },
         {
           "title": "Content",
           "description": "Use the default slot to add main content to a sidebar panel.",
-          "code": "<QSidebar :model-value=\"activity\" />"
+          "code": "<QSidebar model-value=\"activity\" />"
         },
         {
           "title": "Footer",
           "description": "Use the `footer` slot to add a sticky footer to a sidebar panel.",
-          "code": "<div class=\"q-sidebar-stories\">\n\t\t\t\t<QSidebar v-bind=\"args\">\n\t\t\t\t\t<q-sidebar-item\n\t\t\t\t\t\tvalue=\"chat\"\n\t\t\t\t\t\ttitle=\"Chat\"\n\t\t\t\t\t\t:icon=\"{ icon: 'robot-happy' }\"\n\t\t\t\t\t\tinitial-width=\"large\"\n\t\t\t\t\t\tmin-width=\"medium\"\n\t\t\t\t\t\tresizable>\n\t\t\t\t\t\t<template #footer>\n\t\t\t\t\t\t\t<QCard class=\"prompt\" width=\"block\" elevation=\"low\">\n\t\t\t\t\t\t\t\t<QTextArea\n\t\t\t\t\t\t\t\t\tv-model=\"prompt\"\n\t\t\t\t\t\t\t\t\tclass=\"prompt__textarea\"\n\t\t\t\t\t\t\t\t\tplaceholder=\"Ask anything\"\n\t\t\t\t\t\t\t\t\tsize=\"block\"\n\t\t\t\t\t\t\t\t\t:rows=\"1\"\n\t\t\t\t\t\t\t\t\tresize=\"none\"\n\t\t\t\t\t\t\t\t\tautosize\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<template #footer>\n\t\t\t\t\t\t\t\t\t<div class=\"prompt__actions\">\n\t\t\t\t\t\t\t\t\t\t<QButton ref=\"upload\" pill>\n\t\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"plus\" />\n\t\t\t\t\t\t\t\t\t\t</QButton>\n\t\t\t\t\t\t\t\t\t\t<QDropdownMenu\n\t\t\t\t\t\t\t\t\t\t\t:activator=\"uploadRef?.$el\"\n\t\t\t\t\t\t\t\t\t\t\t:items=\"uploadItems\"\n\t\t\t\t\t\t\t\t\t\t\t:groups=\"uploadGroups\"\n\t\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t\t<QToggle ref=\"search\" pill>\n\t\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"earth\" />\n\t\t\t\t\t\t\t\t\t\t\tSearch\n\t\t\t\t\t\t\t\t\t\t</QToggle>\n\n\t\t\t\t\t\t\t\t\t\t<QToggle ref=\"reason\" pill>\n\t\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"lightbulb-outline\" />\n\t\t\t\t\t\t\t\t\t\t\tReason\n\t\t\t\t\t\t\t\t\t\t</QToggle>\n\n\t\t\t\t\t\t\t\t\t\t<QButton ref=\"more\" pill>\n\t\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"dots-horizontal\" />\n\t\t\t\t\t\t\t\t\t\t</QButton>\n\t\t\t\t\t\t\t\t\t\t<QDropdownMenu :activator=\"moreRef?.$el\" :items=\"moreItems\" />\n\n\t\t\t\t\t\t\t\t\t\t<QButton ref=\"action\" class=\"prompt__voice-mode\" variant=\"bold\" pill>\n\t\t\t\t\t\t\t\t\t\t\t<QIcon :icon=\"isPromptEmpty ? 'waveform' : 'arrow-up'\" />\n\t\t\t\t\t\t\t\t\t\t</QButton>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</QCard>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-sidebar-item>\n\t\t\t\t</QSidebar>\n\t\t\t</div>"
+          "code": "<div class=\"q-sidebar-stories\">\n\t\t\t\t<QSidebar v-bind=\"args\">\n\t\t\t\t\t<q-sidebar-item\n\t\t\t\t\t\tvalue=\"chat\"\n\t\t\t\t\t\ttitle=\"Chat\"\n\t\t\t\t\t\t:icon=\"{ icon: 'robot-happy' }\"\n\t\t\t\t\t\tinitial-width=\"large\"\n\t\t\t\t\t\tmin-width=\"medium\"\n\t\t\t\t\t\tresizable>\n\t\t\t\t\t\t<template #footer>\n\t\t\t\t\t\t\t<QCard class=\"prompt\" width=\"block\" elevation=\"low\">\n\t\t\t\t\t\t\t\t<QTextArea\n\t\t\t\t\t\t\t\t\tv-model=\"prompt\"\n\t\t\t\t\t\t\t\t\tclass=\"prompt__textarea\"\n\t\t\t\t\t\t\t\t\taria-label=\"Ask anything\"\n\t\t\t\t\t\t\t\t\tplaceholder=\"Ask anything\"\n\t\t\t\t\t\t\t\t\tsize=\"block\"\n\t\t\t\t\t\t\t\t\t:rows=\"1\"\n\t\t\t\t\t\t\t\t\tresize=\"none\"\n\t\t\t\t\t\t\t\t\tautosize\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<template #footer>\n\t\t\t\t\t\t\t\t\t<div class=\"prompt__actions\">\n\t\t\t\t\t\t\t\t\t\t<QButton ref=\"upload\" pill aria-label=\"Attach\">\n\t\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"plus\" />\n\t\t\t\t\t\t\t\t\t\t</QButton>\n\t\t\t\t\t\t\t\t\t\t<QDropdownMenu\n\t\t\t\t\t\t\t\t\t\t\t:activator=\"uploadRef?.$el\"\n\t\t\t\t\t\t\t\t\t\t\t:items=\"uploadItems\"\n\t\t\t\t\t\t\t\t\t\t\t:groups=\"uploadGroups\"\n\t\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t\t<QToggle ref=\"search\" pill>\n\t\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"earth\" />\n\t\t\t\t\t\t\t\t\t\t\tSearch\n\t\t\t\t\t\t\t\t\t\t</QToggle>\n\n\t\t\t\t\t\t\t\t\t\t<QToggle ref=\"reason\" pill>\n\t\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"lightbulb-outline\" />\n\t\t\t\t\t\t\t\t\t\t\tReason\n\t\t\t\t\t\t\t\t\t\t</QToggle>\n\n\t\t\t\t\t\t\t\t\t\t<QButton ref=\"more\" pill aria-label=\"More\">\n\t\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"dots-horizontal\" />\n\t\t\t\t\t\t\t\t\t\t</QButton>\n\t\t\t\t\t\t\t\t\t\t<QDropdownMenu :activator=\"moreRef?.$el\" :items=\"moreItems\" />\n\n\t\t\t\t\t\t\t\t\t\t<QButton ref=\"action\" class=\"prompt__voice-mode\" variant=\"bold\" pill :aria-label=\"isPromptEmpty ? 'Voice' : 'Send'\">\n\t\t\t\t\t\t\t\t\t\t\t<QIcon :icon=\"isPromptEmpty ? 'waveform' : 'arrow-up'\" />\n\t\t\t\t\t\t\t\t\t\t</QButton>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</QCard>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-sidebar-item>\n\t\t\t\t</QSidebar>\n\t\t\t</div>"
         },
         {
           "title": "Custom Anchor Items",
@@ -8901,12 +9017,12 @@
         {
           "title": "Text",
           "description": "The built-in 'text' skeleton type.",
-          "code": "<QSkeletonLoader :type=\"text\" :width=\"133\" :height=\"undefined\" />"
+          "code": "<QSkeletonLoader type=\"text\" :width=\"133\" :height=\"undefined\" />"
         },
         {
           "title": "Icon",
           "description": "The built-in 'icon' skeleton type.",
-          "code": "<QSkeletonLoader :type=\"icon\" />"
+          "code": "<QSkeletonLoader type=\"icon\" />"
         },
         {
           "title": "Custom",
@@ -8947,6 +9063,221 @@
       },
       "examples": []
     },
+    {
+      "name": "QSteps",
+      "description": "Presents a multi-step wizard or workflow. Step definitions come from the `steps` prop; the default slot holds only the current step’s content.",
+      "meta": {
+        "props": [
+          {
+            "name": "modelValue",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The component unique identifier.",
+            "required": false,
+            "category": "Identification"
+          },
+          {
+            "name": "steps",
+            "type": {
+              "kind": "array",
+              "elementType": {
+                "name": "object",
+                "value": {}
+              }
+            },
+            "description": "Ordered list of step definitions.",
+            "required": true,
+            "category": "Content"
+          },
+          {
+            "name": "direction",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "horizontal",
+                "vertical"
+              ]
+            },
+            "description": "Orientation of the step list.",
+            "default": "horizontal",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "variant",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "circle",
+                "arrow",
+                "dot",
+                "boxed"
+              ]
+            },
+            "description": "Visual style of the step indicators.",
+            "default": "circle",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "disabled",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "If true, disables all step headers and navigation.",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "linear",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "If true, header clicks cannot skip ahead of the furthest reached step.\n\nNext/Previous navigation still works.",
+            "default": "false",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "icons",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom icons for the previous/next navigation buttons and the\n`completed`/`current` status badges.",
+            "default": "DEFAULT_ICONS",
+            "required": false,
+            "category": "Configuration"
+          },
+          {
+            "name": "texts",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom accessible strings.",
+            "default": "DEFAULT_TEXTS",
+            "required": false,
+            "category": "Configuration"
+          }
+        ],
+        "events": [
+          {
+            "name": "update:modelValue",
+            "description": "",
+            "type": "[value: string]"
+          },
+          {
+            "name": "finish",
+            "description": "",
+            "type": "[]"
+          }
+        ],
+        "slots": [
+          {
+            "name": "icon",
+            "description": ""
+          },
+          {
+            "name": "default",
+            "description": ""
+          },
+          {
+            "name": "prev",
+            "description": ""
+          },
+          {
+            "name": "next",
+            "description": ""
+          }
+        ]
+      },
+      "examples": [
+        {
+          "title": "Default",
+          "description": "Default horizontal steps with the circle variant.",
+          "code": "<q-steps v-model=\"step\" v-bind=\"args\">\n\t\t\t\t<b>{{ content.heading }}</b>\n\t\t\t\t<p>{{ content.body }}</p>\n\t\t\t</q-steps>"
+        },
+        {
+          "title": "Vertical",
+          "description": "Vertical layout with content under the active header.",
+          "code": "<QSteps :steps=\"defaultSteps\" direction=\"vertical\" />"
+        },
+        {
+          "title": "Dot",
+          "description": "Dot variant — plain dots, no numbers or icons.",
+          "code": "<QSteps :steps=\"defaultSteps\" variant=\"dot\" />"
+        },
+        {
+          "title": "Boxed",
+          "description": "Boxed variant — filled rounded rectangles.",
+          "code": "<QSteps :steps=\"defaultSteps\" variant=\"boxed\" />"
+        },
+        {
+          "title": "Arrow",
+          "description": "Arrow variant — interlocking chevron segments.",
+          "code": "<QSteps :steps=\"defaultSteps\" variant=\"arrow\" />"
+        },
+        {
+          "title": "Dot Vertical",
+          "description": "Dot variant in a vertical layout.",
+          "code": "<QSteps :steps=\"defaultSteps\" variant=\"dot\" direction=\"vertical\" />"
+        },
+        {
+          "title": "Boxed Vertical",
+          "description": "Boxed variant in a vertical layout.",
+          "code": "<QSteps :steps=\"defaultSteps\" variant=\"boxed\" direction=\"vertical\" />"
+        },
+        {
+          "title": "Arrow Vertical",
+          "description": "Arrow variant in a vertical layout.",
+          "code": "<QSteps :steps=\"defaultSteps\" variant=\"arrow\" direction=\"vertical\" />"
+        },
+        {
+          "title": "Many Steps",
+          "description": "More steps than fit at once — horizontal caps visible steps at 4 and scrolls the rest via arrow buttons (built on `QOverflow`).",
+          "code": "<q-steps v-model=\"step\" v-bind=\"args\">\n\t\t\t\t<p>Current step: {{ step }}</p>\n\t\t\t</q-steps>"
+        },
+        {
+          "title": "With Completed Steps",
+          "description": "Completed and active badges — `step.completed` shows a green check, taking precedence over the active step's pencil badge when both apply. `dot` shows neither badge, painting the dot itself green instead. Switch `variant`/`direction` in the controls panel to see the badge positioning for each combination.",
+          "code": "<q-steps v-model=\"step\" v-bind=\"args\">\n\t\t\t\t<b>{{ content.heading }}</b>\n\t\t\t\t<p>{{ content.body }}</p>\n\t\t\t</q-steps>"
+        },
+        {
+          "title": "Linear",
+          "description": "Linear mode — header clicks cannot skip ahead of visited steps.",
+          "code": "<QSteps :steps=\"defaultSteps\" :linear=\"true\" />"
+        },
+        {
+          "title": "With Icons And Required",
+          "description": "Steps with icons (via `icon` on each step) and a required marker.",
+          "code": "<q-steps v-model=\"step\" v-bind=\"args\">\n\t\t\t\t<p>Content for <strong>{{ step }}</strong>.</p>\n\t\t\t</q-steps>"
+        },
+        {
+          "title": "With Icon Slot",
+          "description": "Custom indicator content via the scoped `#icon` slot.",
+          "code": "<q-steps v-model=\"step\" v-bind=\"args\">\n\t\t\t\t<template #icon=\"{ index }\">\n\t\t\t\t\t<q-icon :icon=\"icons[index]\" />\n\t\t\t\t</template>\n\t\t\t\t<p>Current step: {{ step }}</p>\n\t\t\t</q-steps>"
+        },
+        {
+          "title": "Controlled",
+          "description": "Controlled example that reacts to finish. The built-in Next button disables itself on the last step instead of relabeling to \"Finish\" — to offer an actual clickable finish action, override the `next` slot (as done here) and call its `onClick` yourself.",
+          "code": "<q-steps v-model=\"step\" v-bind=\"args\" @finish=\"onFinish\">\n\t\t\t\t<b>{{ content.heading }}</b>\n\t\t\t\t<p>{{ content.body }}</p>\n\t\t\t\t<template #next=\"{ label, isLast, onClick }\">\n\t\t\t\t\t<q-button\n\t\t\t\t\t\tvariant=\"bold\"\n\t\t\t\t\t\t:label=\"isLast ? 'Finish' : label\"\n\t\t\t\t\t\t@click=\"onClick\" />\n\t\t\t\t</template>\n\t\t\t</q-steps>\n\t\t\t<p v-if=\"finished\" style=\"margin-top: 1rem;\">Finished!</p>"
+        }
+      ]
+    },
     {
       "name": "QSwitch",
       "description": "The `QSwitch` component is an accessible, customizable toggle control for switching between two states (e.g., on/off, true/false). It supports labels, size overrides, custom colors, and disabled states.",
@@ -9132,22 +9463,22 @@
         {
           "title": "Custom Color",
           "description": "Switch with a custom checked color instead of the default theme color.",
-          "code": "<QSwitch :model-value=\"true\" :checked-color=\"rgb(0, 200, 83)\" />"
+          "code": "<QSwitch :model-value=\"true\" checked-color=\"rgb(0, 200, 83)\" />"
         },
         {
           "title": "Custom Switch",
           "description": "A themed switch using emoji labels and a custom color, ideal for toggling between light and dark modes.",
-          "code": "<QSwitch :model-value=\"true\" :show-state-labels=\"true\" :true-label=\"🌙 Dark\" :false-label=\"☀️ Light\" :checked-color=\"#333\" />"
+          "code": "<QSwitch :model-value=\"true\" :show-state-labels=\"true\" label=\"Theme\" true-label=\"🌙 Dark\" false-label=\"☀️ Light\" checked-color=\"#333\" />"
         },
         {
           "title": "With Label Prop",
           "description": "Switch using the built-in `label` prop for a simple text label.",
-          "code": "<QSwitch :label=\"I agree to the terms and conditions\" />"
+          "code": "<QSwitch label=\"I agree to the terms and conditions\" />"
         },
         {
           "title": "With External Label",
-          "description": "Custom setup connecting `QSwitch` with a separate `QLabel` component using `for` / `id` props for accessible labeling.",
-          "code": "<div style=\"display: flex; align-items: center; gap: 0.5rem; width: 100%; place-content: space-between;\">\n\t\t\t\t<QLabel :for=\"'custom-switch'\">Subscribe to newsletter</QLabel>\n\t\t\t\t<QSwitch v-bind=\"args\" id=\"custom-switch\" />\n\t\t\t</div>"
+          "description": "Custom setup connecting `QSwitch` with a separate `QLabel` component using `for` / `id` props for accessible labeling. The meta `label` is cleared so the built-in label is not rendered beside it.",
+          "code": "<div style=\"display: flex; align-items: center; gap: 0.5rem; width: 100%; place-content: space-between;\">\n\t\t\t\t<QLabel :for=\"'custom-switch'\">Subscribe to newsletter</QLabel>\n\t\t\t\t<QSwitch v-bind=\"args\" id=\"custom-switch\" :label=\"undefined\" />\n\t\t\t</div>"
         }
       ]
     },
@@ -9253,22 +9584,22 @@
         {
           "title": "Vertical",
           "description": "Vertical tab list beside the panels.",
-          "code": "<QTabs :direction=\"vertical\" />"
+          "code": "<QTabs direction=\"vertical\" />"
         },
         {
           "title": "Card",
           "description": "Card-style folder tabs that merge into the panel.",
-          "code": "<QTabs :variant=\"card\" />"
+          "code": "<QTabs variant=\"card\" />"
         },
         {
           "title": "Card Vertical",
           "description": "Card-style tabs in a vertical layout.",
-          "code": "<QTabs :variant=\"card\" :direction=\"vertical\" />"
+          "code": "<QTabs variant=\"card\" direction=\"vertical\" />"
         },
         {
           "title": "Align",
           "description": "Tabs distributed across the tab list.",
-          "code": "<QTabs :align=\"justify\" />"
+          "code": "<QTabs align=\"justify\" />"
         },
         {
           "title": "With Required",
@@ -9542,27 +9873,22 @@
         {
           "title": "Placeholder",
           "description": "Provides a hint or example text inside the field.",
-          "code": "<QTextArea :placeholder=\"Placeholder\" />"
+          "code": "<QTextArea placeholder=\"Placeholder\" />"
         },
         {
           "title": "Readonly",
           "description": "Conveys a read-only appearance to the field.",
-          "code": "<QTextArea :model-value=\"Readonly\" :readonly=\"true\" />"
+          "code": "<QTextArea model-value=\"Readonly\" :readonly=\"true\" />"
         },
         {
           "title": "Disabled",
           "description": "Disables the field, preventing interaction with it.",
-          "code": "<QTextArea :model-value=\"Disabled\" :disabled=\"true\" />"
-        },
-        {
-          "title": "Label",
-          "description": "Provides a textual description for the field.",
-          "code": "<QTextArea :label=\"Username\" />"
+          "code": "<QTextArea model-value=\"Disabled\" :disabled=\"true\" />"
         },
         {
           "title": "Required",
           "description": "Displays an asterisk (*) next to the label, to indicate that the field is required.",
-          "code": "<QTextArea :label=\"Username\" :required=\"true\" />"
+          "code": "<QTextArea label=\"Username\" :required=\"true\" />"
         },
         {
           "title": "Custom Label",
@@ -9805,27 +10131,22 @@
         {
           "title": "Placeholder",
           "description": "Provides a hint or example text inside the field.",
-          "code": "<QTextField :placeholder=\"Placeholder\" />"
+          "code": "<QTextField placeholder=\"Placeholder\" />"
         },
         {
           "title": "Readonly",
           "description": "Conveys a read-only appearance to the field.",
-          "code": "<QTextField :model-value=\"Readonly\" :readonly=\"true\" />"
+          "code": "<QTextField model-value=\"Readonly\" :readonly=\"true\" />"
         },
         {
           "title": "Disabled",
           "description": "Disables the field, preventing interaction with it.",
-          "code": "<QTextField :model-value=\"Disabled\" :disabled=\"true\" />"
-        },
-        {
-          "title": "Label",
-          "description": "Provides a textual description for the field.",
-          "code": "<QTextField :label=\"Username\" />"
+          "code": "<QTextField model-value=\"Disabled\" :disabled=\"true\" />"
         },
         {
           "title": "Required",
           "description": "Displays an asterisk (*) next to the label, to indicate that the field is required.",
-          "code": "<QTextField :label=\"Username\" :required=\"true\" />"
+          "code": "<QTextField label=\"Username\" :required=\"true\" />"
         },
         {
           "title": "Clearable",
@@ -9835,7 +10156,7 @@
         {
           "title": "Max Length",
           "description": "Restricts the input to a specified maximum number of characters.",
-          "code": "<QTextField :model-value=\"Truncated\" :max-length=\"5\" />"
+          "code": "<QTextField model-value=\"Truncated\" :max-length=\"5\" />"
         },
         {
           "title": "Custom Label",
@@ -10011,6 +10332,17 @@
             "required": false,
             "category": "Configuration"
           },
+          {
+            "name": "texts",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom text configurations.",
+            "default": "DEFAULT_TEXTS",
+            "required": false,
+            "category": "Configuration"
+          },
           {
             "name": "entryKey",
             "type": {
@@ -10052,12 +10384,12 @@
         {
           "title": "Default",
           "description": "Default aspect of the toast.",
-          "code": "<QToast :text=\"Hey! I am a component that gives feedback, nice to meet you.\" />"
+          "code": "<QToast text=\"Hey! I am a component that gives feedback, nice to meet you.\" />"
         },
         {
           "title": "With Title",
           "description": "Displays a header with a custom title.",
-          "code": "<QToast :title=\"Welcome\" />"
+          "code": "<QToast title=\"Welcome\" />"
         },
         {
           "title": "Block",
@@ -10077,12 +10409,12 @@
         {
           "title": "Bold",
           "description": "Displays the toast with a bold background color.",
-          "code": "<QToast :color=\"danger\" :variant=\"bold\" :text=\"An unexpected error occured!\" />"
+          "code": "<QToast color=\"danger\" variant=\"bold\" text=\"An unexpected error occured!\" />"
         },
         {
           "title": "Outlined",
           "description": "Displays an outlined toast with a transparent background.",
-          "code": "<QToast :color=\"danger\" :variant=\"outlined\" :elevation=\"none\" :text=\"An unexpected error occured!\" />"
+          "code": "<QToast color=\"danger\" variant=\"outlined\" elevation=\"none\" text=\"An unexpected error occured!\" />"
         },
         {
           "title": "Custom Body",
@@ -10287,7 +10619,7 @@
         {
           "title": "Default",
           "description": "",
-          "code": "<q-toggle v-bind=\"args\">\n\t\t  <q-icon icon=\"format-underline\" />\n\t\t</q-toggle>"
+          "code": "<q-toggle v-bind=\"args\" aria-label=\"Underline\">\n\t\t  <q-icon icon=\"format-underline\" />\n\t\t</q-toggle>"
         }
       ]
     },
@@ -10692,17 +11024,17 @@
         {
           "title": "Delay",
           "description": "Controls the delay (in ms) after which the tooltip becomes visible.",
-          "code": "<QTooltip :text=\"Fast!\" :delay=\"0\" />"
+          "code": "<QTooltip text=\"Fast!\" :delay=\"0\" />"
         },
         {
           "title": "Arrow",
           "description": "Shows or hides the tooltip arrow.",
-          "code": "<QTooltip :text=\"A tooltip with no arrow\" :arrow=\"false\" />"
+          "code": "<QTooltip text=\"A tooltip with no arrow\" :arrow=\"false\" />"
         },
         {
           "title": "HTML Support",
           "description": "Enables HTML support for the tooltip text.",
-          "code": "<QTooltip :text=\"This is a tooltip. Did you know that the contents of tooltips can be formatted?<br><br>HTML is fully supported, so text formatting options such as <b>bold</b>, <i>italic</i>, or even<br>newlines can be used.\" />"
+          "code": "<QTooltip text=\"This is a tooltip. Did you know that the contents of tooltips can be formatted?&lt;br>&lt;br>HTML is fully supported, so text formatting options such as &lt;b>bold&lt;/b>, &lt;i>italic&lt;/i>, or even&lt;br>newlines can be used.\" />"
         }
       ]
     }