@quidgest/ui 0.14.21 → 0.15.0

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.14.21
+ * Quidgest UI v0.15.0
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -125,6 +125,76 @@ progress {
 summary {
   display: list-item;
 }
+$primary: var(--q-theme-primary);
+$primary-rgb: var(--q-theme-primary-rgb);
+$primary-light: var(--q-theme-primary-light);
+$primary-light-rgb: var(--q-theme-primary-light-rgb);
+$primary-dark: var(--q-theme-primary-dark);
+$primary-dark-rgb: var(--q-theme-primary-dark-rgb);
+$on-primary: var(--q-theme-on-primary);
+$on-primary-rgb: var(--q-theme-on-primary-rgb);
+$secondary: var(--q-theme-secondary);
+$secondary-rgb: var(--q-theme-secondary-rgb);
+$on-secondary: var(--q-theme-on-secondary);
+$on-secondary-rgb: var(--q-theme-on-secondary-rgb);
+$highlight: var(--q-theme-highlight);
+$highlight-rgb: var(--q-theme-highlight-rgb);
+$on-highlight: var(--q-theme-on-highlight);
+$on-highlight-rgb: var(--q-theme-on-highlight-rgb);
+$background: var(--q-theme-background);
+$background-rgb: var(--q-theme-background-rgb);
+$on-background: var(--q-theme-on-background);
+$on-background-rgb: var(--q-theme-on-background-rgb);
+$container: var(--q-theme-container);
+$container-rgb: var(--q-theme-container-rgb);
+$info: var(--q-theme-info);
+$info-rgb: var(--q-theme-info-rgb);
+$info-light: var(--q-theme-info-light);
+$info-light-rgb: var(--q-theme-info-light-rgb);
+$info-dark: var(--q-theme-info-dark);
+$info-dark-rgb: var(--q-theme-info-dark-rgb);
+$on-info: var(--q-theme-on-info);
+$on-info-rgb: var(--q-theme-on-info-rgb);
+$success: var(--q-theme-success);
+$success-rgb: var(--q-theme-success-rgb);
+$success-light: var(--q-theme-success-light);
+$success-light-rgb: var(--q-theme-success-light-rgb);
+$success-dark: var(--q-theme-success-dark);
+$success-dark-rgb: var(--q-theme-success-dark-rgb);
+$on-success: var(--q-theme-on-success);
+$on-success-rgb: var(--q-theme-on-success-rgb);
+$warning: var(--q-theme-warning);
+$warning-rgb: var(--q-theme-warning-rgb);
+$warning-light: var(--q-theme-warning-light);
+$warning-light-rgb: var(--q-theme-warning-light-rgb);
+$warning-dark: var(--q-theme-warning-dark);
+$warning-dark-rgb: var(--q-theme-warning-dark-rgb);
+$on-warning: var(--q-theme-on-warning);
+$on-warning-rgb: var(--q-theme-on-warning-rgb);
+$danger: var(--q-theme-danger);
+$danger-rgb: var(--q-theme-danger-rgb);
+$danger-light: var(--q-theme-danger-light);
+$danger-light-rgb: var(--q-theme-danger-light-rgb);
+$danger-dark: var(--q-theme-danger-dark);
+$danger-dark-rgb: var(--q-theme-danger-dark-rgb);
+$on-danger: var(--q-theme-on-danger);
+$on-danger-rgb: var(--q-theme-on-danger-rgb);
+$neutral: var(--q-theme-neutral);
+$neutral-rgb: var(--q-theme-neutral-rgb);
+$neutral-light: var(--q-theme-neutral-light);
+$neutral-light-rgb: var(--q-theme-neutral-light-rgb);
+$neutral-dark: var(--q-theme-neutral-dark);
+$neutral-dark-rgb: var(--q-theme-neutral-dark-rgb);
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'highlight': $highlight,
+  'info': $info,
+  'success': $success,
+  'warning': $warning,
+  'danger': $danger,
+  'neutral': $neutral
+);
 $border-radius: 0.25rem !default;
 $compact: true !default;
 $space-base: 0.25rem !default;
