@quidgest/ui 0.18.0 → 0.19.0

package/CHANGELOG.md

@@ -0,0 +1,79 @@
+# Changelog
+
+All notable changes to `@quidgest/ui` are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+On `0.x`, breaking changes typically ship as a **minor** bump. The `/release` workflow appends a section for each **major**/**minor** release (and for **patch** when there is something notable), including public API breaks with migration steps plus notable Added/Changed/Fixed entries. This file also ships in the npm package.
+
+Entries below start at **0.16.0**. Earlier history is in git / GitLab MRs. Patch releases within a minor line may be summarized under that minor unless a break shipped in between.
+
+## [0.19.0] - 2026-08-21
+
+### Changed
+
+- **Breaking:** `QGroupBox` renamed to `QSection` — use `QSection` / `<q-section>`, CSS `q-section` / `q-section--*`, types `QSectionProps` / `QSectionVariant`, and `provideDefaults` key `QSection` instead of the `QGroupBox*` equivalents.
+- **Breaking:** `QSidebar` composition API — remove the `panels` prop and per-id named slots (`content:${id}`, `header:${id}`, …); nest `QSidebarItem` children (import alongside `QSidebar`) with a `value` (was `id`), item-level slots (`header` / `footer` / `anchor` / default), and size/resize props on each item. Default `initialWidth` is `medium`; resizable panels default `maxWidth` to `block`. Panel content/header/footer now include built-in `1rem` margins — trim consumer padding to avoid double spacing. Fluid sizes `xlarge` (50%) and `block` (100%) expect a width-defined parent.
+
+### Added
+
+- `QTabs` — sliding line-variant active indicator; `QTab` `#title` slot (with `#title.prepend` / `#title.append`) for custom labels
+
+### Fixed
+
+- Nested component CSS specificity hardened so theme/default overrides apply more reliably
+
+## [0.18.0] - 2026-08-18
+
+### Added
+
+- `QTabs` — accessible tabs component
+- `QRequiredIndicator` — shared required-field mark
+- `QDropdownMenu` — safe-triangle hover path for nested submenus
+
+### Changed
+
+- `QDateTimePicker` — commit valid values on Enter/blur instead of masking while typing; tabbing / focus improvements
+- `QCollapsible` — full header is clickable
+
+### Infrastructure
+
+- Storybook 10.5 and pnpm 11.21 bumps
+
+## [0.17.0] - 2026-06-24
+
+### Changed
+
+- **Breaking:** `QDateTimePicker` replaced with a custom zero-dependency implementation — drop the previous `@vuepic/vue-datepicker`-based usage; re-check props, events, slots, and styling against the new component (Storybook / types).
+
+### Added _(0.17.x)_
+
+- `QObfuscation` — data obfuscation component
+- `QDateTimePicker` — `open` / `close` events, further mask/range/focus fixes across 0.17.1–0.17.9
+
+### Infrastructure _(0.17.x)_
+
+- UI package build migrated to Vite 8 (Rolldown)
+
+## [0.16.0] - 2025-05-06
+
+### Changed
+
+- **Breaking:** Unified group / toggle APIs for consistency:
+    - Rename `QButtonToggle` → `QToggleButton`; pass items via the default slot (`options` prop removed)
+    - `QAccordion` now expects `QAccordionItem` children in the default slot
+    - Remove `active` from `QButton`; use `QToggle` for stateful toggle behaviour
+
+### Added _(0.16.x through 0.16.75)_
+
+- Layout: `QSidebar`, grid primitives (`QContainer` / `QRow` / `QCol` / `QSpacer`), `QDivider`, `QSpacing` utilities
+- Overlays / feedback: `QDialog` + `QDialogProvider` / `useDialog`, `QToast`, `QFocusWrap`, nested `QDropdownMenu`
+- Inputs / display: `QSwitch`, `QAvatar`, `QCarousel`, `QGroupBox`, `QSelect` multi-select with badges, date-range on `QDateTimePicker`
+- Theming / defaults: `QDefaultsProvider`, `QThemeProvider` accepts full `ThemeDefinition`, configurable `QField` / `QLabel` `labelPosition`
+- Tooling: `@category` JSDoc on props (api-generator / Storybook)
+
+### Fixed _(highlights)_
+
+- Broad accessibility and focus-trap work across `QOverlay`, `QSelect`, `QCheckbox`, `QRadioGroup`, and related controls
+- Mobile overlay dismissal and button hover sticky-state fixes

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.18.0",
+  "version": "0.19.0",
   "components": [
     {
       "name": "QAccordion",
@@ -3857,110 +3857,6 @@
         }
       ]
     },
-    {
-      "name": "QGroupBox",
-      "description": "A container with a title that groups related content.",
-      "meta": {
-        "props": [
-          {
-            "name": "id",
-            "type": {
-              "kind": "primitive",
-              "name": "string"
-            },
-            "description": "The component unique identifier.",
-            "required": false,
-            "category": "Identification"
-          },
-          {
-            "name": "title",
-            "type": {
-              "kind": "primitive",
-              "name": "string"
-            },
-            "description": "The title of the group box.",
-            "required": false,
-            "category": "Content"
-          },
-          {
-            "name": "borderless",
-            "type": {
-              "kind": "primitive",
-              "name": "boolean"
-            },
-            "description": "If true, the group box has no borders.",
-            "required": false,
-            "category": "Presentation"
-          },
-          {
-            "name": "variant",
-            "type": {
-              "kind": "enum",
-              "values": [
-                "default",
-                "background",
-                "title-background",
-                "minor",
-                "minor-border-top"
-              ]
-            },
-            "description": "The styling variant of the group box.",
-            "default": "default",
-            "required": false,
-            "category": "Presentation"
-          },
-          {
-            "name": "block",
-            "type": {
-              "kind": "primitive",
-              "name": "boolean"
-            },
-            "description": "If true, the group box spans the full width of its container.",
-            "required": false,
-            "category": "Presentation"
-          }
-        ],
-        "events": [],
-        "slots": [
-          {
-            "name": "default",
-            "description": ""
-          }
-        ]
-      },
-      "examples": [
-        {
-          "title": "Default",
-          "description": "A basic group box with a title and example content.",
-          "code": "<q-group-box v-bind=\"args\">\n\t\t\t\t<span>Example of a group box</span>\n\t\t\t</q-group-box>"
-        },
-        {
-          "title": "No Title",
-          "description": "A group box without a title.",
-          "code": "<QGroupBox  />"
-        },
-        {
-          "title": "Borderless",
-          "description": "A group box without borders.",
-          "code": "<QGroupBox :title=\"Borderless\" :borderless=\"true\" />"
-        },
-        {
-          "title": "Block",
-          "description": "A group box spanning full width of its container.",
-          "code": "<QGroupBox :title=\"Block Group Box\" :block=\"true\" />"
-        },
-        {
-          "title": "Variants",
-          "description": "Group box with different styling variants.",
-          "code": "<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n\t\t\t\t<q-group-box title=\"Default\" variant=\"default\">\n\t\t\t\t\t<p>Default variant content</p>\n\t\t\t\t</q-group-box>\n\t\t\t\t<q-group-box title=\"Background\" variant=\"background\">\n\t\t\t\t\t<p>Background variant content</p>\n\t\t\t\t</q-group-box>\n\t\t\t\t<q-group-box title=\"Minor\" variant=\"minor\">\n\t\t\t\t\t<p>Minor variant content</p>\n\t\t\t\t</q-group-box>\n\t\t\t\t<q-group-box title=\"Minor Border Top\" variant=\"minor-border-top\">\n\t\t\t\t\t<p>Minor with border top variant content</p>\n\t\t\t\t</q-group-box>\n\t\t\t\t<q-group-box title=\"Title Background\" variant=\"title-background\">\n\t\t\t\t\t<p>Title background variant content</p>\n\t\t\t\t</q-group-box>\n\t\t\t</div>"
-        },
-        {
-          "title": "Nested Groups",
-          "description": "Nested group boxes demonstrating hierarchy.",
-          "code": "<q-group-box v-bind=\"args\">\n\t\t\t\t<p>Top-level content</p>\n\t\t\t\t<q-group-box variant=\"minor\" title=\"Mid Level\">\n\t\t\t\t\t<p>Mid-level content</p>\n\t\t\t\t\t<q-group-box variant=\"minor-border-top\" title=\"Leaf\">\n\t\t\t\t\t\t<p>Leaf content</p>\n\t\t\t\t\t</q-group-box>\n\t\t\t\t</q-group-box>\n\t\t\t</q-group-box>"
-        }
-      ]
-    },
     {
       "name": "QIcon",
       "description": "Displays an icon. Note: This Storybook includes a Material Design Icons v7.3.67 SVG bundle for demonstration purposes. For the complete list of available icons, visit the official [Material Design Icons](https://pictogrammers.com/library/mdi/) page.",
@@ -6427,6 +6323,110 @@
         }
       ]
     },
+    {
+      "name": "QSection",
+      "description": "A container with a title that groups related content.",
+      "meta": {
+        "props": [
+          {
+            "name": "id",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The component unique identifier.",
+            "required": false,
+            "category": "Identification"
+          },
+          {
+            "name": "title",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The title of the section.",
+            "required": false,
+            "category": "Content"
+          },
+          {
+            "name": "borderless",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "If true, the section has no borders.",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "variant",
+            "type": {
+              "kind": "enum",
+              "values": [
+                "default",
+                "background",
+                "title-background",
+                "minor",
+                "minor-border-top"
+              ]
+            },
+            "description": "The styling variant of the section.",
+            "default": "default",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "block",
+            "type": {
+              "kind": "primitive",
+              "name": "boolean"
+            },
+            "description": "If true, the section spans the full width of its container.",
+            "required": false,
+            "category": "Presentation"
+          }
+        ],
+        "events": [],
+        "slots": [
+          {
+            "name": "default",
+            "description": ""
+          }
+        ]
+      },
+      "examples": [
+        {
+          "title": "Default",
+          "description": "A basic group box with a title and example content.",
+          "code": "<q-section v-bind=\"args\">\n\t\t\t\t<span>Example of a group box</span>\n\t\t\t</q-section>"
+        },
+        {
+          "title": "No Title",
+          "description": "A group box without a title.",
+          "code": "<QSection  />"
+        },
+        {
+          "title": "Borderless",
+          "description": "A group box without borders.",
+          "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\" />"
+        },
+        {
+          "title": "Variants",
+          "description": "Group box with different styling variants.",
+          "code": "<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n\t\t\t\t<q-section title=\"Default\" variant=\"default\">\n\t\t\t\t\t<p>Default variant content</p>\n\t\t\t\t</q-section>\n\t\t\t\t<q-section title=\"Background\" variant=\"background\">\n\t\t\t\t\t<p>Background variant content</p>\n\t\t\t\t</q-section>\n\t\t\t\t<q-section title=\"Minor\" variant=\"minor\">\n\t\t\t\t\t<p>Minor variant content</p>\n\t\t\t\t</q-section>\n\t\t\t\t<q-section title=\"Minor Border Top\" variant=\"minor-border-top\">\n\t\t\t\t\t<p>Minor with border top variant content</p>\n\t\t\t\t</q-section>\n\t\t\t\t<q-section title=\"Title Background\" variant=\"title-background\">\n\t\t\t\t\t<p>Title background variant content</p>\n\t\t\t\t</q-section>\n\t\t\t</div>"
+        },
+        {
+          "title": "Nested Groups",
+          "description": "Nested group boxes demonstrating hierarchy.",
+          "code": "<q-section v-bind=\"args\">\n\t\t\t\t<p>Top-level content</p>\n\t\t\t\t<q-section variant=\"minor\" title=\"Mid Level\">\n\t\t\t\t\t<p>Mid-level content</p>\n\t\t\t\t\t<q-section variant=\"minor-border-top\" title=\"Leaf\">\n\t\t\t\t\t\t<p>Leaf content</p>\n\t\t\t\t\t</q-section>\n\t\t\t\t</q-section>\n\t\t\t</q-section>"
+        }
+      ]
+    },
     {
       "name": "QSelect",
       "description": "A list of selectable items, activated by clicking on the main field.",
@@ -6809,17 +6809,14 @@
             "required": false
           },
           {
-            "name": "panels",
+            "name": "id",
             "type": {
-              "kind": "array",
-              "elementType": {
-                "name": "object",
-                "value": {}
-              }
+              "kind": "primitive",
+              "name": "string"
             },
-            "description": "List of panels that can be anchored in the sidebar.",
+            "description": "The component unique identifier.",
             "required": false,
-            "category": "Content"
+            "category": "Identification"
           },
           {
             "name": "anchorWidth",
@@ -6884,13 +6881,18 @@
             "type": "[finalWidth: number]"
           }
         ],
-        "slots": []
+        "slots": [
+          {
+            "name": "default",
+            "description": ""
+          }
+        ]
       },
       "examples": [
         {
           "title": "Default",
           "description": "Default sidebar with four panels and basic slot content.",
-          "code": "<QSidebar :panels=\"[\n\t\t\t{ id: 'activity', icon: { icon: 'bell' }, title: 'Activity' },\n\t\t\t{ id: 'chat', icon: { icon: 'chat' }, title: 'Chat' },\n\t\t\t{ id: 'calendar', icon: { icon: 'calendar' }, title: 'Calendar' },\n\t\t\t{ id: 'calls', icon: { icon: 'phone' }, title: 'Calls' }\n\t\t]\" />"
+          "code": "<QSidebar v-bind=\"args\">\n\t\t\t\t${defaultItems}\n\t\t\t</QSidebar>"
         },
         {
           "title": "With Labels",
@@ -6900,42 +6902,47 @@
         {
           "title": "Right",
           "description": "Sidebar positioned on the right side of the screen.",
-          "code": "<QSidebar :position=\"right\" />"
+          "code": "<QSidebar :show-labels=\"true\" :position=\"right\" />"
         },
         {
           "title": "Starts Expanded",
           "description": "Sidebar with a panel expanded by default.",
-          "code": "<QSidebar :model-value=\"activity\" />"
+          "code": "<QSidebar :show-labels=\"true\" :model-value=\"activity\" />"
         },
         {
           "title": "Panel Size",
           "description": "Sidebar panels with different predefined initial widths.",
-          "code": "<QSidebar v-bind=\"args\">\n                <template #content:activity>\n\t\t\t\t\t<div style=\"padding: 0 1rem;\">\n\t\t\t\t\t\t<p>Resize this panel to see how it behaves. Use the toggle group below to set the width of this panel.</p>\n\t\t\t\t\t\t<QToggleGroup v-model=\"args.panels[0].initialWidth\">\n\t\t\t\t\t\t\t<QToggleGroupItem value=\"small\" label=\"Small\" />\n\t\t\t\t\t\t\t<QToggleGroupItem value=\"medium\" label=\"Medium\" />\n\t\t\t\t\t\t\t<QToggleGroupItem value=\"large\" label=\"Large\" />\n\t\t\t\t\t\t</QToggleGroup>\n\t\t\t\t\t</div>\n                </template>\n            </QSidebar>"
+          "code": "<QSidebar v-bind=\"args\">\n\t\t\t\t<q-sidebar-item\n\t\t\t\t\tvalue=\"activity\"\n\t\t\t\t\ttitle=\"Activity\"\n\t\t\t\t\t:icon=\"{ icon: 'bell' }\"\n\t\t\t\t\t:initial-width=\"activityWidth\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p>Resize this panel to see how it behaves. Use the toggle group below to set the width of this panel.</p>\n\t\t\t\t\t\t<QToggleGroup v-model=\"activityWidth\">\n\t\t\t\t\t\t\t<QToggleGroupItem value=\"small\" label=\"Small\" />\n\t\t\t\t\t\t\t<QToggleGroupItem value=\"medium\" label=\"Medium\" />\n\t\t\t\t\t\t\t<QToggleGroupItem value=\"large\" label=\"Large\" />\n\t\t\t\t\t\t\t<QToggleGroupItem value=\"xlarge\" label=\"XLarge\" />\n\t\t\t\t\t\t\t<QToggleGroupItem value=\"block\" label=\"Block\" />\n\t\t\t\t\t\t</QToggleGroup>\n\t\t\t\t\t</div>\n\t\t\t\t</q-sidebar-item>\n\t\t\t\t<q-sidebar-item value=\"chat\" title=\"Chat\" :icon=\"{ icon: 'chat' }\" initial-width=\"large\" />\n\t\t\t\t<q-sidebar-item value=\"calendar\" title=\"Calendar\" :icon=\"{ icon: 'calendar' }\" initial-width=\"medium\" />\n\t\t\t\t<q-sidebar-item value=\"calls\" title=\"Calls\" :icon=\"{ icon: 'phone' }\" initial-width=\"small\" />\n\t\t\t</QSidebar>"
+        },
+        {
+          "title": "Fluid Sizes",
+          "description": "Sidebar with fluid panel sizes that fill half or all of the container.",
+          "code": "<QSidebar v-bind=\"args\" show-labels>\n\t\t\t\t<q-sidebar-item value=\"half\" title=\"Half\" :icon=\"{ icon: 'resize' }\" initial-width=\"xlarge\">\n\t\t\t\t\tThis panel occupies half of the container width.\n\t\t\t\t</q-sidebar-item>\n\t\t\t\t<q-sidebar-item value=\"full\" title=\"Full\" :icon=\"{ icon: 'arrow-expand' }\" initial-width=\"block\">\n\t\t\t\t\tThis panel occupies the full container width.\n\t\t\t\t</q-sidebar-item>\n\t\t\t</QSidebar>"
         },
         {
           "title": "Resizable",
           "description": "Sidebar with resizable panels enabled.",
-          "code": "<QSidebar :panels=\"[\n\t\t\t{ id: 'activity', icon: { icon: 'bell' }, title: 'Activity', resizable: true },\n\t\t\t{ id: 'chat', icon: { icon: 'chat' }, title: 'Chat', resizable: true },\n\t\t\t{ id: 'calendar', icon: { icon: 'calendar' }, title: 'Calendar', resizable: true },\n\t\t\t{ id: 'calls', icon: { icon: 'phone' }, title: 'Calls', resizable: true }\n\t\t]\" :model-value=\"activity\" />"
+          "code": "<QSidebar v-bind=\"args\">\n\t\t\t\t<q-sidebar-item value=\"activity\" title=\"Activity\" :icon=\"{ icon: 'bell' }\" resizable />\n\t\t\t\t<q-sidebar-item value=\"chat\" title=\"Chat\" :icon=\"{ icon: 'chat' }\" resizable />\n\t\t\t\t<q-sidebar-item value=\"calendar\" title=\"Calendar\" :icon=\"{ icon: 'calendar' }\" resizable />\n\t\t\t\t<q-sidebar-item value=\"calls\" title=\"Calls\" :icon=\"{ icon: 'phone' }\" resizable />\n\t\t\t</QSidebar>"
         },
         {
           "title": "Header",
-          "description": "Use the `header:${id}` slot to add a sticky header to a sidebar panel.",
-          "code": "<QSidebar v-bind=\"args\">\n                <template #header:activity>\n                    <img src=\"/logo.png\" style=\"max-height: 100px; max-width: 150px;\" />\n                </template>\n            </QSidebar>"
+          "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>"
         },
         {
           "title": "Content",
-          "description": "Use the `content:${id}` slot to add main content to a sidebar panel.",
-          "code": "<QSidebar v-bind=\"args\">\n                <template #content:activity>\n\t\t\t\t\t<div style=\"padding: 0 1rem;\">\n                    \tActivity content goes here.\n\t\t\t\t\t</div>\n                </template>\n            </QSidebar>"
+          "description": "Use the default slot to add main content to a sidebar panel.",
+          "code": "<QSidebar :model-value=\"activity\" />"
         },
         {
           "title": "Footer",
-          "description": "Use the `footer:${id}` slot to add a sticky footer to a sidebar panel.",
-          "code": "<QSidebar v-bind=\"args\">\n              <template #footer:chat>\n                <QCard\n\t\t\t\t\tclass=\"prompt\"\n\t\t\t\t\twidth=\"block\"\n\t\t\t\t\televation=\"low\">\n                  <QTextArea\n                    v-model=\"prompt\"\n                    class=\"prompt__textarea\"\n                    placeholder=\"Ask anything\"\n                    size=\"block\"\n                    :rows=\"1\"\n                    resize=\"none\"\n                    autosize\n                  />\n\n                  <template #footer>\n                    <div class=\"prompt__actions\">\n                      <QButton ref=\"upload\" pill>\n                        <QIcon icon=\"plus\" />\n                      </QButton>\n                      <QDropdownMenu\n                        :activator=\"uploadRef?.$el\"\n                        :items=\"uploadItems\"\n                        :groups=\"uploadGroups\"\n                      />\n\n                      <QToggle ref=\"search\" pill>\n                        <QIcon icon=\"earth\" />\n                        Search\n                      </QToggle>\n\n                      <QToggle ref=\"reason\" pill>\n                        <QIcon icon=\"lightbulb-outline\" />\n                        Reason\n                      </QToggle>\n\n                      <QButton ref=\"more\" pill>\n                        <QIcon icon=\"dots-horizontal\" />\n                      </QButton>\n                      <QDropdownMenu :activator=\"moreRef?.$el\" :items=\"moreItems\" />\n\n                      <QButton\n                        ref=\"action\"\n                        class=\"prompt__voice-mode\"\n                        variant=\"bold\"\n                        pill\n                      >\n                        <QIcon :icon=\"isPromptEmpty ? 'waveform' : 'arrow-up'\" />\n                      </QButton>\n                    </div>\n                  </template>\n                </QCard>\n              </template>\n            </QSidebar>"
+          "description": "Use the `footer` slot to add a sticky footer to a sidebar panel.",
+          "code": "<QSidebar v-bind=\"args\">\n\t\t\t\t<q-sidebar-item\n\t\t\t\t\tvalue=\"chat\"\n\t\t\t\t\ttitle=\"Chat\"\n\t\t\t\t\t:icon=\"{ icon: 'robot-happy' }\"\n\t\t\t\t\tinitial-width=\"large\"\n\t\t\t\t\tmin-width=\"medium\"\n\t\t\t\t\tresizable>\n\t\t\t\t\t<template #footer>\n\t\t\t\t\t\t<QCard class=\"prompt\" width=\"block\" elevation=\"low\">\n\t\t\t\t\t\t\t<QTextArea\n\t\t\t\t\t\t\t\tv-model=\"prompt\"\n\t\t\t\t\t\t\t\tclass=\"prompt__textarea\"\n\t\t\t\t\t\t\t\tplaceholder=\"Ask anything\"\n\t\t\t\t\t\t\t\tsize=\"block\"\n\t\t\t\t\t\t\t\t:rows=\"1\"\n\t\t\t\t\t\t\t\tresize=\"none\"\n\t\t\t\t\t\t\t\tautosize\n\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t<template #footer>\n\t\t\t\t\t\t\t\t<div class=\"prompt__actions\">\n\t\t\t\t\t\t\t\t\t<QButton ref=\"upload\" pill>\n\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"plus\" />\n\t\t\t\t\t\t\t\t\t</QButton>\n\t\t\t\t\t\t\t\t\t<QDropdownMenu\n\t\t\t\t\t\t\t\t\t\t:activator=\"uploadRef?.$el\"\n\t\t\t\t\t\t\t\t\t\t:items=\"uploadItems\"\n\t\t\t\t\t\t\t\t\t\t:groups=\"uploadGroups\"\n\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t<QToggle ref=\"search\" pill>\n\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"earth\" />\n\t\t\t\t\t\t\t\t\t\tSearch\n\t\t\t\t\t\t\t\t\t</QToggle>\n\n\t\t\t\t\t\t\t\t\t<QToggle ref=\"reason\" pill>\n\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"lightbulb-outline\" />\n\t\t\t\t\t\t\t\t\t\tReason\n\t\t\t\t\t\t\t\t\t</QToggle>\n\n\t\t\t\t\t\t\t\t\t<QButton ref=\"more\" pill>\n\t\t\t\t\t\t\t\t\t\t<QIcon icon=\"dots-horizontal\" />\n\t\t\t\t\t\t\t\t\t</QButton>\n\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<QButton ref=\"action\" class=\"prompt__voice-mode\" variant=\"bold\" pill>\n\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</QButton>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</QCard>\n\t\t\t\t\t</template>\n\t\t\t\t</q-sidebar-item>\n\t\t\t</QSidebar>"
         },
         {
           "title": "Custom Anchor Items",
-          "description": "Use the `anchor:${id}` slot to customize items of the sidebar anchor.",
-          "code": "<QSidebar v-bind=\"args\">\n                <template #anchor:activity=\"{ item }\">\n\t\t\t\t\t<QBadgeIndicator color=\"highlight\">\n\t\t\t\t\t\t<QIcon v-bind=\"item.icon\" />\n\t\t\t\t\t</QBadgeIndicator>\n                </template>\n\t\t\t\t<template #content:activity>\n\t\t\t\t\t<div style=\"padding: 0 1rem;\">\n\t\t\t\t\t\t<div class=\"alert\">\n\t\t\t\t\t\t\t<QIcon icon=\"alert\" />\n\t\t\t\t\t\t\tHeads up!\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n                </template>\n            </QSidebar>"
+          "description": "Use the `anchor` slot to customize items of the sidebar anchor.",
+          "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 #anchor>\n\t\t\t\t\t\t<QBadgeIndicator color=\"highlight\">\n\t\t\t\t\t\t\t<QIcon icon=\"bell\" />\n\t\t\t\t\t\t</QBadgeIndicator>\n\t\t\t\t\t</template>\n\t\t\t\t\t<div class=\"alert\">\n\t\t\t\t\t\t<QIcon icon=\"alert\" />\n\t\t\t\t\t\tHeads up!\n\t\t\t\t\t</div>\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>"
         }
       ]
     },
@@ -7386,8 +7393,8 @@
         },
         {
           "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>"
+          "description": "Tabs with title, prepend, and append 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\t<q-tab value=\"alerts\">\n\t\t\t\t\t<template #title>\n\t\t\t\t\t\t<q-badge\n\t\t\t\t\t\t\tvariant=\"bold\"\n\t\t\t\t\t\t\tpill\n\t\t\t\t\t\t\tstyle=\"height: 1.25rem; margin-block: -0.25rem\">\n\t\t\t\t\t\t\tAlerts\n\t\t\t\t\t\t</q-badge>\n\t\t\t\t\t</template>\n\t\t\t\t\tAlert notifications.\n\t\t\t\t</q-tab>\n\t\t\t</q-tabs>"
         },
         {
           "title": "Disabled",

package/dist/manifest/components.json

@@ -27,7 +27,6 @@
   "QContainer",
   "QRow",
   "QSpacer",
-  "QGroupBox",
   "QIcon",
   "QIconFont",
   "QIconImg",
@@ -49,8 +48,10 @@
   "QPropertyListPanel",
   "QRadioButton",
   "QRadioGroup",
+  "QSection",
   "QSelect",
   "QSidebar",
+  "QSidebarItem",
   "QSkeletonLoader",
   "QSpinnerLoader",
   "QSwitch",