@quidgest/ui 0.17.8 → 0.18.0

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.17.8",
+  "version": "0.18.0",
   "components": [
     {
       "name": "QAccordion",
@@ -1328,7 +1328,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).",
             "required": false,
             "category": "State"
           },
@@ -1629,7 +1629,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "Show an indicator that there are required elements inside the group.",
+            "description": "Show an indicator that there are required elements inside the group.\n\nThe asterisk is decorative (`aria-hidden`); {@link QRequiredIndicator }\nwith `announce` exposes the state to assistive tech via `.q-sr-only`\n(from `texts.required`).",
             "required": false,
             "category": "State"
           },
@@ -1643,6 +1643,17 @@
             "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": [
@@ -1993,7 +2004,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
             "required": false,
             "category": "State"
           },
@@ -2357,7 +2368,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
             "required": false,
             "category": "State"
           },
@@ -3414,7 +3425,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
             "required": false,
             "category": "State"
           },
@@ -3569,7 +3580,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
             "required": false,
             "category": "State"
           },
@@ -4063,7 +4074,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
             "required": false,
             "category": "State"
           },
@@ -4275,7 +4286,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).",
             "required": false,
             "category": "State"
           },
@@ -4647,7 +4658,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).",
             "required": false,
             "category": "State"
           },
@@ -4739,6 +4750,324 @@
         }
       ]
     },