@@ -251,6 +321,14 @@ body {
 .fade-leave-active {
   transition: opacity 0.2s;
 }
+@mixin color-variant($prefix, $color) {
+  &--#{$color} {
+    --#{$prefix}-main-color: var(--q-theme-#{$color});
+    --#{$prefix}-on-main-color: var(--q-theme-on-#{$color});
+    --#{$prefix}-hover-color: var(--q-theme-#{$color}-dark);
+    --#{$prefix}-on-hover-color: var(--q-theme-on-#{$color});
+  }
+}
 .q-chevron {
   transition: all 0.2s;
   &--expanded {
@@ -260,7 +338,7 @@ body {
     transition: none;
   }
 }
-.q-clear-btn.q-btn {
+.q-clear-btn.q-button {
   padding: 0.1rem;
   opacity: 0.5;
   &:hover {
@@ -286,7 +364,6 @@ body {
   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;
@@ -297,7 +374,6 @@ body {
     width: calc(100% + 2px);
     height: calc(100% + 2px);
     border-radius: inherit;
-    background-color: var(--q-badge-color);
     opacity: 0.1;
   }
   &__content {
@@ -306,61 +382,38 @@ body {
     gap: 0.25em;
     z-index: 1;
   }
-  &__remove {
-    .q-btn__content {
-      font-size: inherit;
-    }
-    &.q-btn:not(:disabled) {
-      padding: 0;
-      border-radius: 9999px;
-      color: inherit;
-      &:hover {
-        background-color: var(--q-badge-color);
-      }
-    }
+  &__remove.q-button:not(:disabled) {
+    padding: 0;
   }
   .q-icon {
     color: currentcolor;
   }
   
-  &--large {
-    font-size: 0.9rem;
+  &--bold {
+    background-color: var(--q-badge-main-color);
+    border-color: var(--q-badge-main-color);
+    color: var(--q-badge-on-main-color);
   }
-  
-  &--pill {
-    border-radius: 9999px;
+  &--outlined {
+    background-color: transparent;
+    border-color: var(--q-badge-main-color);
+    color: var(--q-badge-main-color);
   }
   &--tonal {
-    &#{$this}--clickable:hover {
-      #{$this}__underlay {
-        opacity: 1;
-      }
-    }
-  }
-  &--bold {
+    color: var(--q-badge-main-color);
     #{$this}__underlay {
-      opacity: 1;
+      background-color: var(--q-badge-main-color);
     }
   }
-  &--outlined {
-    border-color: currentcolor;
-    #{$this}__underlay {
-      opacity: 0;
-    }
-    &#{$this}--clickable:hover {
-      #{$this}__underlay {
-        background-color: var(--q-badge-color);
-        opacity: 1;
-      }
-    }
+  &--pill {
+    border-radius: 9999px;
   }
   &--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));
-      }
+      color: var(--q-badge-on-hover-color, var(--q-badge-on-main-color));
+      background-color: var(--q-badge-hover-color);
+      border-color: var(--q-badge-hover-color);
     }
     &:focus {
       outline: $outline;
@@ -369,32 +422,14 @@ body {
       }
     }
   }
