@quidgest/ui 0.17.9 → 0.19.0

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.17.9
+ * Quidgest UI v0.19.0
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -237,6 +237,7 @@ $shadow-md: (
   0 4px 6px -1px rgb(0 0 0 / 10%),
   0 2px 4px -2px rgb(0 0 0 / 10%)
 );
+$overlay-z-index: 1070 !default;
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
@@ -400,6 +401,20 @@ $transition-duration: 0.2s !default;
     --#{$prefix}-on-hover-color-rgb: var(--q-theme-on-#{$color}-rgb);
   }
 }
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.q-sr-only {
+  @include sr-only;
+}
 .q-chevron {
   transition: all 0.2s;
   &--expanded {
@@ -420,6 +435,24 @@ $transition-duration: 0.2s !default;
     opacity: 1;
   }
 }
+.q-required-indicator {
+  display: contents;
+  &__mark {
+    margin-inline-start: 0.25em;
+    font-weight: 700;
+    color: var(--q-theme-danger);
+  }
+}
+.q-safe-triangle {
+  position: fixed;
+  z-index: $overlay-z-index + 1;
+  overflow: visible;
+  pointer-events: none;
+  &__path {
+    pointer-events: auto;
+    fill: transparent;
+  }
+}
 .q-accordion {
   display: flex;
   flex-direction: column;
@@ -560,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;
     }
   }
@@ -614,7 +648,7 @@ $transition-duration: 0.2s !default;
     vertical-align: middle;
     flex-shrink: 0;
   }
