@quidgest/ui 0.18.0 → 0.19.0

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.18.0
+ * Quidgest UI v0.19.0
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -593,7 +593,8 @@ $transition-duration: 0.2s !default;
   }
   &--pill {
     border-radius: 9999px;
-    .q-button {
+    #{$this}__content.q-button,
+    #{$this}__remove.q-button {
       border-radius: 9999px;
     }
   }
@@ -647,7 +648,7 @@ $transition-duration: 0.2s !default;
     vertical-align: middle;
     flex-shrink: 0;
   }
-  .q-badge__content {
+  &.q-badge .q-badge__content {
     padding: 0;
   }
   
@@ -1431,11 +1432,13 @@ $q-carousel-height-md: 300px;
       right: 0;
     }
   }
-  .q-card__content {
-    padding: 0;
-  }
-  .q-card__header {
-    padding-bottom: 0;
+  &.q-card {
+    .q-card__content {
+      padding: 0;
+    }
+    .q-card__header {
+      padding-bottom: 0;
+    }
   }
   &__header {
     display: flex;
@@ -1450,7 +1453,7 @@ $q-carousel-height-md: 300px;
     flex-direction: column;
     padding: 0;
   }
-  &__btn {
+  &__btn.q-button {
     width: 100%;
     margin: 0;
     
@@ -1533,7 +1536,7 @@ $q-carousel-height-md: 300px;
   }
   
   @mixin header-spacing($spacing, $increment) {
-    &--#{$spacing} .q-collapsible__btn {
+    &--#{$spacing} .q-collapsible__btn.q-button {
       padding: calc(#{$header-padding} + #{$increment});
     }
   }
@@ -1556,7 +1559,7 @@ $q-carousel-height-md: 300px;
 .q-combobox {
   $this: &;
   &:not(#{$this}--disabled) {
-    #{$this}__chevron {
+    #{$this}__chevron.q-button {
       &:hover,
       &:focus {
         cursor: pointer;
@@ -1565,7 +1568,7 @@ $q-carousel-height-md: 300px;
     }
   }
 }
-.q-combobox__chevron {
+.q-combobox__chevron.q-button {
   padding: 0.1rem;
   opacity: 0.5;
   &:hover {
@@ -1791,7 +1794,7 @@ $q-carousel-height-md: 300px;
       gap: 0.5rem;
     }
   }
-  &__close {
+  &__close.q-button {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
@@ -2324,121 +2327,6 @@ $q-spacing-sides: (
 @include q-generate-responsive-spacing(margin, m);
 @include q-generate-responsive-spacing(padding, p);
 @include q-generate-margin-auto;
-.q-group-box {
-  $this: &;
-  display: inline-block;
-  overflow-wrap: break-word;
-  background-color: var(--q-theme-container);
-  border-width: 1px;
-  border-bottom: $group-border-bottom;
-  padding: 0.5rem 1rem 1rem;
-  border-radius: var(--border-radius);
-  position: relative;
-  max-width: 100%;
-  &:focus-visible {
-    outline: $outline;
-    border-radius: var(--border-radius);
-  }
-  &__title {
-    font-size: 1.2rem;
-    line-height: 1rem;
-    letter-spacing: 0.02rem;
-    color: var(--q-theme-primary);
-    text-transform: $headings-text-transform;
-    margin: 0;
-    margin-top: 0.25rem;
-    display: flex;
-    align-items: flex-start;
-    width: fit-content;
-    gap: 0.25rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  &--background {
-    background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
-    padding: 0.5rem 1rem 1rem;
-  }
-  &--minor {
-    background-color: transparent;
-    border: none;
-    border-radius: 0;
-    padding: 0.5rem 0 0;
-  }
-  &--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;
-  }
-  &--minor,
-  &--minor-border-top {
-    #{$this}__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;
-    }
-  }
-  &--title-background {
-    padding: 0 !important;
-    &::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;
-    }
-    #{$this}__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;
-    }
-    > #{$this}__content {
-      padding: 0.2rem 1rem 1rem;
-    }
-  }
-  &--subsection {
-    border: none;
-    margin-left: 0.625rem;
-    margin-bottom: 0.625rem;
-    #{$this}__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;
-    }
-  }
-  
-  &--borderless {
-    border-color: transparent;
-    margin: 0;
-    padding: 0;
-    background-color: transparent;
-  }
-  &--block {
-    width: 100%;
-  }
-}
 .q-icon {
   display: inline-block;
   color: var(--q-theme-primary);
@@ -2703,11 +2591,11 @@ $q-line-loader-color: var(--q-line-loader-color);
     width: 100%;
     color: var(--q-theme-neutral);
     user-select: none;
-    .q-icon {
+    .q-obfuscation__icon.q-icon {
       color: inherit;
     }
   }
-  &__action {
+  &__action.q-button {
     justify-content: flex-start;
     margin: 0;
     padding: 0;
@@ -2715,7 +2603,6 @@ $q-line-loader-color: var(--q-line-loader-color);
     width: 100%;
     min-height: 1.5em;
     line-height: inherit;
-    color: var(--q-theme-primary);
     &:hover,
     &:focus-visible {
       outline-offset: 0;
@@ -2726,6 +2613,9 @@ $q-line-loader-color: var(--q-line-loader-color);
     &.q-button--labeled {
       padding: 0;
     }
+    &.q-button--text {
+      color: var(--q-theme-primary);
+    }
   }
   &__content {
     display: flex;
@@ -2733,15 +2623,18 @@ $q-line-loader-color: var(--q-line-loader-color);
     gap: $space-base;
     min-width: 0;
   }
-  &__label-action {
-    color: var(--q-theme-primary);
+  & &__label-action.q-button {
+    padding: 0;
     min-width: auto;
     min-height: auto;
     &:focus-visible {
       outline-offset: 2px;
     }
+    &.q-button--text {
+      color: var(--q-theme-primary);
+    }
   }
-  &__icon {
+  &__icon.q-icon {
     flex-shrink: 0;
   }
 }
@@ -3173,13 +3066,128 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
 .q-radio-group--focus-style .q-radio-button:focus-within {
   outline: $outline;
 }
+.q-section {
+  $this: &;
+  display: inline-block;
+  overflow-wrap: break-word;
+  background-color: var(--q-theme-container);
+  border-width: 1px;
+  border-bottom: $group-border-bottom;
+  padding: 0.5rem 1rem 1rem;
+  border-radius: var(--border-radius);
+  position: relative;
+  max-width: 100%;
+  &:focus-visible {
+    outline: $outline;
+    border-radius: var(--border-radius);
+  }
+  &__title {
+    font-size: 1.2rem;
+    line-height: 1rem;
+    letter-spacing: 0.02rem;
+    color: var(--q-theme-primary);
+    text-transform: $headings-text-transform;
+    margin: 0;
+    margin-top: 0.25rem;
+    display: flex;
+    align-items: flex-start;
+    width: fit-content;
+    gap: 0.25rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  &--background {
+    background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
+    padding: 0.5rem 1rem 1rem;
+  }
+  &--minor {
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0.5rem 0 0;
+  }
+  &--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;
+  }
+  &--minor,
+  &--minor-border-top {
+    #{$this}__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;
+    }
+  }
+  &--title-background {
+    padding: 0 !important;
+    &::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;
+    }
+    #{$this}__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;
+    }
+    > #{$this}__content {
+      padding: 0.2rem 1rem 1rem;
+    }
+  }
+  &--subsection {
+    border: none;
+    margin-left: 0.625rem;
+    margin-bottom: 0.625rem;
+    #{$this}__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;
+    }
+  }
+  
+  &--borderless {
+    border-color: transparent;
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+  }
+  &--block {
+    width: 100%;
+  }
+}
 .q-select {
   $this: &;
   &:not(#{$this}--readonly):not(#{$this}--disabled) {
     cursor: pointer;
   }
   &:not(#{$this}--disabled) {
-    #{$this}__chevron {
+    #{$this}__chevron.q-button {
       &:hover,
       &:focus {
         opacity: 1;
@@ -3235,7 +3243,7 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
         visibility: hidden;
       }
     }
-    .q-badge__content {
+    .q-badge .q-badge__content {
       white-space: nowrap;
     }
   }
@@ -3248,7 +3256,7 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
     opacity: 0;
     cursor: inherit;
   }
