@quidgest/ui 0.16.38 → 0.16.39

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.38",
+  "version": "0.16.39",
   "components": [
     {
       "name": "QAccordion",
@@ -2724,6 +2724,89 @@
       },
       "examples": []
     },
+    {
+      "name": "QGroupBox",
+      "description": "A container with a title that groups related content.",
+      "meta": {
+        "props": [
+          {
+            "name": "id",
+            "type": "string | undefined",
+            "description": "The component unique identifier.",
+            "required": false,
+            "category": "Identification"
+          },
+          {
+            "name": "title",
+            "type": "string | undefined",
+            "description": "The title of the group box.",
+            "required": false,
+            "category": "Content"
+          },
+          {
+            "name": "borderless",
+            "type": "boolean | undefined",
+            "description": "If true, the group box has no borders.",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "variant",
+            "type": "QGroupBoxVariant | undefined",
+            "description": "The styling variant of the group box.",
+            "default": "\"default\"",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "block",
+            "type": "boolean | undefined",
+            "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.",

package/dist/manifest/components.json

@@ -27,6 +27,7 @@
   "QContainer",
   "QRow",
   "QSpacer",
+  "QGroupBox",
   "QIcon",
   "QIconFont",
   "QIconImg",

package/dist/ui.css

@@ -3655,6 +3655,117 @@ body *::-webkit-scrollbar-track {
   flex: 1 1 0;
 }
 
+.q-group-box {
+  display: inline-block;
+  word-wrap: break-word;
+  background-color: var(--q-theme-container);
+  border-width: 1px;
+  border-bottom: 1px solid var(--q-theme-neutral-light);
+  padding: 0.5rem 1rem 1rem;
+  border-radius: var(--border-radius);
+  position: relative;
+  max-width: 100%;
+}
+.q-group-box:focus-visible {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
+  border-radius: var(--border-radius);
+}
+.q-group-box__title {
+  font-size: 1.2rem;
+  line-height: 1rem;
+  letter-spacing: 0.02rem;
+  color: var(--q-theme-primary);
+  text-transform: uppercase;
+  margin: 0;
+  margin-top: 0.25rem;
+  display: flex;
+  align-items: flex-start;
+  width: -moz-fit-content;
+  width: fit-content;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+.q-group-box--background {
+  background-color: rgb(var(--q-theme-primary-light-rgb)/50%);
+  padding: 0.5rem 1rem 1rem;
+}
+.q-group-box--minor {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0.5rem 0 0;
+}
+.q-group-box--minor-border-top {
+  background-color: transparent;
+  border: none;
+  border-top: 1px solid var(--q-theme-neutral-light);
+  border-radius: 0;
+  margin-top: 0.5rem;
+  padding: 0.25rem 0;
+}
+.q-group-box--minor .q-group-box__title, .q-group-box--minor-border-top .q-group-box__title {
+  font-size: 0.9rem;
+  line-height: 1;
+  letter-spacing: initial;
+  color: var(--q-theme-neutral-dark);
+  text-transform: none;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+  margin-top: 0.25rem;
+}
+.q-group-box--title-background {
+  padding: 0 !important;
+}
+.q-group-box--title-background::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 30px;
+  width: 100%;
+  content: "";
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+.q-group-box--title-background .q-group-box__title {
+  padding: 0.5rem 1rem;
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.01rem;
+  color: var(--q-theme-on-background);
+  text-transform: none;
+  z-index: 10;
+  position: relative;
+}
+.q-group-box--title-background > .q-group-box__content {
+  padding: 0.2rem 1rem 1rem;
+}
+.q-group-box--subsection {
+  border: none;
+  margin-left: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+.q-group-box--subsection .q-group-box__title {
+  font-size: 0.9rem;
+  line-height: 1;
+  letter-spacing: initial;
+  background-color: transparent;
+  color: var(--q-theme-neutral-dark);
+  text-transform: none;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+.q-group-box--borderless {
+  border-color: transparent;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+.q-group-box--block {
+  width: 100%;
+}
+
 .q-icon {
   display: inline-block;
   color: var(--q-theme-primary);
@@ -4274,13 +4385,14 @@ body *::-webkit-scrollbar-track {
   width: 100%;
 }
 .q-select__badge-container .q-select__badge-count {
-  font-weight: bold;
+  font-weight: 900;
 }
 .q-select__badge-container .q-select__badge-hidden {
   visibility: hidden;
 }
 .q-select__badge-container .q-badge__content {
   height: 0.85em;
+  white-space: nowrap;
 }
 .q-select__placeholder {
   font-style: italic;