-  .q-badge__content {
+  &.q-badge .q-badge__content {
     padding: 0;
   }
   
@@ -1201,17 +1235,6 @@ $q-carousel-height-md: 300px;
   width: 100%;
   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: $breakpoint-md) {
   .q-carousel {
     --q-carousel-height: #{$q-carousel-height-md};
@@ -1409,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;
@@ -1426,12 +1451,13 @@ $q-carousel-height-md: 300px;
     justify-content: start;
     align-items: flex-start;
     flex-direction: column;
-    padding: $header-padding;
+    padding: 0;
   }
-  &__btn {
+  &__btn.q-button {
     width: 100%;
     margin: 0;
-    padding: 0;
+    
+    padding: $header-padding;
     .q-button__content {
       gap: 0;
       padding: $btn-padding;
@@ -1500,10 +1526,6 @@ $q-carousel-height-md: 300px;
     }
   }
   
-  &--required {
-    font-weight: 700;
-    color: var(--q-theme-danger);
-  }
   &--icon-right {
     &:not(.q-collapsible--borderless) .q-collapsible__title .q-icon {
       margin: 0 0 0 auto;
@@ -1514,7 +1536,7 @@ $q-carousel-height-md: 300px;
   }
   
   @mixin header-spacing($spacing, $increment) {
-    &--#{$spacing} .q-collapsible__header {
+    &--#{$spacing} .q-collapsible__btn.q-button {
       padding: calc(#{$header-padding} + #{$increment});
     }
   }
@@ -1537,7 +1559,7 @@ $q-carousel-height-md: 300px;
 .q-combobox {
   $this: &;
   &:not(#{$this}--disabled) {
-    #{$this}__chevron {
+    #{$this}__chevron.q-button {
       &:hover,
       &:focus {
         cursor: pointer;
@@ -1546,7 +1568,7 @@ $q-carousel-height-md: 300px;
     }
   }
 }
-.q-combobox__chevron {
+.q-combobox__chevron.q-button {
   padding: 0.1rem;
   opacity: 0.5;
   &:hover {
@@ -1772,7 +1794,7 @@ $q-carousel-height-md: 300px;
       gap: 0.5rem;
     }
   }
-  &__close {
+  &__close.q-button {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
@@ -2305,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);
@@ -2505,13 +2412,6 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
   .q-icon {
     color: currentcolor;
   }
-  &--required {
-    &::after {
-      content: ' *';
-      font-weight: 700;
-      color: var(--q-theme-danger);
-    }
-  }
   &--topright {
     align-self: flex-end;
   }
@@ -2691,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;
@@ -2703,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;
@@ -2714,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;
@@ -2721,22 +2623,24 @@ $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;
   }
 }
 $overlay-border-width: 1px;
 $overlay-arrow-width: 11.31px;
 $overlay-arrow-height: 11.31px;
-$overlay-z-index: 1070;
 $arrow-tip-radius: 0.1rem;
 .q-overlay {
   $this: &;
@@ -3162,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;
@@ -3224,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;
     }
   }
@@ -3237,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 {
@@ -3282,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 {
@@ -3303,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;
@@ -3319,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;
@@ -3356,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;
@@ -3364,6 +3403,7 @@ $sidebar-sizes: (
 .q-sidebar-panel__content {
   flex: 1 1 0%;
   overflow: auto;
+  margin: 1rem;
 }
 .q-sidebar-panel__handle {
   position: absolute;
@@ -3680,6 +3720,238 @@ $spinner-color: var(--q-theme-primary);
     transition: none;
   }
 }
+.q-tabs {
+  display: flex;
+  gap: 0;
+  &--horizontal {
+    flex-direction: column;
+    .q-tabs__list {
+      width: 100%;
+      border-bottom: 1px solid $border;
+    }
+    .q-tabs__tablist {
+      flex-direction: row;
+      width: 100%;
+    }
+    .q-tab {
+      margin-bottom: -1px;
+    }
+    .q-tabs__panels {
+      border: 1px solid $border;
+      border-top: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+      border-end-start-radius: $border-radius;
+      border-end-end-radius: $border-radius;
+      padding-inline: calc($space-base * 2);
+    }
+  }
+  &--vertical {
+    flex-direction: row;
+    align-items: stretch;
+    .q-tabs__list {
+      flex: 0 0 auto;
+      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;
+    }
+    .q-tabs__panels {
+      flex: 1;
+      min-width: 0;
+      border: 1px solid $border;
+      border-inline-start: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: $border-radius;
+      border-end-end-radius: $border-radius;
+      padding-inline: calc($space-base * 2);
+    }
+  }
+  
+  
+  &--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;
+      border-end-end-radius: 0;
+      &--active {
+        border-bottom-color: $primary;
+      }
+      @media (hover: hover) {
+        &:hover:not(:disabled, .q-tab--active) {
+          border-bottom-color: currentcolor;
+        }
+      }
+    }
+    &.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;
+      border-end-end-radius: 0;
+      &--active {
+        border-inline-end-color: $primary;
+      }
+      @media (hover: hover) {
+        &:hover:not(:disabled, .q-tab--active) {
+          border-inline-end-color: currentcolor;
+        }
+      }
+    }
+    &.q-tabs--indicator-ready.q-tabs--vertical .q-tab--active {
+      border-inline-end-color: transparent;
+    }
+  }
+  
+  &--card {
+    .q-tabs__tablist {
+      gap: 0;
+    }
+    .q-tab {
+      border: 1px solid $border;
+      background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
+      &--active {
+        background-color: $container;
+        z-index: 1;
+      }
+      @media (hover: hover) {
+        &:hover:not(:disabled) {
+          border-color: $border;
+        }
+      }
+    }
+    &.q-tabs--horizontal .q-tab {
+      border-start-start-radius: $border-radius;
+      border-start-end-radius: $border-radius;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+      &--active {
+        border-bottom-color: $container;
+        color: $primary;
+      }
+    }
+    &.q-tabs--horizontal .q-tab--active:hover:not(:disabled) {
+      @media (hover: hover) {
+        border-bottom-color: $container;
+      }
+    }
+    &.q-tabs--vertical .q-tab {
+      border-start-start-radius: $border-radius;
+      border-end-start-radius: $border-radius;
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+      &--active {
+        border-inline-end-color: $container;
+      }
+    }
+    &.q-tabs--vertical .q-tab--active:hover:not(:disabled) {
+      @media (hover: hover) {
+        border-inline-end-color: $container;
+      }
+    }
+  }
+  &--align-start .q-tabs__tablist {
+    justify-content: flex-start;
+  }
+  &--align-end .q-tabs__tablist {
+    justify-content: flex-end;
+  }
+  &--align-center .q-tabs__tablist {
+    justify-content: center;
+  }
+  &--align-justify .q-tabs__tablist {
+    justify-content: space-between;
+    .q-tab {
+      flex: 1;
+    }
+  }
+  &__list {
+    position: relative;
+  }
+  &__tablist {
+    display: flex;
+    gap: $space-base;
+  }
+  &__panels {
+    padding-block: calc($space-base * 2);
+  }
+  &__panel {
+    &:focus {
+      outline: $outline;
+      &:not(:focus-visible) {
+        outline: 0;
+      }
+    }
+  }
+}
+.q-tab {
+  background: transparent;
+  border: 0;
+  padding: 0.5rem 0.75rem;
+  &.q-button.q-button--text {
+    color: $on-background;
+  }
+  &--active.q-button.q-button--text {
+    color: $primary;
+    cursor: default;
+    &:hover:not(:disabled) {
+      color: $primary;
+      cursor: default;
+    }
+  }
+  &__title {
+    display: inline-flex;
+    align-items: center;
+    gap: calc($space-base * 0.5);
+  }
+  &__title-text {
+    font-weight: 600;
+  }
+  &--disabled {
+    cursor: not-allowed;
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+}
+@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;
@@ -3912,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%);