@quidgest/ui 0.16.41 → 0.16.43

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.41",
+  "version": "0.16.43",
   "components": [
     {
       "name": "QAccordion",
@@ -2916,6 +2916,28 @@
             "description": "If true, applies inset margin.",
             "required": false,
             "category": "Presentation"
+          },
+          {
+            "name": "thickness",
+            "type": {
+              "kind": "primitive",
+              "name": "number"
+            },
+            "description": "The thickness of the divider line in pixels.",
+            "default": "1",
+            "required": false,
+            "category": "Presentation"
+          },
+          {
+            "name": "color",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "The color of the divider line.\nCan be chosen from utility colors like 'success' or 'danger',\nor specified using CSS color codes.",
+            "default": "neutral",
+            "required": false,
+            "category": "Presentation"
           }
         ],
         "events": [],
@@ -2946,6 +2968,16 @@
           "title": "Vertical",
           "description": "A vertical divider used to split side-by-side elements.",
           "code": "<div style=\"display: flex; height: 1rem;\">\n        <div>Left</div>\n        <QDivider direction=\"vertical\" />\n        <div>Right</div>\n      </div>"
+        },
+        {
+          "title": "Thicker",
+          "description": "A horizontal divider with a bigger thickness.",
+          "code": "<div>\n        <p>Section above</p>\n        <QDivider :thickness=\"5\" />\n        <p>Section below</p>\n      </div>"
+        },
+        {
+          "title": "Colored",
+          "description": "A horizontal divider with a primary color.",
+          "code": "<div>\n        <p>Section above</p>\n        <QDivider color=\"primary\" />\n        <p>Section below</p>\n      </div>"
         }
       ]
     },

package/dist/ui.css

@@ -474,7 +474,7 @@ body *::-webkit-scrollbar-track {
   border-radius: 9999px;
 }
 .q-badge--disabled {
-  opacity: 0.5;
+  opacity: 0.6;
   pointer-events: none;
 }
 .q-badge--clickable {
@@ -2981,45 +2981,45 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-divider {
+  --q-divider-thickness: 1px;
+  --q-divider-color: var(--q-theme-neutral);
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  color: var(--q-theme-neutral);
+  color: var(--q-divider-color);
   font-size: 0.875rem;
+  /* Horizontal */
+  /* Labeled horizontal: lines + label */
+  /* Inset margin */
+  /* Vertical */
+  /* Labeled vertical: lines + label */
+  /* Inset for vertical (optional – if used) */
 }
-
-/* Horizontal */
 .q-divider--horizontal {
   width: 100%;
   flex-direction: row;
   margin: 8px 0;
 }
-
 .q-divider--horizontal:not(.q-divider--labeled)::before {
   content: "";
   flex: 1;
-  border-top-width: 1px;
+  border-top-width: var(--q-divider-thickness);
+  border-color: var(--q-divider-color);
 }
-
-/* Labeled horizontal: lines + label */
 .q-divider--horizontal.q-divider--labeled .q-divider__line {
   flex: 1;
-  border-top-width: 1px;
+  border-top-width: var(--q-divider-thickness);
+  border-color: var(--q-divider-color);
 }
-
 .q-divider--horizontal.q-divider--labeled .q-divider__label {
   padding: 0 12px;
   white-space: nowrap;
 }
-
-/* Inset margin */
 .q-divider--horizontal.q-divider--inset {
   max-width: calc(100% - 72px);
   margin-inline-start: 72px;
 }
-
-/* Vertical */
 .q-divider--vertical {
   display: flex;
   flex-direction: column;
@@ -3028,27 +3028,23 @@ body *::-webkit-scrollbar-track {
   min-height: 100%;
   margin: 0 8px;
 }
-
 .q-divider--vertical:not(.q-divider--labeled)::before {
   content: "";
   flex: 1;
-  border-left-width: 1px;
+  border-left-width: var(--q-divider-thickness);
+  border-color: var(--q-divider-color);
 }
-
-/* Labeled vertical: lines + label */
 .q-divider--vertical.q-divider--labeled .q-divider__line {
-  border-left-width: 1px;
+  border-left-width: var(--q-divider-thickness);
+  border-color: var(--q-divider-color);
   height: 100%;
 }
-
 .q-divider--vertical.q-divider--labeled .q-divider__label {
   writing-mode: vertical-rl;
   text-orientation: mixed;
   padding: 12px 0;
   white-space: nowrap;
 }
-
-/* Inset for vertical (optional – if used) */
 .q-divider--vertical.q-divider--inset {
   margin-bottom: 8px;
   margin-top: 8px;