+    {
+      "name": "QObfuscation",
+      "description": "Permission-based data obfuscation for consulta / sensitive fields. - No permission: plain \"Restricted\" (or bullets) — no action. - Can reveal: a padlock toggles the value. When revealed, either: - place scoped-slot `qObfuscationHideAction` on the field's `label.append` (QObfuscation then hides its own label/padlock), or - omit it and QObfuscation keeps its label with the hide padlock. - Set `loading` while fetching on reveal (before the value becomes visible).",
+      "meta": {
+        "props": [
+          {
+            "name": "revealed",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "",
+            "required": false
+          },
+          {
+            "name": "id",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The component unique identifier.",
+            "required": false,
+            "category": "Identification"
+          },
+          {
+            "name": "label",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The label of the input.",
+            "required": false,
+            "category": "Content"
+          },
+          {
+            "name": "required",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "default": "false",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "for",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The form field associated with the label.",
+            "required": false,
+            "category": "Accessibility"
+          },
+          {
+            "name": "labelPosition",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "right",
+                "left",
+                "center",
+                "topleft",
+                "topright"
+              ]
+            },
+            "description": "Position of the label relative to the input field.\n- 'left': Label appears to the left of the input\n- 'center': Label appears above the input, centered\n- 'right': Label appears to the right of the input\n- 'topleft': Label appears above the input, aligned to the left\n- 'topright': Label appears above the input, aligned to the right",
+            "default": "topleft",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "size",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "medium",
+                "small",
+                "large",
+                "block",
+                "xlarge",
+                "xxlarge",
+                "mini"
+              ]
+            },
+            "description": "The size category of the field.",
+            "default": "medium",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "readonly",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether the input is readonly.",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "disabled",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether the input is disabled.",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "invalid",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "Whether the input is invalid.",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "revealable",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "When false, the value stays masked with no reveal control (PDF \"Obfuscation\").\nWhen true, the user can reveal and hide the slot content (PDF \"Allow data to be revealed\").",
+            "default": "false",
+            "required": false,
+            "category": "Behavior"
+          },
+          {
+            "name": "loading",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "When true, shows the reveal button in a loading state while sensitive\ndata is being fetched. Forwarded to the reveal `QButton`.",
+            "default": "false",
+            "required": false,
+            "category": "State"
+          },
+          {
+            "name": "mask",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "restricted",
+                "bullets"
+              ]
+            },
+            "description": "Mask style shown while the slot content is hidden.",
+            "default": "restricted",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "bulletCount",
+            "type": {
+              "kind": "primitive",
+              "name": "number"
+            },
+            "description": "Number of bullet characters when `mask` is `bullets`.",
+            "default": "12",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "icons",
+            "type": {
+              "kind": "object",
+              "fields": {}
+            },
+            "description": "Custom icon configurations.",
+            "default": "DEFAULT_ICONS",
+            "required": false,
+            "category": "Configuration"
+          },
+          {
+            "name": "texts",
+            "type": {
+              "kind": "unknown",
+              "raw": "Partial<{ restricted: string; showData: string; hideData: string; }> | undefined"
+            },
+            "description": "Custom text configurations.",
+            "default": "DEFAULT_TEXTS",
+            "required": false,
+            "category": "Configuration"
+          }
+        ],
+        "events": [
+          {
+            "name": "hide",
+            "description": "",
+            "type": "[]"
+          },
+          {
+            "name": "update:revealed",
+            "description": "",
+            "type": "[value: boolean]"
+          },
+          {
+            "name": "reveal",
+            "description": "",
+            "type": "[]"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": ""
+          },
+          {
+            "name": "reveal",
+            "description": ""
+          },
+          {
+            "name": "mask",
+            "description": ""
+          },
+          {
+            "name": "label.prepend",
+            "description": ""
+          },
+          {
+            "name": "label.append",
+            "description": ""
+          },
+          {
+            "name": "extras",
+            "description": ""
+          }
+        ]
+      },
+      "examples": [
+        {
+          "title": "Obfuscation",
+          "description": "Role without permission — plain Restricted, no reveal control.",
+          "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\" />"
+        },
+        {
+          "title": "Revealable Hidden",
+          "description": "Allow reveal — masked state displays only a padlock (PDF step 1).",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\">\n\t\t\t\tField value revealed\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Shown",
+          "description": "Allow reveal — value shown with an open padlock on the slotted field label.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-text-field :label=\"args.label\" v-model=\"value\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-text-field>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Text Field",
+          "description": "Editable text field gated behind the padlock control.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-text-field v-model=\"taxId\" :label=\"args.label\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-text-field>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Password Field",
+          "description": "Password field — hide control on the field label.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-password-field v-model=\"secret\" :label=\"args.label\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-password-field>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Text Area",
+          "description": "Multi-line notes gated behind the padlock.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-text-area v-model=\"notes\" :label=\"args.label\" rows=\"3\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-text-area>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Combobox",
+          "description": "Combobox with suggestions — hide control on the field label.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-combobox v-model=\"city\" :label=\"args.label\" :items=\"items\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-combobox>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Color Picker",
+          "description": "Color picker — hide control on the field label.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<q-color-picker v-model=\"color\" :label=\"args.label\">\n\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</template>\n\t\t\t\t</q-color-picker>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Select",
+          "description": "Select has no `label.append` — omit the hide action so QObfuscation keeps its own label and padlock while gating the select.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\">\n\t\t\t\t<q-select v-model=\"classification\" :items=\"items\" />\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Date Time Picker",
+          "description": "Date picker has no `label.append` — QObfuscation keeps the label and padlock.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\">\n\t\t\t\t<q-date-time-picker\n\t\t\t\t\tv-model=\"dateOfBirth\"\n\t\t\t\t\tformat=\"dd/MM/yyyy\"\n\t\t\t\t\tplaceholder=\"Choose date\" />\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Checkbox",
+          "description": "Checkbox has no `label.append` — place `qObfuscationHideAction` beside the control.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<div style=\"display: inline-flex; align-items: center; gap: 0.5rem;\">\n\t\t\t\t\t<q-checkbox v-model=\"accepted\" :label=\"args.label\" />\n\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t</div>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Revealable Radio Group",
+          "description": "Radio group has no `label.append` — place `qObfuscationHideAction` beside the group.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t<div style=\"display: flex; align-items: flex-start; gap: 0.5rem;\">\n\t\t\t\t\t<q-radio-group v-model=\"plan\" :label=\"args.label\">\n\t\t\t\t\t\t<q-radio-button label=\"Basic\" value=\"basic\" />\n\t\t\t\t\t\t<q-radio-button label=\"Standard\" value=\"standard\" />\n\t\t\t\t\t\t<q-radio-button label=\"Premium\" value=\"premium\" />\n\t\t\t\t\t</q-radio-group>\n\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t</div>\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "title": "Field Variants",
+          "description": "Several field types together — pattern gallery.",
+          "code": "<div style=\"display: flex; flex-direction: column; gap: 1.25rem; max-width: 28rem;\">\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Tax ID\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedText\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-text-field v-model=\"taxId\" label=\"Tax ID\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-text-field>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"API secret\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedPassword\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-password-field v-model=\"secret\" label=\"API secret\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-password-field>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Private notes\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedNotes\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-text-area v-model=\"notes\" label=\"Private notes\" rows=\"3\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-text-area>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Home city\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedCity\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-combobox v-model=\"city\" label=\"Home city\" :items=\"comboboxItems\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-combobox>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Brand accent\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedColor\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<q-color-picker v-model=\"color\" label=\"Brand accent\">\n\t\t\t\t\t\t<template #label.append>\n\t\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</q-color-picker>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Classification\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedSelect\">\n\t\t\t\t\t<q-select v-model=\"classification\" :items=\"selectItems\" />\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Date of birth\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedDate\">\n\t\t\t\t\t<q-date-time-picker\n\t\t\t\t\t\tv-model=\"dateOfBirth\"\n\t\t\t\t\t\tformat=\"dd/MM/yyyy\"\n\t\t\t\t\t\tplaceholder=\"Choose date\" />\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Terms accepted\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedCheckbox\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<div style=\"display: inline-flex; align-items: center; gap: 0.5rem;\">\n\t\t\t\t\t\t<q-checkbox v-model=\"accepted\" label=\"Terms accepted\" />\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</div>\n\t\t\t\t</q-obfuscation>\n\n\t\t\t\t<q-obfuscation\n\t\t\t\t\tlabel=\"Subscription plan\"\n\t\t\t\t\tv-bind=\"args\"\n\t\t\t\t\tv-model:revealed=\"revealedRadio\"\n\t\t\t\t\tv-slot=\"{ qObfuscationHideAction }\">\n\t\t\t\t\t<div style=\"display: flex; align-items: flex-start; gap: 0.5rem;\">\n\t\t\t\t\t\t<q-radio-group v-model=\"plan\" label=\"Subscription plan\">\n\t\t\t\t\t\t\t<q-radio-button label=\"Basic\" value=\"basic\" />\n\t\t\t\t\t\t\t<q-radio-button label=\"Standard\" value=\"standard\" />\n\t\t\t\t\t\t\t<q-radio-button label=\"Premium\" value=\"premium\" />\n\t\t\t\t\t\t</q-radio-group>\n\t\t\t\t\t\t<component :is=\"qObfuscationHideAction\" />\n\t\t\t\t\t</div>\n\t\t\t\t</q-obfuscation>\n\t\t\t</div>"
+        },
+        {
+          "title": "Loading",
+          "description": "Simulated server fetch after reveal — spinner until data is ready.",
+          "code": "<q-obfuscation\n\t\t\t\tv-bind=\"args\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\tv-model:revealed=\"revealed\"\n\t\t\t\t@hide=\"onHide\">\n\t\t\t\t<template #reveal>\n\t\t\t\t\t<q-button\n\t\t\t\t\t\tvariant=\"text\"\n\t\t\t\t\t\tborderless\n\t\t\t\t\t\tblock\n\t\t\t\t\t\tclass=\"q-obfuscation__action\"\n\t\t\t\t\t\t:loading=\"loading\"\n\t\t\t\t\t\tlabel=\"Show data\"\n\t\t\t\t\t\tdata-testid=\"q-obfuscation__reveal\"\n\t\t\t\t\t\t@click=\"fetchAndReveal\">\n\t\t\t\t\t\t<q-icon icon=\"lock\" class=\"q-obfuscation__icon\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t\t{{ value }}\n\t\t\t</q-obfuscation>"
+        },
+        {
+          "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>"
+        }
+      ]
+    },
     {
       "name": "QOverlay",
       "description": "A generic overlay for creating floating elements.",
@@ -5196,7 +5525,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
             "required": false,
             "category": "State"
           },
