@quidgest/ui 0.20.1 → 0.21.1

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.20.1
+ * Quidgest UI v0.21.1
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -511,6 +511,9 @@ $breakpoint-xl: 1200px;
 $breakpoint-xxl: 1400px;
 $font-size-base: 0.9rem !default;
 $line-height-base: 1.5 !default;
+$icon-size: 1.15em !default;
+$icon-size-sm: $icon-size * 0.87 !default;
+$selection-control-size: 1.15rem !default;
 $font-weight-thin: 100;
 $font-weight-light: 300;
 $font-weight-regular: 400;
@@ -655,18 +658,6 @@ $transition-duration: 0.2s !default;
     transform $transition-duration ease,
     opacity $transition-duration ease;
 }
-@mixin color-variant($prefix, $color) {
-  &--#{$color} {
-    --#{$prefix}-main-color: var(--q-theme-#{$color});
-    --#{$prefix}-main-color-rgb: var(--q-theme-#{$color}-rgb);
-    --#{$prefix}-on-main-color: var(--q-theme-on-#{$color});
-    --#{$prefix}-on-main-color-rgb: var(--q-theme-on-#{$color}-rgb);
-    --#{$prefix}-hover-color: var(--q-theme-#{$color}-dark);
-    --#{$prefix}-hover-color-rgb: var(--q-theme-#{$color}-dark-rgb);
-    --#{$prefix}-on-hover-color: var(--q-theme-on-#{$color});
-    --#{$prefix}-on-hover-color-rgb: var(--q-theme-on-#{$color}-rgb);
-  }
-}
 @mixin sr-only {
   position: absolute;
   width: 1px;
@@ -693,6 +684,10 @@ $transition-duration: 0.2s !default;
 .q-clear-btn.q-button {
   padding: 0.1rem;
   opacity: 0.5;
+  svg {
+    width: $icon-size-sm;
+    height: $icon-size-sm;
+  }
   &:hover {
     cursor: inherit;
   }
@@ -869,10 +864,6 @@ $transition-duration: 0.2s !default;
     pointer-events: none;
   }
   
-  @each $color, $value in $theme-colors {
-    @include color-variant('q-badge', $color);
-  }
-  
   &--large {
     min-height: 44px;
     &:is(span) {
@@ -981,8 +972,8 @@ $transition-duration: 0.2s !default;
   --q-button-on-main-color-rgb: var(--q-theme-on-primary-rgb);
   --q-button-hover-color: var(--q-theme-primary-dark);
   --q-button-hover-color-rgb: var(--q-theme-primary-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-primary);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-primary-rgb);
+  --q-button-on-hover-color: var(--q-theme-on-primary-dark);
+  --q-button-on-hover-color-rgb: var(--q-theme-on-primary-dark-rgb);
   display: inline-flex;
   user-select: none;
   align-items: center;
@@ -1003,6 +994,18 @@ $transition-duration: 0.2s !default;
   transition-duration: 0.15s;
   &#{$this}--labeled {
     padding: 0.4rem 0.8rem;
+    
+    
+    &:where(:has(#{$this}__content > .q-icon)):where(:not(#{$this}--icon-end)):where(
+        :not(#{$this}--icon-top)
+      ):where(:not(#{$this}--icon-bottom)) {
+      padding-inline-start: 0.6rem;
+    }
+    
+    &:where(#{$this}--icon-end):where(:has(#{$this}__content > .q-icon)),
+    &:where(:has(#{$this}__append .q-icon)) {
+      padding-inline-end: 0.6rem;
+    }
   }
   &__content {
     display: inline-flex;
@@ -1012,6 +1015,10 @@ $transition-duration: 0.2s !default;
     width: 100%;
     z-index: 1;
   }
+  
+  &__append {
+    display: contents;
+  }
   &:disabled {
     opacity: 0.6;
   }
@@ -1107,14 +1114,12 @@ $transition-duration: 0.2s !default;
     border-radius: 9999px;
   }
   
-  @each $color, $value in $theme-colors {
-    @include color-variant('q-button', $color);
-  }
+  
   &--background {
     --q-button-main-color: var(--q-theme-background);
     --q-button-on-main-color: var(--q-theme-on-background);
     --q-button-hover-color: var(--q-theme-primary-dark);
-    --q-button-on-hover-color: var(--q-theme-on-primary);
+    --q-button-on-hover-color: var(--q-theme-on-primary-dark);
   }
   
   &--loading {
@@ -1131,6 +1136,15 @@ $transition-duration: 0.2s !default;
     padding: 0.25rem;
     &#{$this}--labeled {
       padding: 0.25rem 0.5rem;
+      &:where(:has(#{$this}__content > .q-icon)):where(:not(#{$this}--icon-end)):where(
+          :not(#{$this}--icon-top)
+        ):where(:not(#{$this}--icon-bottom)) {
+        padding-inline-start: 0.375rem;
+      }
+      &:where(#{$this}--icon-end):where(:has(#{$this}__content > .q-icon)),
+      &:where(:has(#{$this}__append .q-icon)) {
+        padding-inline-end: 0.375rem;
+      }
     }
   }
   
@@ -1539,7 +1553,7 @@ $q-carousel-height-md: 300px;
 }
 .q-checkbox {
   $this: &;
-  --box-size: 1.15rem;
+  --box-size: #{$selection-control-size};
   --icon-color: var(--q-theme-on-primary);
   --icon-opacity: 0;
   --transition-duration: 0.15s;
@@ -1837,6 +1851,10 @@ $q-carousel-height-md: 300px;
 .q-combobox__chevron.q-button {
   padding: 0.1rem;
   opacity: 0.5;
+  svg {
+    width: $icon-size-sm;
+    height: $icon-size-sm;
+  }
   &:hover {
     cursor: inherit;
   }
@@ -2797,8 +2815,8 @@ $q-spacing-sides: (
   }
   &__svg,
   &__img {
-    width: 1em;
-    height: 1em;
+    width: $icon-size;
+    height: $icon-size;
   }
 }
 $input-group-addon-color: var(--q-theme-primary);
@@ -2812,6 +2830,16 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
   }
+  
+  > .q-field__control > .q-input-group__append:first-child > :first-child {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+  
+  > .q-field__control > .q-input-group__prepend:last-child > :last-child {
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+  }
   &__prepend,
   &__append {
     display: flex;
@@ -2851,10 +2879,19 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     }
     > * {
       border-radius: 0;
+      align-self: stretch;
       &:focus-within {
         z-index: 2;
       }
     }
+    
+    
+    > .q-field > .q-field__control {
+      height: 100%;
+    }
+    > .q-button {
+      height: auto;
+    }
     > :first-child {
       border-top-left-radius: var(--border-radius);
       border-bottom-left-radius: var(--border-radius);
@@ -2941,10 +2978,14 @@ $q-line-loader-color: var(--q-line-loader-color);
 }
 .q-list-item {
   $this: &;
+  
+  $control-height: $selection-control-size;
   display: flex;
   gap: 0.25rem;
   align-items: center;
   padding: $space-base * 1.5 $space-base * 2;
+  
+  min-height: calc(#{$control-height} + #{$space-base * 3});
   list-style: none;
   line-height: 15px;
   overflow-wrap: break-word;
@@ -2995,11 +3036,16 @@ $q-line-loader-color: var(--q-line-loader-color);
     align-items: center;
     margin-left: auto;
     min-width: 1em;
-    min-height: 1.15rem;
+    min-height: $control-height;
     align-self: center;
     &--top {
       align-self: flex-start;
     }
+    
+    .q-list-item__check {
+      width: $icon-size-sm;
+      height: $icon-size-sm;
+    }
   }
   &__description {
     display: flex;
@@ -3105,6 +3151,220 @@ $q-line-loader-color: var(--q-line-loader-color);
     flex-shrink: 0;
   }
 }
+$q-overflow-fade-size: 2.5rem;
+$q-overflow-control-size: 2.25rem;
+.q-overflow {
+  --q-overflow-fade-size: #{$q-overflow-fade-size};
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
+  outline: none;
+}
+.q-overflow__viewport:focus-visible {
+  outline: $outline;
+}
+.q-overflow__control .q-overflow__button:focus-visible {
+  outline: $outline;
+}
+.q-overflow__viewport {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  outline: none;
+  -webkit-overflow-scrolling: touch;
+  
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.q-overflow__content {
+  position: relative;
+}
+.q-overflow__control {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+.q-overflow__button {
+  min-width: $q-overflow-control-size;
+  min-height: $q-overflow-control-size;
+}
+.q-overflow--horizontal {
+  flex-direction: row;
+  .q-overflow__viewport {
+    overflow: auto hidden;
+  }
+}
+.q-overflow--vertical {
+  flex-direction: column;
+  
+  height: 100%;
+  .q-overflow__viewport {
+    overflow: hidden auto;
+  }
+}
+.q-overflow--horizontal.q-overflow--can-scroll-start.q-overflow--can-scroll-end {
+  .q-overflow__viewport {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--q-overflow-fade-size),
+      #000 calc(100% - var(--q-overflow-fade-size)),
+      transparent
+    );
+  }
+}
+.q-overflow--horizontal.q-overflow--can-scroll-start:not(.q-overflow--can-scroll-end) {
+  .q-overflow__viewport {
+    mask-image: linear-gradient(to right, transparent, #000 var(--q-overflow-fade-size), #000);
+  }
+}
+.q-overflow--horizontal.q-overflow--can-scroll-end:not(.q-overflow--can-scroll-start) {
+  .q-overflow__viewport {
+    mask-image: linear-gradient(
+      to right,
+      #000,
+      #000 calc(100% - var(--q-overflow-fade-size)),
+      transparent
+    );
+  }
+}
+.q-overflow--vertical.q-overflow--can-scroll-start.q-overflow--can-scroll-end {
+  .q-overflow__viewport {
+    mask-image: linear-gradient(
+      to bottom,
+      transparent,
+      #000 var(--q-overflow-fade-size),
+      #000 calc(100% - var(--q-overflow-fade-size)),
+      transparent
+    );
+  }
+}
+.q-overflow--vertical.q-overflow--can-scroll-start:not(.q-overflow--can-scroll-end) {
+  .q-overflow__viewport {
+    mask-image: linear-gradient(to bottom, transparent, #000 var(--q-overflow-fade-size), #000);
+  }
+}
+.q-overflow--vertical.q-overflow--can-scroll-end:not(.q-overflow--can-scroll-start) {
+  .q-overflow__viewport {
+    mask-image: linear-gradient(
+      to bottom,
+      #000,
+      #000 calc(100% - var(--q-overflow-fade-size)),
+      transparent
+    );
+  }
+}
+.q-overflow--arrows-outside {
+  .q-overflow__control {
+    position: relative;
+    z-index: 1;
+    align-self: stretch;
+    align-items: stretch;
+  }
+  
+  .q-overflow__control > *,
+  .q-overflow__button {
+    align-self: stretch;
+  }
+}
+.q-overflow--horizontal.q-overflow--arrows-outside {
+  .q-overflow__control > *,
+  .q-overflow__button {
+    height: 100%;
+  }
+}
+.q-overflow--vertical.q-overflow--arrows-outside {
+  .q-overflow__control {
+    width: 100%;
+  }
+  .q-overflow__control > *,
+  .q-overflow__button {
+    width: 100%;
+  }
+}
+.q-overflow--arrows-inside {
+  position: relative;
+  .q-overflow__viewport {
+    width: 100%;
+  }
+  .q-overflow__control {
+    position: absolute;
+    z-index: 2;
+    pointer-events: none;
+    > * {
+      pointer-events: auto;
+    }
+    
+    .q-overflow__button.q-button {
+      background-color: rgb(var(--q-theme-background-rgb) / 80%);
+      @media (hover: hover) {
+        &:hover:not(:disabled) {
+          background-color: rgb(var(--q-theme-background-rgb) / 95%);
+        }
+      }
+    }
+  }
+}
+.q-overflow--horizontal.q-overflow--arrows-inside {
+  .q-overflow__control--prev {
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+  .q-overflow__control--next {
+    inset-block: 0;
+    inset-inline-end: 0;
+  }
+}
+.q-overflow--vertical.q-overflow--arrows-inside {
+  .q-overflow__control--prev {
+    inset-inline: 0;
+    inset-block-start: 0;
+  }
+  .q-overflow__control--next {
+    inset-inline: 0;
+    inset-block-end: 0;
+  }
+}
+.q-overflow--arrows-hover {
+  @media (hover: hover) and (pointer: fine) {
+    .q-overflow__control {
+      opacity: 0;
+      transition: opacity 0.15s ease;
+    }
+    &:hover .q-overflow__control,
+    &:focus-within .q-overflow__control {
+      opacity: 1;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .q-overflow__control {
+        transition: none;
+      }
+    }
+  }
+}
+.q-overflow--arrows-hover.q-overflow--arrows-inside {
+  @media (hover: hover) and (pointer: fine) {
+    .q-overflow__control {
+      pointer-events: none;
+      > * {
+        pointer-events: none;
+      }
+    }
+    &:hover .q-overflow__control,
+    &:focus-within .q-overflow__control {
+      pointer-events: auto;
+      > * {
+        pointer-events: auto;
+      }
+    }
+  }
+}
 $overlay-border-width: 1px;
 $overlay-arrow-width: 11.31px;
 $overlay-arrow-height: 11.31px;
@@ -3823,6 +4083,10 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
   &__chevron.q-button {
     padding: 0.1rem;
     opacity: 0.5;
+    svg {
+      width: $icon-size-sm;
+      height: $icon-size-sm;
+    }
     &:hover {
       cursor: inherit;
     }
@@ -4669,19 +4933,12 @@ $q-toast-slide-distance: clamp(1rem, 3vw, 1.5rem) !default;
     background-color: var(--q-toast-tonal-color);
     border-color: transparent;
     color: var(--q-toast-hover-color);
-    #{$this}__dismiss.q-button {
-      --q-button-main-color: var(--q-toast-hover-color);
-    }
   }
   &--outlined {
     background-color: transparent;
     border-color: var(--q-toast-main-color);
     color: var(--q-toast-main-color);
   }
-  
-  @each $color, $value in $theme-colors {
-    @include color-variant('q-toast', $color);
-  }
 }
 .toast-stack-enter-active {
   transition:

package/esm/components/QAccordion/QAccordionItem.vue.js

@@ -1,6 +1,6 @@
 import { useGroupItem as e } from "../../composables/useGroup/index.js";
 import { QCollapsible as t } from "../QCollapsible/index.js";
-import { useId as n } from "../../composables/uid.js";
+import { useId as n } from "../../composables/useId/index.js";
 import { createBlock as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, toRef as c, unref as l, withCtx as u } from "vue";
 //#region src/components/QAccordion/QAccordionItem.vue?vue&type=script&setup=true&lang.ts
 var d = /*@__PURE__*/ i({

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

@@ -1 +1 @@
-{"version":3,"file":"QBadge.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/QBadge.vue"],"names":[],"mappings":"AAyCA;AAkJC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,CAAA;AAmGrC,iBAAS,cAAc;WAuIT,OAAO,IAA6B;;yBAXrB,GAAG;yBACF,GAAG;;;;EAehC;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;6EAQnB,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"}
+{"version":3,"file":"QBadge.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/QBadge.vue"],"names":[],"mappings":"AAyCA;AA+IC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,CAAA;AAgGrC,iBAAS,cAAc;WAuIT,OAAO,IAA6B;;yBAXrB,GAAG;yBACF,GAAG;;;;EAehC;AAoBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;6EAQnB,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/QBadge/QBadge.vue.js

@@ -31,26 +31,22 @@ var T = ["id"], E = {
 				e,
 				f.class
 			];
-		}), M = o(() => {
-			let e = N.value ? `q-badge--${f.color}` : void 0;
-			return [
-				"q-badge",
-				`q-badge--${f.variant}`,
-				{
-					"q-badge--removable": f.removable,
-					"q-badge--disabled": f.disabled
-				},
-				e,
-				j.value
-			];
-		}), { isUtilityColor: N, style: P } = e(x(f, "color")), F = o(() => {
-			if (!N.value) return {
-				"--q-badge-main-color": P.value?.mainColor,
-				"--q-badge-on-main-color": P.value?.onMainColor,
-				"--q-badge-hover-color": P.value?.hoverColor,
-				"--q-badge-on-hover-color": P.value?.onHoverColor
+		}), M = o(() => [
+			"q-badge",
+			`q-badge--${f.variant}`,
+			{
+				"q-badge--removable": f.removable,
+				"q-badge--disabled": f.disabled
+			},
+			j.value
+		]), { style: N } = e(x(f, "color")), P = o(() => {
+			if (N.value) return {
+				"--q-badge-main-color": N.value.mainColor,
+				"--q-badge-on-main-color": N.value.onMainColor,
+				"--q-badge-hover-color": N.value.hoverColor,
+				"--q-badge-on-hover-color": N.value.onHoverColor
 			};
-		}), I = o(() => k.onClick), L = o(() => ({
+		}), F = o(() => k.onClick), I = o(() => ({
 			class: "q-badge__remove",
 			variant: f.variant,
 			color: f.color,
@@ -58,7 +54,7 @@ var T = ["id"], E = {
 			title: f.texts.removeText,
 			disabled: f.disabled
 		}));
-		function R() {
+		function L() {
 			O("click:remove");
 		}
 		return (e, r) => A.value ? (v(), s(b(f.removable ? S(a) : "span"), {
@@ -70,7 +66,7 @@ var T = ["id"], E = {
 				variant: f.variant,
 				color: f.color,
 				disabled: f.disabled,
-				onClick: I.value
+				onClick: F.value
 			}, {
 				default: w(() => [y(e.$slots, "default")]),
 				_: 3
@@ -79,7 +75,7 @@ var T = ["id"], E = {
 				"color",
 				"disabled",
 				"onClick"
-			]), f.removable ? (v(), s(S(t), m({ key: 0 }, L.value, { onClick: R }), {
+			]), f.removable ? (v(), s(S(t), m({ key: 0 }, I.value, { onClick: L }), {
 				default: w(() => [d(S(n), g(p(f.icons.remove)), null, 16)]),
 				_: 1
 			}, 16)) : c("v-if", !0)]),
@@ -88,8 +84,8 @@ var T = ["id"], E = {
 			key: 0,
 			id: f.id,
 			class: h(M.value),
-			style: _(F.value)
-		}, [f.variant === "tonal" ? (v(), l("div", E)) : c("v-if", !0), u("span", null, [u("div", D, [y(e.$slots, "default")]), f.removable ? (v(), s(S(t), m({ key: 0 }, L.value, { onClick: R }), {
+			style: _(P.value)
+		}, [f.variant === "tonal" ? (v(), l("div", E)) : c("v-if", !0), u("span", null, [u("div", D, [y(e.$slots, "default")]), f.removable ? (v(), s(S(t), m({ key: 0 }, I.value, { onClick: L }), {
 			default: w(() => [d(S(n), g(p(f.icons.remove)), null, 16)]),
 			_: 1
 		}, 16)) : c("v-if", !0)])], 14, T));

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

@@ -1 +1 @@
-{"version":3,"file":"QButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/QButton.vue"],"names":[],"mappings":"AAoBA;AA0GC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AA8EtC,iBAAS,cAAc;WAgDT,OAAO,IAA6B;;yBAXrB,GAAG;wBACJ,GAAG;;;;EAe9B;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;2FASnB,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"}
+{"version":3,"file":"QButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/QButton.vue"],"names":[],"mappings":"AAwBA;AAgHC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AAgFtC,iBAAS,cAAc;WAqDT,OAAO,IAA6B;;yBAXrB,GAAG;wBACJ,GAAG;;;;EAe9B;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;2FASnB,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/QButton/QButton.vue.js

@@ -5,7 +5,10 @@ import { computed as n, createCommentVNode as r, createElementBlock as i, create
 var _ = ["id", "disabled"], v = {
 	key: 0,
 	class: "q-button__spinner"
-}, y = { class: "q-button__content" }, b = /*@__PURE__*/ c({
+}, y = { class: "q-button__content" }, b = {
+	key: 0,
+	class: "q-button__append"
+}, x = /*@__PURE__*/ c({
 	__name: "QButton",
 	props: {
 		id: {},
@@ -23,52 +26,52 @@ var _ = ["id", "disabled"], v = {
 		loading: { type: Boolean }
 	},
 	emits: ["click"],
-	setup(c, { emit: b }) {
-		let x = c, S = b, C = n(() => x.disabled || x.loading);
-		function w(e) {
-			C.value || S("click", e);
+	setup(c, { emit: x }) {
+		let S = c, C = x, w = n(() => S.disabled || S.loading);
+		function T(e) {
+			w.value || C("click", e);
 		}
-		let { isUtilityColor: T, style: E } = t(m(x, "color")), D = n(() => {
-			let e = T.value ? `q-button--${x.color}` : void 0, t = x.size === "regular" ? void 0 : `q-button--${x.size}`, n = x.iconPos === "start" ? void 0 : `q-button--icon-${x.iconPos}`;
+		let { style: E } = t(m(S, "color")), D = n(() => {
+			let e = S.color === "background" ? "q-button--background" : void 0, t = S.size === "regular" ? void 0 : `q-button--${S.size}`, n = S.iconPos === "start" ? void 0 : `q-button--icon-${S.iconPos}`;
 			return [
 				"q-button",
-				`q-button--${x.variant}`,
+				`q-button--${S.variant}`,
 				e,
 				t,
 				n,
 				{
-					"q-button--labeled": x.label,
-					"q-button--borderless": x.borderless,
-					"q-button--elevated": x.elevated,
-					"q-button--block": x.block,
-					"q-button--loading": x.loading,
-					"q-button--pill": x.pill
+					"q-button--labeled": S.label,
+					"q-button--borderless": S.borderless,
+					"q-button--elevated": S.elevated,
+					"q-button--block": S.block,
+					"q-button--loading": S.loading,
+					"q-button--pill": S.pill
 				},
-				x.class
+				S.class
 			];
 		}), O = n(() => {
-			if (!T.value) return {
-				"--q-button-main-color": E.value?.mainColor,
-				"--q-button-main-color-rgb": E.value?.mainColorRgb,
-				"--q-button-on-main-color": E.value?.onMainColor,
-				"--q-button-hover-color": E.value?.hoverColor,
-				"--q-button-hover-color-rgb": E.value?.hoverColorRgb,
-				"--q-button-on-hover-color": E.value?.onHoverColor
+			if (!(S.color === "background" || !E.value)) return {
+				"--q-button-main-color": E.value.mainColor,
+				"--q-button-main-color-rgb": E.value.mainColorRgb,
+				"--q-button-on-main-color": E.value.onMainColor,
+				"--q-button-hover-color": E.value.hoverColor,
+				"--q-button-hover-color-rgb": E.value.hoverColorRgb,
+				"--q-button-on-hover-color": E.value.onHoverColor
 			};
 		});
 		return (t, n) => (d(), i("button", {
-			id: x.id,
+			id: S.id,
 			type: "button",
 			class: l(D.value),
-			disabled: C.value,
+			disabled: w.value,
 			style: u(O.value),
-			onClick: g(w, ["stop", "prevent"])
-		}, [x.loading ? (d(), i("div", v, [s(h(e))])) : r("v-if", !0), a("span", y, [
+			onClick: g(T, ["stop", "prevent"])
+		}, [S.loading ? (d(), i("div", v, [s(h(e))])) : r("v-if", !0), a("span", y, [
 			f(t.$slots, "default"),
-			o(" " + p(x.label) + " ", 1),
-			f(t.$slots, "append")
+			o(" " + p(S.label) + " ", 1),
+			t.$slots.append ? (d(), i("span", b, [f(t.$slots, "append")])) : r("v-if", !0)
 		])], 14, _));
 	}
 });
 //#endregion
-export { b as default };
+export { x as default };

package/esm/components/QCheckbox/QCheckbox.vue.js

@@ -1,5 +1,5 @@
 import { QIcon as e } from "../QIcon/index.js";
-import { useId as t } from "../../composables/uid.js";
+import { useId as t } from "../../composables/useId/index.js";
 import { DEFAULT_ICONS as n } from "./constants.js";
 import { QCheckboxLabel as r } from "./index.js";
 import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, toRef as g, unref as _, useModel as v, useTemplateRef as y, watch as b, withCtx as x, withKeys as S, withModifiers as C } from "vue";