-  &__chevron {
+  &__chevron.q-button {
     padding: 0.1rem;
     opacity: 0.5;
     &:hover {
@@ -3293,11 +3301,15 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
 $sidebar-size-small: 19rem;
 $sidebar-size-medium: 27rem;
 $sidebar-size-large: 35rem;
+$sidebar-size-xlarge: 50%;
+$sidebar-size-block: 100%;
 $sidebar-border-color: rgb(var(--q-theme-neutral-rgb) / 25%);
 $sidebar-sizes: (
   small: $sidebar-size-small,
   medium: $sidebar-size-medium,
-  large: $sidebar-size-large
+  large: $sidebar-size-large,
+  xlarge: $sidebar-size-xlarge,
+  block: $sidebar-size-block
 );
 @mixin sidebar-size-modifiers($prefix, $property) {
   @each $size, $value in $sidebar-sizes {
@@ -3314,10 +3326,20 @@ $sidebar-sizes: (
   flex-direction: row;
   width: min-content;
 }
-.q-sidebar--expanded {
+.q-sidebar--expanded:not(.q-sidebar--xlarge, .q-sidebar--block) {
   min-width: $sidebar-size-small;
   max-width: $sidebar-size-large;
 }
+.q-sidebar__panels {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  > .q-sidebar-panel {
+    width: 100%;
+    height: 100%;
+  }
+}
 .q-sidebar-anchor {
   display: flex;
   flex-direction: column;
@@ -3330,7 +3352,7 @@ $sidebar-sizes: (
   flex-direction: column;
   position: relative;
 }
-.q-sidebar__item {
+.q-sidebar__item.q-button {
   width: 100%;
   height: 100%;
   aspect-ratio: 1;
@@ -3367,7 +3389,13 @@ $sidebar-sizes: (
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 1rem;
+  margin: 1rem;
+}
+.q-sidebar-panel__header {
+  margin-bottom: 0;
+}
+.q-sidebar-panel__footer {
+  margin-top: 0;
 }
 .q-sidebar-panel__title {
   margin: 0;
@@ -3375,6 +3403,7 @@ $sidebar-sizes: (
 .q-sidebar-panel__content {
   flex: 1 1 0%;
   overflow: auto;
+  margin: 1rem;
 }
 .q-sidebar-panel__handle {
   position: absolute;
@@ -3697,10 +3726,13 @@ $spinner-color: var(--q-theme-primary);
   &--horizontal {
     flex-direction: column;
     .q-tabs__list {
-      flex-direction: row;
       width: 100%;
       border-bottom: 1px solid $border;
     }
+    .q-tabs__tablist {
+      flex-direction: row;
+      width: 100%;
+    }
     .q-tab {
       margin-bottom: -1px;
     }
@@ -3719,11 +3751,13 @@ $spinner-color: var(--q-theme-primary);
     align-items: stretch;
     .q-tabs__list {
       flex: 0 0 auto;
-      flex-direction: column;
       width: max-content;
       max-width: 100%;
       border-inline-end: 1px solid $border;
     }
+    .q-tabs__tablist {
+      flex-direction: column;
+    }
     .q-tab {
       justify-content: flex-start;
       margin-inline-end: -1px;
@@ -3741,7 +3775,28 @@ $spinner-color: var(--q-theme-primary);
     }
   }
   
+  
   &--line {
+    .q-tabs__indicator {
+      position: absolute;
+      background-color: $primary;
+      opacity: 0;
+      pointer-events: none;
+      z-index: 1;
+    }
+    &.q-tabs--indicator-ready .q-tabs__indicator {
+      transition:
+        transform 0.3s ease-in-out,
+        width 0.3s ease-in-out,
+        height 0.3s ease-in-out,
+        opacity 0.2s ease-in-out;
+    }
+    &.q-tabs--horizontal .q-tabs__indicator {
+      
+      
+      bottom: -1px;
+      left: 0;
+    }
     &.q-tabs--horizontal .q-tab {
       border-bottom: 4px solid transparent;
       border-end-start-radius: 0;
@@ -3755,6 +3810,14 @@ $spinner-color: var(--q-theme-primary);
         }
       }
     }
+    &.q-tabs--indicator-ready.q-tabs--horizontal .q-tab--active {
+      border-bottom-color: transparent;
+    }
+    &.q-tabs--vertical .q-tabs__indicator {
+      
+      top: 0;
+      inset-inline-end: -1px;
+    }
     &.q-tabs--vertical .q-tab {
       border-inline-end: 4px solid transparent;
       border-start-end-radius: 0;
@@ -3768,10 +3831,13 @@ $spinner-color: var(--q-theme-primary);
         }
       }
     }
+    &.q-tabs--indicator-ready.q-tabs--vertical .q-tab--active {
+      border-inline-end-color: transparent;
+    }
   }
   
   &--card {
-    .q-tabs__list {
+    .q-tabs__tablist {
       gap: 0;
     }
     .q-tab {
@@ -3817,22 +3883,25 @@ $spinner-color: var(--q-theme-primary);
       }
     }
   }
-  &--align-start .q-tabs__list {
+  &--align-start .q-tabs__tablist {
     justify-content: flex-start;
   }
-  &--align-end .q-tabs__list {
+  &--align-end .q-tabs__tablist {
     justify-content: flex-end;
   }
-  &--align-center .q-tabs__list {
+  &--align-center .q-tabs__tablist {
     justify-content: center;
   }
-  &--align-justify .q-tabs__list {
+  &--align-justify .q-tabs__tablist {
     justify-content: space-between;
     .q-tab {
       flex: 1;
     }
   }
   &__list {
+    position: relative;
+  }
+  &__tablist {
     display: flex;
     gap: $space-base;
   }
@@ -3852,10 +3921,10 @@ $spinner-color: var(--q-theme-primary);
   background: transparent;
   border: 0;
   padding: 0.5rem 0.75rem;
-  &.q-button {
+  &.q-button.q-button--text {
     color: $on-background;
   }
-  &--active.q-button {
+  &--active.q-button.q-button--text {
     color: $primary;
     cursor: default;
     &:hover:not(:disabled) {
@@ -3878,6 +3947,11 @@ $spinner-color: var(--q-theme-primary);
     }
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .q-tabs--line.q-tabs--indicator-ready .q-tabs__indicator {
+    transition: opacity 0.2s ease-in-out;
+  }
+}
 .q-text-area {
   
   display: flex;
@@ -4110,7 +4184,7 @@ $q-toast-slide-distance: clamp(1rem, 3vw, 1.5rem) !default;
   will-change: auto;
 }
 .q-toggle {
-  &--active {
+  &.q-button.q-toggle--active {
     z-index: 2;
     color: var(--q-theme-primary-dark);
     background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);

package/esm/components/QGrid/QCol.vue.js

@@ -25,7 +25,7 @@ var s = /*@__PURE__*/ r({
 			if (t) return t === "auto" ? `q-col${e ? `-${e}` : ""}-auto` : `q-col${e ? `-${e}` : ""}-${t}`;
 		}
 		return e({
-			QGroupBox: { block: t(() => s.cols === "auto" ? void 0 : !0) },
+			QSection: { block: t(() => s.cols === "auto" ? void 0 : !0) },
 			QField: { size: t(() => s.cols === "auto" ? void 0 : "block") }
 		}), (e, t) => (a(), n("div", { class: i(c.value) }, [o(e.$slots, "default")], 2));
 	}

package/esm/components/{QGroupBox/QGroupBox.d.ts → QSection/QSection.d.ts}

@@ -1,4 +1,4 @@
-import { QGroupBoxProps } from '.';
+import { QSectionProps } from '.';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -8,8 +8,8 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<QGroupBoxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QGroupBoxProps> & Readonly<{}>, {
-    variant: import('./types').QGroupBoxVariant;
+declare const __VLS_component: import('vue').DefineComponent<QSectionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QSectionProps> & Readonly<{}>, {
+    variant: import('./types').QSectionVariant;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
@@ -18,4 +18,4 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
-//# sourceMappingURL=QGroupBox.vue.d.ts.map
+//# sourceMappingURL=QSection.vue.d.ts.map

package/esm/components/QSection/QSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QSection.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QSection/QSection.vue"],"names":[],"mappings":"AAcA;AA4CC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,GAAG,CAAA;AA8BvC,iBAAS,cAAc;WAkCT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;wFAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/{QGroupBox/QGroupBox.vue.js → QSection/QSection.vue.js}

@@ -1,10 +1,10 @@
 import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c } from "vue";
-//#region src/components/QGroupBox/QGroupBox.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/QSection/QSection.vue?vue&type=script&setup=true&lang.ts
 var l = ["id"], u = {
 	key: 0,
-	class: "q-group-box__title"
-}, d = { class: "q-group-box__content" }, f = /*@__PURE__*/ i({
-	__name: "QGroupBox",
+	class: "q-section__title"
+}, d = { class: "q-section__content" }, f = /*@__PURE__*/ i({
+	__name: "QSection",
 	props: {
 		id: {},
 		class: {},
@@ -15,11 +15,11 @@ var l = ["id"], u = {
 	},
 	setup(i) {
 		let f = i, p = e(() => [
-			"q-group-box",
-			f.variant === "default" ? void 0 : `q-group-box--${f.variant}`,
+			"q-section",
+			f.variant === "default" ? void 0 : `q-section--${f.variant}`,
 			{
-				"q-group-box--block": f.block,
-				"q-group-box--borderless": f.borderless
+				"q-section--block": f.block,
+				"q-section--borderless": f.borderless
 			},
 			f.class
 		]);

package/esm/components/QSection/QSection2.vue.js

@@ -0,0 +1,5 @@
+import e from "./QSection.vue.js";
+//#region src/components/QSection/QSection.vue
+var t = e;
+//#endregion
+export { t as default };