@@ -5834,7 +6163,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).",
             "required": false,
             "category": "State"
           },
@@ -6138,7 +6467,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
             "required": false,
             "category": "State"
           },
@@ -6535,14 +6864,14 @@
             "type": "[value: string]"
           },
           {
-            "name": "click:item",
+            "name": "resize",
             "description": "",
-            "type": "[id: string]"
+            "type": "[width: number]"
           },
           {
-            "name": "resize",
+            "name": "click:item",
             "description": "",
-            "type": "[width: number]"
+            "type": "[id: string]"
           },
           {
             "name": "resize:start",
@@ -6766,7 +7095,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).",
             "required": false,
             "category": "State"
           },
@@ -6931,6 +7260,147 @@
         }
       ]
     },
+    {
+      "name": "QTabs",
+      "description": "Displays a set of tabbed panels. Only one panel is visible at a time.",
+      "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": "direction",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "horizontal",
+                "vertical"
+              ]
+            },
+            "description": "Orientation of the tab list.\n\nAlso mapped to `aria-orientation` on the tablist.",
+            "default": "horizontal",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "align",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "start",
+                "end",
+                "center",
+                "justify"
+              ]
+            },
+            "description": "Distribution of tabs along the tab list main axis.",
+            "default": "start",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "variant",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "line",
+                "card"
+              ]
+            },
+            "description": "Visual style of the tabs.",
+            "default": "line",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "disabled",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "If true, disables all nested tabs via defaults cascade.",
+            "required": false,
+            "category": "State"
+          }
+        ],
+        "events": [
+          {
+            "name": "update:modelValue",
+            "description": "",
+            "type": "[value: string]"
+          }
+        ],
+        "slots": [
+          {
+            "name": "default",
+            "description": ""
+          }
+        ]
+      },
+      "examples": [
+        {
+          "title": "Default",
+          "description": "Default horizontal tabs.",
+          "code": "<q-tabs v-bind=\"args\">\n\t\t\t\t<q-tab title=\"Details\" value=\"details\">\n\t\t\t\t\tContent for the details tab.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"History\" value=\"history\">\n\t\t\t\t\tContent for the history tab.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"Settings\" value=\"settings\">\n\t\t\t\t\tContent for the settings tab.\n\t\t\t\t</q-tab>\n\t\t\t</q-tabs>"
+        },
+        {
+          "title": "Vertical",
+          "description": "Vertical tab list beside the panels.",
+          "code": "<QTabs :direction=\"vertical\" />"
+        },
+        {
+          "title": "Card",
+          "description": "Card-style folder tabs that merge into the panel.",
+          "code": "<QTabs :variant=\"card\" />"
+        },
+        {
+          "title": "Card Vertical",
+          "description": "Card-style tabs in a vertical layout.",
+          "code": "<QTabs :variant=\"card\" :direction=\"vertical\" />"
+        },
+        {
+          "title": "Align",
+          "description": "Tabs distributed across the tab list.",
+          "code": "<QTabs :align=\"justify\" />"
+        },
+        {
+          "title": "With Required",
+          "description": "Tab with a required asterisk on the label.",
+          "code": "<q-tabs v-bind=\"args\">\n\t\t\t\t<q-tab title=\"Details\" value=\"details\" required>\n\t\t\t\t\tRequired section content.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"History\" value=\"history\">\n\t\t\t\t\tOptional section content.\n\t\t\t\t</q-tab>\n\t\t\t</q-tabs>"
+        },
+        {
+          "title": "With Title Slots",
+          "description": "Tabs with prepend and append title slots.",
+          "code": "<q-tabs v-bind=\"args\">\n\t\t\t\t<q-tab title=\"Inbox\" value=\"inbox\">\n\t\t\t\t\t<template #title.prepend>📥</template>\n\t\t\t\t\t<template #title.append>(3)</template>\n\t\t\t\t\tInbox messages.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"Sent\" value=\"sent\">\n\t\t\t\t\t<template #title.prepend>📤</template>\n\t\t\t\t\tSent messages.\n\t\t\t\t</q-tab>\n\t\t\t</q-tabs>"
+        },
+        {
+          "title": "Disabled",
+          "description": "Disabled tab and parent-level disable cascade.",
+          "code": "<q-tabs v-bind=\"args\">\n\t\t\t\t<q-tab title=\"Details\" value=\"details\">\n\t\t\t\t\tDetails content.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"History\" value=\"history\" disabled>\n\t\t\t\t\tHistory content.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"Settings\" value=\"settings\">\n\t\t\t\t\tSettings content.\n\t\t\t\t</q-tab>\n\t\t\t</q-tabs>"
+        },
+        {
+          "title": "Controlled",
+          "description": "Controlled active tab via v-model.",
+          "code": "<p>Active: {{ active }}</p>\n\t\t\t<q-tabs v-bind=\"args\" v-model=\"active\">\n\t\t\t\t<q-tab title=\"Details\" value=\"details\">\n\t\t\t\t\tDetails content.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"History\" value=\"history\">\n\t\t\t\t\tHistory content.\n\t\t\t\t</q-tab>\n\t\t\t\t<q-tab title=\"Settings\" value=\"settings\">\n\t\t\t\t\tSettings content.\n\t\t\t\t</q-tab>\n\t\t\t</q-tabs>"
+        }
+      ]
+    },
     {
       "name": "QTextArea",
       "description": "An extension of the `QField` component, providing a specialized field for textual data with multiple lines.",
@@ -6971,7 +7441,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
             "required": false,
             "category": "State"
           },
@@ -7260,7 +7730,7 @@
               "kind": "primitive",
               "name": "boolean"
             },
-            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
+            "description": "If set to true, an asterisk (*) is displayed\nto indicate that the associated field is required.\n\nThe asterisk is decorative (`aria-hidden`). Required state for assistive\ntech should come from the associated control (e.g. native `required` on inputs).\nIf set to true, an asterisk (*) is displayed\nto indicate that the field is required.",
             "required": false,
             "category": "State"
           },