@quidgest/ui 0.17.9 → 0.18.0

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.17.9",
+  "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"
           },
@@ -4779,7 +4790,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.",
             "default": "false",
             "required": false,
             "category": "State"
@@ -5514,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"
           },
@@ -6152,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"
           },
@@ -6456,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"
           },
@@ -7084,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"
           },
@@ -7249,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.",
@@ -7289,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"
           },
@@ -7578,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"
           },

package/dist/manifest/components.json

@@ -54,6 +54,8 @@
   "QSkeletonLoader",
   "QSpinnerLoader",
   "QSwitch",
+  "QTabs",
+  "QTab",
   "QTextArea",
   "QTextField",
   "DEFAULT_TEXTS",

package/dist/ui.css

@@ -351,6 +351,31 @@ body *::-webkit-scrollbar-track {
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 
+/**
+ * Visually hide content while keeping it available to assistive technologies.
+ *
+ * Prefer the global `.q-sr-only` class; use this mixin when composing into
+ * another selector.
+ */
+/* Shared utility classes */
+/**
+ * Screen-reader-only text: visually hidden, still announced by assistive tech.
+ *
+ * @example
+ * <span class="q-sr-only">required</span>
+ */
+.q-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 .q-chevron {
   transition: all 0.2s;
 }
@@ -374,6 +399,26 @@ body *::-webkit-scrollbar-track {
   opacity: 1;
 }
 
+.q-required-indicator {
+  display: contents;
+}
+.q-required-indicator__mark {
+  margin-inline-start: 0.25em;
+  font-weight: 700;
+  color: var(--q-theme-danger);
+}
+
+.q-safe-triangle {
+  position: fixed;
+  z-index: 1071;
+  overflow: visible;
+  pointer-events: none;
+}
+.q-safe-triangle__path {
+  pointer-events: auto;
+  fill: transparent;
+}
+
 .q-accordion {
   display: flex;
   flex-direction: column;
@@ -1304,18 +1349,6 @@ body *::-webkit-scrollbar-track {
   height: 100%;
 }
 
-.q-carousel__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
 @media (max-width: 768px) {
   .q-carousel {
     --q-carousel-height: 300px;
@@ -1529,12 +1562,12 @@ body *::-webkit-scrollbar-track {
   justify-content: start;
   align-items: flex-start;
   flex-direction: column;
-  padding: 0.55rem;
+  padding: 0;
 }
 .q-collapsible__btn {
   width: 100%;
   margin: 0;
-  padding: 0;
+  padding: 0.55rem;
 }
 .q-collapsible__btn .q-button__content {
   gap: 0;
@@ -1601,20 +1634,16 @@ body *::-webkit-scrollbar-track {
 .q-collapsible--border-bottom .q-collapsible__header {
   border: 0;
 }
-.q-collapsible--required {
-  font-weight: 700;
-  color: var(--q-theme-danger);
-}
 .q-collapsible--icon-right:not(.q-collapsible--borderless) .q-collapsible__title .q-icon {
   margin: 0 0 0 auto;
 }
 .q-collapsible--icon-right .q-collapsible__subtitle {
   margin-left: 0;
 }
-.q-collapsible--loose .q-collapsible__header {
+.q-collapsible--loose .q-collapsible__btn {
   padding: calc(0.55rem + 0.25rem);
 }
-.q-collapsible--compact .q-collapsible__header {
+.q-collapsible--compact .q-collapsible__btn {
   padding: calc(0.55rem + -0.25rem);
 }
 
@@ -4708,11 +4737,6 @@ body *::-webkit-scrollbar-track {
 .q-label .q-icon {
   color: currentcolor;
 }
-.q-label--required::after {
-  content: " *";
-  font-weight: 700;
-  color: var(--q-theme-danger);
-}
 .q-label--topright {
   align-self: flex-end;
 }
@@ -5841,6 +5865,188 @@ body *::-webkit-scrollbar-track {
     transition: none;
   }
 }
+.q-tabs {
+  display: flex;
+  gap: 0;
+}
+.q-tabs--horizontal {
+  flex-direction: column;
+}
+.q-tabs--horizontal .q-tabs__list {
+  flex-direction: row;
+  width: 100%;
+  border-bottom: 1px solid var(--q-theme-neutral-light);
+}
+.q-tabs--horizontal .q-tab {
+  margin-bottom: -1px;
+}
+.q-tabs--horizontal .q-tabs__panels {
+  border: 1px solid var(--q-theme-neutral-light);
+  border-top: 0;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  padding-inline: 0.5rem;
+}
+.q-tabs--vertical {
+  flex-direction: row;
+  align-items: stretch;
+}
+.q-tabs--vertical .q-tabs__list {
+  flex: 0 0 auto;
+  flex-direction: column;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
+  border-inline-end: 1px solid var(--q-theme-neutral-light);
+}
+.q-tabs--vertical .q-tab {
+  justify-content: flex-start;
+  margin-inline-end: -1px;
+}
+.q-tabs--vertical .q-tabs__panels {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--q-theme-neutral-light);
+  border-inline-start: 0;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  padding-inline: 0.5rem;
+}
+.q-tabs--line.q-tabs--horizontal .q-tab {
+  border-bottom: 4px solid transparent;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+.q-tabs--line.q-tabs--horizontal .q-tab--active {
+  border-bottom-color: var(--q-theme-primary);
+}
+@media (hover: hover) {
+  .q-tabs--line.q-tabs--horizontal .q-tab:hover:not(:disabled, .q-tab--active) {
+    border-bottom-color: currentcolor;
+  }
+}
+.q-tabs--line.q-tabs--vertical .q-tab {
+  border-inline-end: 4px solid transparent;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.q-tabs--line.q-tabs--vertical .q-tab--active {
+  border-inline-end-color: var(--q-theme-primary);
+}
+@media (hover: hover) {
+  .q-tabs--line.q-tabs--vertical .q-tab:hover:not(:disabled, .q-tab--active) {
+    border-inline-end-color: currentcolor;
+  }
+}
+.q-tabs--card .q-tabs__list {
+  gap: 0;
+}
+.q-tabs--card .q-tab {
+  border: 1px solid var(--q-theme-neutral-light);
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
+}
+.q-tabs--card .q-tab--active {
+  background-color: var(--q-theme-container);
+  z-index: 1;
+}
+@media (hover: hover) {
+  .q-tabs--card .q-tab:hover:not(:disabled) {
+    border-color: var(--q-theme-neutral-light);
+  }
+}
+.q-tabs--card.q-tabs--horizontal .q-tab {
+  border-start-start-radius: 0.25rem;
+  border-start-end-radius: 0.25rem;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+.q-tabs--card.q-tabs--horizontal .q-tab--active {
+  border-bottom-color: var(--q-theme-container);
+  color: var(--q-theme-primary);
+}
+@media (hover: hover) {
+  .q-tabs--card.q-tabs--horizontal .q-tab--active:hover:not(:disabled) {
+    border-bottom-color: var(--q-theme-container);
+  }
+}
+.q-tabs--card.q-tabs--vertical .q-tab {
+  border-start-start-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.q-tabs--card.q-tabs--vertical .q-tab--active {
+  border-inline-end-color: var(--q-theme-container);
+}
+@media (hover: hover) {
+  .q-tabs--card.q-tabs--vertical .q-tab--active:hover:not(:disabled) {
+    border-inline-end-color: var(--q-theme-container);
+  }
+}
+.q-tabs--align-start .q-tabs__list {
+  justify-content: flex-start;
+}
+.q-tabs--align-end .q-tabs__list {
+  justify-content: flex-end;
+}
+.q-tabs--align-center .q-tabs__list {
+  justify-content: center;
+}
+.q-tabs--align-justify .q-tabs__list {
+  justify-content: space-between;
+}
+.q-tabs--align-justify .q-tabs__list .q-tab {
+  flex: 1;
+}
+.q-tabs__list {
+  display: flex;
+  gap: 0.25rem;
+}
+.q-tabs__panels {
+  padding-block: 0.5rem;
+}
+.q-tabs__panel:focus {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
+}
+.q-tabs__panel:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+.q-tab {
+  background: transparent;
+  border: 0;
+  padding: 0.5rem 0.75rem;
+}
+.q-tab.q-button {
+  color: var(--q-theme-on-background);
+}
+.q-tab--active.q-button {
+  color: var(--q-theme-primary);
+  cursor: default;
+}
+.q-tab--active.q-button:hover:not(:disabled) {
+  color: var(--q-theme-primary);
+  cursor: default;
+}
+.q-tab__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+.q-tab__title-text {
+  font-weight: 600;
+}
+.q-tab--disabled {
+  cursor: not-allowed;
+}
+.q-tab--disabled:hover {
+  cursor: not-allowed;
+}
+
 .q-text-area {
   /* Container styles */
   display: flex;