-  @mixin color-variant($color) {
-    &--#{$color} {
-      --q-badge-color: var(--q-theme-#{$color});
-      &.q-badge--bold.q-badge--clickable:hover {
-        --q-badge-color: var(--q-theme-#{$color}-dark);
-      }
-    }
-    &--#{$color}.q-badge--tonal,
-    &--#{$color}.q-badge--outlined {
-      --q-badge-text-color: var(--q-theme-#{$color});
-    }
-    &--#{$color}.q-badge--bold,
-    &.q-badge--clickable:hover {
-      --q-badge-text-color: var(--q-theme-on-#{$color});
-      .q-badge__remove.q-btn:not(:disabled):hover {
-        background-color: var(--q-badge-text-color);
-        color: var(--q-badge-color);
-      }
-    }
+  
+  @each $color, $value in $theme-colors {
+    @include color-variant('q-badge', $color);
+  }
+  
+  &--large {
+    font-size: 0.9rem;
   }
-  @include color-variant('primary');
-  @include color-variant('info');
-  @include color-variant('success');
-  @include color-variant('warning');
-  @include color-variant('danger');
-  @include color-variant('highlight');
 }
 .q-badge-indicator {
   $this: &;
@@ -468,41 +503,45 @@ body {
     transform-origin: 100% 100%;
   }
 }
-$button-primary: var(--q-theme-primary);
-$button-primary-hover: var(--q-theme-primary-dark);
-$button-primary-shadow: var(--q-theme-primary-dark-rgb);
-$button-text-on-primary: var(--q-theme-on-primary);
-$button-text-on-primary-hover: var(--q-theme-background);
-$button-danger: var(--q-theme-danger);
-$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) / 10%);
-$button-text-on-plain: var(--q-theme-on-background);
-.q-btn {
+.q-button {
   $this: &;
-  --box-shadow-tint: 0 0 0;
-  position: relative;
-  display: flex;
-  flex-direction: row;
+  --q-button-main-color: var(--q-theme-primary);
+  --q-button-on-main-color: var(--q-theme-on-primary);
+  --q-button-hover-color: var(--q-theme-primary-dark);
+  --q-button-on-hover-color: var(--q-theme-on-primary);
+  display: inline-flex;
+  user-select: none;
   align-items: center;
-  padding: 0.4rem;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
   border-width: 1px;
-  background-color: transparent;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
+  border-color: transparent;
+  padding: 0.4rem;
+  line-height: 1;
+  gap: $space-base;
   border-radius: var(--border-radius);
+  outline: none;
+  margin: 0;
+  text-decoration: none;
+  white-space: nowrap;
   transition-property: color, background-color, border-color, box-shadow, text-decoration-color,
     fill, stroke;
   transition-duration: 0.15s;
+  &__content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25em;
+    width: 100%;
+    z-index: 1;
+  }
   &:disabled {
     opacity: 0.6;
   }
   &:focus {
     outline: $outline;
-    z-index: 3;
+    z-index: 3; 
     &:not(:focus-visible) {
       outline: 0;
     }
@@ -510,72 +549,64 @@ $button-text-on-plain: var(--q-theme-on-background);
   &:hover:not(:disabled) {
     cursor: pointer;
   }
-  &__content {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    font-size: $font-size-base;
-    white-space: nowrap;
-    gap: $space-base;
-    pointer-events: none;
-    line-height: 1;
-  }
   .q-icon {
     color: currentcolor;
   }
-  .q-spinner-loader {
-    color: currentcolor;
+  &__spinner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    .q-spinner-loader {
+      font-size: 1em;
+      color: currentcolor;
+    }
   }
   
-  &--primary {
-    --box-shadow-tint: #{$button-primary-shadow};
-    background-color: $button-primary;
-    border-color: $button-primary;
-    color: $button-text-on-primary;
+  &--bold {
+    background-color: var(--q-button-main-color);
+    border-color: var(--q-button-main-color);
+    color: var(--q-button-on-main-color);
     &:hover:not(:disabled) {
-      background-color: $button-primary-hover;
-      border-color: $button-primary-hover;
-      color: $button-text-on-primary-hover;
+      background-color: var(--q-button-hover-color);
+      color: var(--q-button-on-hover-color);
+      border-color: var(--q-button-hover-color);
     }
   }
-  &--secondary {
-    --box-shadow-tint: #{$button-primary-shadow};
-    border-color: currentcolor;
-    color: $button-primary;
+  &--outlined {
+    background-color: transparent;
+    border-color: var(--q-button-main-color);
+    color: var(--q-button-main-color);
     &:hover:not(:disabled) {
-      background-color: $button-primary-hover;
-      border-color: $button-primary-hover;
-      color: $button-text-on-primary-hover;
+      background-color: var(--q-button-hover-color);
+      color: var(--q-button-on-hover-color);
+      border-color: var(--q-button-hover-color);
     }
   }
-  &--tertiary {
-    --box-shadow-tint: #{$button-primary-shadow};
+  &--text {
     background-color: transparent;
     border-color: transparent;
-    color: $button-primary;
-    &:hover:not(:disabled),
-    &:focus:not(:disabled) {
-      color: $button-primary-hover;
-    }
-  }
-  &--danger {
-    --box-shadow-tint: #{$button-danger-shadow};
-    background-color: $button-danger;
-    border-color: $button-danger;
-    color: $button-text-on-danger;
+    color: var(--q-button-main-color);
     &:hover:not(:disabled) {
-      background-color: $button-danger-hover;
-      border-color: $button-danger-hover;
-      color: $button-text-on-danger-hover;
+      color: var(--q-button-hover-color);
     }
   }
-  &--plain {
-    color: $button-text-on-plain;
-    &:hover:not(:disabled) {
-      background-color: $button-plain-hover;
-    }
+  &--pill {
+    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);
   }
   
   &--active {
@@ -594,48 +625,49 @@ $button-text-on-plain: var(--q-theme-on-background);
   }
   
   &--small {
-    padding: 0.25rem;
-    span {
-      font-size: 0.75rem;
-    }
+    font-size: 0.8em;
   }
   
   &--borderless {
-    border-color: transparent !important;
+    border-color: transparent;
   }
   &--elevated {
     box-shadow:
-      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%);
+      0 3px 1px -2px rgb(var(--q-theme-on-background-rgb) / 20%),
+      0 2px 2px 0 rgb(var(--q-theme-on-background-rgb) / 14%),
+      0 1px 5px 0 rgb(var(--q-theme-on-background-rgb) / 12%);
   }
-  
-  &--block {
-    display: block;
-    width: 100%;
-    & + & {
-      margin-top: 0.5rem;
+  &--icon-end {
+    #{$this}__content {
+      flex-direction: row-reverse;
     }
   }
-  &__spinner {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
+  &--icon-top {
+    #{$this}__content {
+      flex-direction: column;
+    }
+  }
+  &--icon-bottom {
+    #{$this}__content {
+      flex-direction: column-reverse;
+    }
+  }
+  
+  &--block {
+    min-width: 100%;
   }
 }
-.q-btn-group {
-  --box-shadow-tint: 0 0 0;
+.q-button-group {
   position: relative;
   display: inline-flex;
   border-radius: var(--border-radius);
   &--elevated {
-    --box-shadow-tint: var(--q-theme-primary-rgb);
     box-shadow:
-      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%);
+      0 3px 1px -2px rgb(var(--q-theme-on-background-rgb) / 20%),
+      0 2px 2px 0 rgb(var(--q-theme-on-background-rgb) / 14%),
+      0 1px 5px 0 rgb(var(--q-theme-on-background-rgb) / 12%);
   }
-  > .q-btn {
+  > .q-button {
     position: relative;
     flex: 0 1 auto;
     &:not(:last-child) {
@@ -932,7 +964,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     width: 100%;
     margin: 0;
     padding: 0;
-    .q-btn__content {
+    .q-button__content {
       gap: 0;
       padding: $btn-padding;
       display: flex;
@@ -1119,7 +1151,7 @@ $button-text-on-plain: var(--q-theme-on-background);
     font-size: 1rem;
   }
 }
-.q-dialog__header .q-btn {
+.q-dialog__header .q-button {
   align-items: center;
 }
 .q-dialog__body {

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":"AAuBA;AA4GC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AA8EvD,iBAAS,cAAc;WAsET,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;yFASnB,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":"AA2BA;AAqHC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AA6EvD,iBAAS,cAAc;WA4ET,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;yFASnB,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

@@ -1,25 +1,28 @@
-import { defineComponent as q, useAttrs as y, computed as r, toRef as d, createElementBlock as x, openBlock as c, withKeys as h, normalizeStyle as B, normalizeClass as z, withModifiers as w, createElementVNode as u, renderSlot as E, createBlock as S, createCommentVNode as T, unref as m, withCtx as N, createVNode as V, normalizeProps as $, guardReactiveProps as A } from "vue";
+import { defineComponent as q, useAttrs as y, computed as r, toRef as h, createElementBlock as d, openBlock as n, withKeys as x, normalizeStyle as z, normalizeClass as B, withModifiers as w, createCommentVNode as u, createElementVNode as E, renderSlot as T, createBlock as N, unref as m, withCtx as S, createVNode as V, normalizeProps as $, guardReactiveProps as A } from "vue";
 import { QButton as I } from "../QButton/index.js";
 import { QIcon as K } from "../QIcon/index.js";
-import { DEFAULT_TEXTS as P, DEFAULT_ICONS as Q } from "./types.js";
-import { useColorStyle as R } from "../../composables/useColorStyle/index.js";
-const U = ["id", "role", "tabindex", "onKeydown"], D = { class: "q-badge__content" }, j = /* @__PURE__ */ q({
+import { useColor as P } from "../../composables/useColor/index.js";
+import { DEFAULT_TEXTS as Q, DEFAULT_ICONS as R } from "./types.js";
+const U = ["id", "role", "tabindex", "onKeydown"], D = {
+  key: 0,
+  class: "q-badge__underlay"
+}, F = { class: "q-badge__content" }, j = /* @__PURE__ */ q({
   __name: "QBadge",
   props: {
     id: {},
     class: {},
-    color: { default: "primary" },
     variant: { default: "tonal" },
+    color: { default: "primary" },
     removable: { type: Boolean },
     pill: { type: Boolean },
     size: { default: "default" },
-    icons: { default: () => Q },
-    texts: { default: () => P }
+    icons: { default: () => R },
+    texts: { default: () => Q }
   },
   emits: ["click:remove"],
   setup(v, { emit: f }) {
-    const e = v, p = f, b = y(), a = r(() => !!b.onClick), g = r(() => {
-      const o = n.value ? `q-badge--${e.color}` : void 0, t = e.size !== "default" ? `q-badge--${e.size}` : void 0;
+    const e = v, p = f, b = y(), a = r(() => !!b.onClick), _ = r(() => {
+      const o = i.value ? `q-badge--${e.color}` : void 0, t = e.size !== "default" ? `q-badge--${e.size}` : void 0;
       return [
         "q-badge",
         `q-badge--${e.variant}`,
@@ -31,48 +34,44 @@ const U = ["id", "role", "tabindex", "onKeydown"], D = { class: "q-badge__conten
         },
         e.class
       ];
-    }), { isUtilityColor: n, style: l } = R(d(e, "color"), d(e, "variant")), C = r(() => {
-      var o, t, s, i;
-      if (!n.value)
+    }), { isUtilityColor: i, style: l } = P(h(e, "color")), C = r(() => {
+      var o, t, s, c;
+      if (!i.value)
         return {
-          "--q-badge-color": (o = l.value) == null ? void 0 : o.backgroundColor,
-          "--q-badge-text-color": (t = l.value) == null ? void 0 : t.color,
-          "--q-badge-hover-color": (s = l.value) == null ? void 0 : s.hoverBackgroundColor,
-          "--q-badge-text-hover-color": (i = l.value) == null ? void 0 : i.hoverColor
+          "--q-badge-main-color": (o = l.value) == null ? void 0 : o.mainColor,
+          "--q-badge-on-main-color": (t = l.value) == null ? void 0 : t.onMainColor,
+          "--q-badge-hover-color": (s = l.value) == null ? void 0 : s.hoverColor,
+          "--q-badge-on-hover-color": (c = l.value) == null ? void 0 : c.onHoverColor
         };
     });
-    function _(o) {
+    function g(o) {
       o.stopImmediatePropagation();
     }
     function k() {
       p("click:remove");
     }
-    return (o, t) => (c(), x("span", {
+    return (o, t) => (n(), d("span", {
       id: e.id,
-      class: z(g.value),
+      class: B(_.value),
       role: a.value ? "button" : "presentation",
-      style: B(C.value),
+      style: z(C.value),
       tabindex: a.value ? 0 : void 0,
-      onKeydown: h(w(_, ["stop", "prevent"]), ["enter"])
+      onKeydown: x(w(g, ["stop", "prevent"]), ["enter"])
     }, [
-      t[0] || (t[0] = u(
-        "div",
-        { class: "q-badge__underlay" },
-        null,
-        -1
-        /* HOISTED */
-      )),
-      u("div", D, [
-        E(o.$slots, "default"),
-        e.removable ? (c(), S(m(I), {
+      e.variant === "tonal" ? (n(), d("div", D)) : u("v-if", !0),
+      E("div", F, [
+        T(o.$slots, "default"),
+        e.removable ? (n(), N(m(I), {
           key: 0,
           class: "q-badge__remove",
+          pill: "",
           borderless: "",
           tabindex: "0",
+          color: e.color,
           "aria-label": e.texts.removeText,
           onClick: k
         }, {
-          default: N(() => [
+          default: S(() => [
             V(
               m(K),
               $(A(e.icons.remove)),
@@ -83,7 +82,7 @@ const U = ["id", "role", "tabindex", "onKeydown"], D = { class: "q-badge__conten
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["aria-label"])) : T("v-if", !0)
+        }, 8, ["color", "aria-label"])) : u("v-if", !0)
       ])
     ], 46, U));
   }

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

@@ -2,22 +2,22 @@ import { QBaseComponentProps } from '../../types/component';
 export type QBadgeVariant = 'tonal' | 'bold' | 'outlined';
 export type QBadgeSize = 'default' | 'large';
 export type QBadgeProps = QBaseComponentProps & {
+    /**
+     * Specifies the visual style of the badge.
+     */
+    variant?: QBadgeVariant;
     /**
      * The color of the badge.
      * Can be chosen from utility colors like 'success' or 'danger',
      * or specified using CSS color codes.
      */
     color?: string;
-    /**
-     * Specifies the visual style of the badge.
-     */
-    variant?: QBadgeVariant;
     /**
      * Whether the badge can be removed.
      */
     removable?: boolean;
     /**
-     * Whether to convey a pill shape to the badge.
+     * Conveys a pill shape to the badge.
      */
     pill?: boolean;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAE5D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAA;AAEzD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA;AAE5C,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG;IAC/C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,aAAa;;;;CAIM,CAAA;AAEhC,eAAO,MAAM,aAAa;;CAEQ,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QBadge/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAE5D,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAA;AAEzD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA;AAE5C,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;IAEvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA;AAGD,eAAO,MAAM,aAAa;;;;CAIM,CAAA;AAEhC,eAAO,MAAM,aAAa;;CAEQ,CAAA"}

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

@@ -14,7 +14,9 @@ declare const __VLS_component: import('vue').DefineComponent<QButtonProps, {}, {
     onClick?: ((event: Event) => any) | undefined;
 }>, {
     size: import('./types').QButtonSize;
-    bStyle: import('./types').QButtonVariant;
+    color: string;
+    variant: import('./types').QButtonVariant;
+    iconPos: import('./types').QButtonIconPosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;