@quidgest/ui 0.14.13 → 0.14.15

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.14.13
+ * Quidgest UI v0.14.15
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -178,12 +178,12 @@ $spaces: (
   'lg': $space-lg,
   'xl': $space-xl
 ) !default;
-$shadow-sm: (0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+$shadow-sm: (0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 5%));
 $shadow-md: (
   0 0 #0000,
   0 0 #0000,
-  0 4px 6px -1px rgba(0, 0, 0, 0.1),
-  0 2px 4px -2px rgba(0, 0, 0, 0.1)
+  0 4px 6px -1px rgb(0 0 0 / 10%),
+  0 2px 4px -2px rgb(0 0 0 / 10%)
 );
 $breakpoint-xs: 599px !default;
 $breakpoint-sm: 1023px !default;
@@ -200,10 +200,10 @@ $font-weight-black: 900;
 $border: var(--q-theme-neutral-light) !default;
 $outline-width: 2px !default;
 $outline-style: solid !default;
-$outline-color: rgb(var(--q-theme-info-rgb) / 0.5) !default;
+$outline-color: rgb(var(--q-theme-info-rgb) / 50%) !default;
 $outline: $outline-width $outline-style $outline-color;
 $scrollbar-thumb: var(--q-theme-neutral-light);
-$scrollbar-track: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+$scrollbar-track: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 $input-padding-y: 0.26rem !default;
 $input-padding-x: 0.25rem !default;
 :root {
@@ -282,17 +282,20 @@ body {
   border-width: 1px;
   border-color: transparent;
   border-radius: var(--border-radius);
-  padding: 0.25em 0.5em;
-  line-height: 1rem;
+  padding: 0.4em 0.5em;
   font-size: 0.75rem;
+  line-height: 1;
   position: relative;
   color: var(--q-badge-text-color);
+  transition-property: color, background-color, border-color, box-shadow, text-decoration-color,
+    fill, stroke;
+  transition-duration: 0.15s;
   &__underlay {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    top: -1px;
+    left: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
     border-radius: inherit;
     background-color: var(--q-badge-color);
     opacity: 0.1;
@@ -300,34 +303,27 @@ body {
   &__content {
     display: inline-flex;
     align-items: center;
-    gap: 0.25rem;
-    min-height: 1rem;
+    gap: 0.25em;
     z-index: 1;
   }
-  &__remove.q-btn:not(:disabled) {
-    padding: 0;
-    border-radius: 9999px;
-    color: inherit;
-    &:hover {
-      background-color: var(--q-badge-color);
-    }
-  }
-  &--clickable {
-    cursor: pointer;
-    &:hover {
-      color: var(--q-badge-text-hover-color, var(--q-badge-text-color));
-      #{$this}__underlay {
-        background-color: var(--q-badge-hover-color, var(--q-badge-color));
-      }
+  &__remove {
+    .q-btn__content {
+      font-size: inherit;
     }
-    &:focus {
-      outline: $outline;
-      &:not(:focus-visible) {
-        outline: 0;
+    &.q-btn:not(:disabled) {
+      padding: 0;
+      border-radius: 9999px;
+      color: inherit;
+      &:hover {
+        background-color: var(--q-badge-color);
       }
     }
   }
   
+  &--large {
+    font-size: 0.9rem;
+  }
+  
   &--pill {
     border-radius: 9999px;
   }
@@ -344,7 +340,7 @@ body {
     }
   }
   &--outlined {
-    border-color: currentColor;
+    border-color: currentcolor;
     #{$this}__underlay {
       opacity: 0;
     }
@@ -355,6 +351,21 @@ body {
       }
     }
   }
+  &--clickable {
+    cursor: pointer;
+    &:hover {
+      color: var(--q-badge-text-hover-color, var(--q-badge-text-color));
+      #{$this}__underlay {
+        background-color: var(--q-badge-hover-color, var(--q-badge-color));
+      }
+    }
+    &:focus {
+      outline: $outline;
+      &:not(:focus-visible) {
+        outline: 0;
+      }
+    }
+  }
   @mixin color-variant($color) {
     &--#{$color} {
       --q-badge-color: var(--q-theme-#{$color});
@@ -384,34 +395,74 @@ body {
 }
 .q-badge-indicator {
   $this: &;
+  flex-wrap: wrap;
+  place-content: center center;
+  align-items: center;
   position: absolute;
-  padding: 0.1rem 0.5em;
-  border: 0;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0.25rem;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0;
   &__wrapper {
     position: relative;
     display: inline-flex;
+    vertical-align: middle;
+    flex-shrink: 0;
   }
   
   &--dot {
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
+    border-radius: 4px;
+    height: 8px;
+    min-width: 8px;
+    padding: 0;
   }
   &--top-right {
-    bottom: calc(100% - 0.5rem);
-    left: calc(100% - 0.5rem);
+    top: 0;
+    right: 0;
+    transform: scale(1) translate(50%, -50%);
+    transform-origin: 100% 0%;
   }
   &--top-left {
-    bottom: calc(100% - 0.5rem);
-    right: calc(100% - 0.5rem);
+    top: 0;
+    left: 0;
+    transform: scale(1) translate(-50%, -50%);
+    transform-origin: 0% 0%;
   }
-  &--bottom-right {
-    top: calc(100% - 0.5rem);
-    left: calc(100% - 0.5rem);
+  &--top-center {
+    top: 0;
+    left: 50%;
+    transform: scale(1) translate(-50%, -50%);
+    transform-origin: 50% 0%;
+  }
+  &--middle-left {
+    top: 50%;
+    left: 0;
+    transform: scale(1) translate(-50%, -50%);
+    transform-origin: 0% 50%;
+  }
+  &--middle-right {
+    top: 50%;
+    right: 0;
+    transform: scale(1) translate(50%, -50%);
+    transform-origin: 100% 50%;
   }
   &--bottom-left {
-    top: calc(100% - 0.5rem);
-    right: calc(100% - 0.5rem);
+    bottom: 0;
+    left: 0;
+    transform: scale(1) translate(-50%, 50%);
+    transform-origin: 0% 100%;
+  }
+  &--bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: scale(1) translate(-50%, 50%);
+    transform-origin: 50% 100%;
+  }
+  &--bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: scale(1) translate(50%, 50%);
+    transform-origin: 100% 100%;
   }
 }
 $button-primary: var(--q-theme-primary);
@@ -424,7 +475,7 @@ $button-danger-hover: var(--q-theme-danger-dark);
 $button-danger-shadow: var(--q-theme-danger-dark-rgb);
 $button-text-on-danger: var(--q-theme-on-danger);
 $button-text-on-danger-hover: var(--q-theme-background);
-$button-plain-hover: rgb(var(--q-theme-neutral-rgb) / 0.1);
+$button-plain-hover: rgb(var(--q-theme-neutral-rgb) / 10%);
 $button-text-on-plain: var(--q-theme-on-background);
 .q-btn {
   $this: &;
@@ -433,7 +484,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0.4rem;
+  padding: 0.4em;
   border-width: 1px;
   background-color: transparent;
   user-select: none;
@@ -442,10 +493,9 @@ $button-text-on-plain: var(--q-theme-on-background);
   border-radius: var(--border-radius);
   transition-property: color, background-color, border-color, box-shadow, text-decoration-color,
     fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 0.15s;
-  &:hover:not(:disabled) {
-    cursor: pointer;
+  &:disabled {
+    opacity: 0.6;
   }
   &:focus {
     outline: $outline;
@@ -454,6 +504,9 @@ $button-text-on-plain: var(--q-theme-on-background);
       outline: 0;
     }
   }
+  &:hover:not(:disabled) {
+    cursor: pointer;
+  }
   &__content {
     position: relative;
     display: flex;
@@ -462,18 +515,12 @@ $button-text-on-plain: var(--q-theme-on-background);
     justify-content: center;
     font-size: $font-size-base;
     white-space: nowrap;
-    gap: 0.25rem;
+    gap: 0.25em;
     pointer-events: none;
-    @if $compact {
-      line-height: 15px;
-      min-width: 15px;
-    } @else {
-      line-height: 16px;
-      min-width: 16px;
-    }
+    line-height: 1;
   }
   .q-spinner-loader {
-    color: currentColor;
+    color: currentcolor;
   }
   
   &--primary {
@@ -489,7 +536,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   &--secondary {
     --box-shadow-tint: #{$button-primary-shadow};
-    border-color: currentColor;
+    border-color: currentcolor;
     color: $button-primary;
     &:hover:not(:disabled) {
       background-color: $button-primary-hover;
@@ -529,10 +576,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     z-index: 2;
     color: var(--q-theme-primary-dark);
     border-color: var(--q-theme-primary);
-    background-color: rgb(var(--q-theme-primary-light-rgb) / 0.5);
-  }
-  &:disabled {
-    opacity: 0.6;
+    background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
   }
   &--loading {
     &:hover {
@@ -544,11 +588,9 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   
   &--small {
-    padding: 0.25rem;
-    line-height: 14px;
+    padding: 0.25em;
     span {
       font-size: 0.75rem;
-      line-height: 14px;
     }
   }
   
@@ -557,9 +599,9 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   &--elevated {
     box-shadow:
-      0 2px 4px -1px rgb(var(--box-shadow-tint) / 0.2),
-      0 4px 5px 0 rgb(var(--box-shadow-tint) / 0.14),
-      0 1px 10px 0 rgb(var(--box-shadow-tint) / 0.12);
+      0 2px 4px -1px rgb(var(--box-shadow-tint) / 20%),
+      0 4px 5px 0 rgb(var(--box-shadow-tint) / 14%),
+      0 1px 10px 0 rgb(var(--box-shadow-tint) / 12%);
   }
   
   &--block {
@@ -583,9 +625,9 @@ $button-text-on-plain: var(--q-theme-on-background);
   &--elevated {
     --box-shadow-tint: var(--q-theme-primary-rgb);
     box-shadow:
-      0 2px 4px -1px rgb(var(--box-shadow-tint) / 0.2),
-      0 4px 5px 0 rgb(var(--box-shadow-tint) / 0.14),
-      0 1px 10px 0 rgb(var(--box-shadow-tint) / 0.12);
+      0 2px 4px -1px rgb(var(--box-shadow-tint) / 20%),
+      0 4px 5px 0 rgb(var(--box-shadow-tint) / 14%),
+      0 1px 10px 0 rgb(var(--box-shadow-tint) / 12%);
   }
   > .q-btn {
     position: relative;
@@ -609,7 +651,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   --card-padding: 1rem;
   --card-border: 1px solid #{$border};
   --card-width: fit-content;
-  --card-hover: 0 5px 15px rgb(var(--q-theme-neutral-rgb) / 0.25);
+  --card-hover: 0 5px 15px rgb(var(--q-theme-neutral-rgb) / 25%);
   --card-scale: 1;
   --card-shadow: none;
   --card-background: var(--q-theme-container);
@@ -668,23 +710,23 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   
   &--elevation-low {
-    --card-shadow: 0 4px 6px rgb(var(--q-theme-neutral-dark-rgb) / 0.15);
+    --card-shadow: 0 4px 6px rgb(var(--q-theme-neutral-dark-rgb) / 15%);
   }
   &--elevation-medium {
-    --card-shadow: 0 6px 9px rgb(var(--q-theme-neutral-dark-rgb) / 0.2);
+    --card-shadow: 0 6px 9px rgb(var(--q-theme-neutral-dark-rgb) / 20%);
   }
   &--elevation-high {
-    --card-shadow: 0 8px 12px rgb(var(--q-theme-neutral-dark-rgb) / 0.25);
+    --card-shadow: 0 8px 12px rgb(var(--q-theme-neutral-dark-rgb) / 25%);
   }
   &--background {
-    --card-background: rgb(var(--q-theme-primary-light-rgb) / 0.5);
+    --card-background: rgb(var(--q-theme-primary-light-rgb) / 50%);
     .q-field__control {
       background-color: var(--q-theme-container);
     }
   }
   &--title-background {
     .q-card__header-content {
-      background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+      background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       padding-bottom: 0.75rem;
     }
     .q-card__title {
@@ -704,7 +746,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     }
     .q-card__subtitle {
       font-size: 0.75rem;
-      color: rgb(var(--q-theme-neutral-rgb) / 0.8);
+      color: rgb(var(--q-theme-neutral-rgb) / 80%);
     }
   }
   
@@ -830,7 +872,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     cursor: default;
     &:not(#{$this}--checked):not(#{$this}--indeterminate) {
       #{$this}__input {
-        background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+        background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       }
     }
   }
@@ -1059,7 +1101,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   padding: $space-base;
 }
 .q-dialog__underlay {
-  background-color: rgb(var(--q-theme-on-background-rgb) / 0.3);
+  background-color: rgb(var(--q-theme-on-background-rgb) / 30%);
 }
 .q-dialog__header {
   display: flex;
@@ -1172,7 +1214,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   &--readonly {
     > #{$this}__control {
-      background-color: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+      background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     }
   }
   &--disabled {
@@ -1210,13 +1252,13 @@ $button-text-on-plain: var(--q-theme-on-background);
 }
 .q-file-input {
   $this: &;
-  --q-file-input__preview-side: 3rem;
-  --q-file-input__preview-padding: 0.75rem;
+  --q-file-input-preview-side: 3rem;
+  --q-file-input-preview-padding: 0.75rem;
   justify-content: center;
   flex-direction: column;
   border-width: 2px; 
   border-style: dashed;
-  padding: var(--q-file-input__preview-padding);
+  padding: var(--q-file-input-preview-padding);
   transition:
     border-color 0.2s ease,
     background-color 0.2s ease;
@@ -1225,7 +1267,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     gap: 0.5rem;
     align-items: center;
     color: var(--q-theme-neutral);
-    min-height: var(--q-file-input__preview-side);
+    min-height: var(--q-file-input-preview-side);
   }
   &__file-details {
     display: flex;
@@ -1236,7 +1278,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   &__attached-file {
     display: flex;
     align-items: center;
-    gap: var(--q-file-input__preview-padding);
+    gap: var(--q-file-input-preview-padding);
     width: 100%;
   }
   &__file-input {
@@ -1245,8 +1287,8 @@ $button-text-on-plain: var(--q-theme-on-background);
   &__preview,
   &__preview.q-icon {
     color: var(--q-theme-neutral);
-    width: var(--q-file-input__preview-side);
-    height: var(--q-file-input__preview-side);
+    width: var(--q-file-input-preview-side);
+    height: var(--q-file-input-preview-side);
     flex-shrink: 0;
   }
   &__image-preview {
@@ -1285,7 +1327,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     align-items: center;
     gap: 0.25rem;
     color: var(--q-theme-neutral);
-    min-height: var(--q-file-input__preview-side);
+    min-height: var(--q-file-input-preview-side);
   }
   
   &--highlighted {
@@ -1305,7 +1347,7 @@ $button-text-on-plain: var(--q-theme-on-background);
 .q-icon {
   display: inline-block;
   &__svg {
-    fill: currentColor;
+    fill: currentcolor;
   }
   &__svg,
   &__img {
@@ -1314,7 +1356,7 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
 }
 $input-group-addon-color: var(--q-theme-primary);
-$input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+$input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 .q-input-group {
   &__prepend > :first-child {
     border-top-left-radius: var(--border-radius);
@@ -1358,6 +1400,9 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
     border-width: 0;
     padding: 0;
     outline: none !important;
+    > * + * {
+      margin-left: -1px;
+    }
     > * {
       border-radius: 0;
       &:focus-within {
@@ -1372,9 +1417,6 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
       border-top-right-radius: var(--border-radius);
       border-bottom-right-radius: var(--border-radius);
     }
-    > * + * {
-      margin-left: -1px;
-    }
   }
 }
 $line-color: var(--q-theme-primary);
@@ -1392,9 +1434,9 @@ $line-color: var(--q-theme-primary);
     
     background: linear-gradient(
       to right,
-      rgb(237, 235, 233) 0%,
+      rgb(237 235 233) 0%,
       $line-color 50%,
-      rgb(237, 235, 233) 100%
+      rgb(237 235 233) 100%
     );
     
     position: absolute;
@@ -1419,8 +1461,7 @@ $line-color: var(--q-theme-primary);
   flex-direction: column;
   align-items: center;
   position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   margin: 0;
   padding: 0;
   -webkit-overflow-scrolling: touch;
@@ -1467,7 +1508,7 @@ $line-color: var(--q-theme-primary);
   &:hover,
   &:focus-visible,
   &--highlighted {
-    background-color: rgb(var(--q-theme-primary-light-rgb) / 0.5);
+    background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
   }
   &--disabled {
     pointer-events: none;
@@ -1485,8 +1526,7 @@ $line-color: var(--q-theme-primary);
   }
   &__container {
     display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
+    flex-flow: column wrap;
     flex-grow: 1;
     gap: $space-base;
   }
@@ -1550,8 +1590,8 @@ $arrow-tip-radius: 0.1rem;
     box-shadow:
       0 0 #0000,
       0 0 #0000,
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 2px 4px -2px rgba(0, 0, 0, 0.1);
+      0 4px 6px -1px rgb(0 0 0 / 10%),
+      0 2px 4px -2px rgb(0 0 0 / 10%);
   }
   &__arrow {
     position: absolute;
@@ -1597,10 +1637,7 @@ $arrow-tip-radius: 0.1rem;
   }
   
   &--independent {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+    inset: 0;
     margin: auto;
     width: max-content;
     height: max-content;
@@ -1612,7 +1649,7 @@ $arrow-tip-radius: 0.1rem;
     --q-overlay-border-color: var(--q-theme-neutral-dark);
   }
 }
-$popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
+$popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 .q-popover {
   .q-overlay__content {
     z-index: 1070;
@@ -1642,30 +1679,30 @@ $popover-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
 .q-popover.q-overlay--bottom .q-overlay__arrow::after {
   border-bottom-color: $popover-header-bg;
 }
-$table-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 0.25);
-$row-hover-bg: rgb(var(--q-theme-primary-light-rgb) / 0.5);
-$row-selected-bg: rgb(var(--q-theme-primary-rgb) / 0.15);
-$base-border: 1px solid rgba(0, 0, 0, 0.1);
+$table-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 25%);
+$row-hover-bg: rgb(var(--q-theme-primary-light-rgb) / 50%);
+$row-selected-bg: rgb(var(--q-theme-primary-rgb) / 15%);
+$base-border: 1px solid rgb(0 0 0 / 10%);
 .q-property-list {
   margin: 0;
   font-size: 0.9rem;
   display: flex;
   flex-direction: column;
   border: $base-border;
-  &--side-panel {
-    flex-direction: row;
-    .q-property-list-panel__container {
-      border-left: $base-border;
-      width: 20%;
-    }
-  }
-  &-panel__container {
+  &-panel {
     padding: 0.4rem;
     display: flex;
     flex-direction: column;
     min-height: 50px;
     gap: 1rem;
   }
+  &--side-panel {
+    flex-direction: row;
+    .q-property-list-panel {
+      border-left: $base-border;
+      width: 20%;
+    }
+  }
   &-panel__label {
     font-weight: bold;
   }
@@ -1701,9 +1738,6 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
       opacity: 0.8;
     }
   }
-  tbody td {
-    border-bottom: $base-border;
-  }
   &-group {
     cursor: pointer;
     td {
@@ -1723,6 +1757,9 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
       }
     }
   }
+  tbody td {
+    border-bottom: $base-border;
+  }
 }
 .q-select {
   $this: &;
@@ -1800,22 +1837,19 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     background-color: var(--q-theme-neutral-light);
-    animation: fadeIn 1s;
+    animation: fade-in 1s;
     border-radius: var(--border-radius);
     &::after {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
+      inset: 0;
       transform: translateX(-100%);
       
       background-image: linear-gradient(
         90deg,
-        rgb(var(--q-theme-background-rgb) / 0) 0,
-        rgb(var(--q-theme-background-rgb) / 0.2) 20%,
-        rgb(var(--q-theme-background-rgb) / 0.5) 60%,
-        rgb(var(--q-theme-background-rgb) / 0)
+        rgb(var(--q-theme-background-rgb) / 0%) 0,
+        rgb(var(--q-theme-background-rgb) / 20%) 20%,
+        rgb(var(--q-theme-background-rgb) / 50%) 60%,
+        rgb(var(--q-theme-background-rgb) / 0%)
       );
       
       animation: shimmer 2s infinite;
@@ -1837,7 +1871,7 @@ $base-border: 1px solid rgba(0, 0, 0, 0.1);
       transform: translateX(100%);
     }
   }
-  @keyframes fadeIn {
+  @keyframes fade-in {
     0% {
       opacity: 0;
     }
@@ -1854,10 +1888,10 @@ $spinner-color: var(--q-theme-primary);
   aspect-ratio: 1;
   border-radius: 50%;
   color: $spinner-color;
-  background: currentColor;
-  --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
-  -webkit-mask: var(--_m);
-  mask: var(--_m);
+  background: currentcolor;
+  --q-spinner-loader-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
+  -webkit-mask: var(--q-spinner-loader-mask);
+  mask: var(--q-spinner-loader-mask);
   -webkit-mask-composite: source-out;
   mask-composite: subtract;
   animation: q-rotate 1s infinite linear;

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

@@ -1 +1 @@
-{"version":3,"file":"QAccordion.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QAccordion/QAccordion.vue"],"names":[],"mappings":"AAKA;AAoCC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAK9C,KAAK,WAAW,GAAG,eAAe,CAAC;AAgBpC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAwBT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;6FAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"QAccordion.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QAccordion/QAccordion.vue"],"names":[],"mappings":"AAOA;AA+CC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAK9C,KAAK,WAAW,GAAG,eAAe,CAAC;AAyBpC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAyBT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;6FAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}