@quidgest/ui 0.16.15 → 0.16.17

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.16.15
+ * Quidgest UI v0.16.17
  * (c) 2025 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -926,15 +926,14 @@ $transition-duration: 0.2s !default;
   --box-size: 1.15rem;
   --icon-color: var(--q-theme-on-primary);
   --icon-opacity: 0;
+  --transition-duration: 0.15s;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.5rem;
   width: fit-content;
   color: var(--q-theme-neutral-dark);
-  cursor: pointer;
   &__input {
     display: flex;
-    align-self: flex-start;
     align-items: center;
     justify-content: center;
     width: var(--box-size);
@@ -944,9 +943,9 @@ $transition-duration: 0.2s !default;
     border-radius: var(--border-radius);
     padding: 0;
     transition:
-      background 0.2s,
-      border-color 0.2s,
-      box-shadow 0.2s;
+      background var(--transition-duration),
+      border-color var(--transition-duration),
+      box-shadow var(--transition-duration);
     background-color: transparent;
     flex-shrink: 0;
     cursor: inherit;
@@ -963,16 +962,20 @@ $transition-duration: 0.2s !default;
       color: var(--icon-color);
       pointer-events: none;
       user-select: none;
-      transition: transform 0.2s ease;
+      transition: transform var(--transition-duration) ease;
       opacity: var(--icon-opacity);
     }
   }
   &__native-input {
-    transform: translateX(-100%);
     position: absolute;
-    pointer-events: none;
     opacity: 0;
-    margin: 0;
+    pointer-events: none;
+    width: 0;
+    height: 0;
+  }
+  &__label.q-label {
+    user-select: none;
+    line-height: var(--box-size);
   }
   
   &--small {
@@ -2207,7 +2210,6 @@ $base-border: 1px solid rgb(0 0 0 / 10%);
     flex-shrink: 0;
     appearance: none;
     border-width: 1px;
-    border-color: var(--q-theme-neutral);
     border-radius: 50%;
     
     &::before {
@@ -2558,6 +2560,192 @@ $spinner-color: var(--q-theme-primary);
     transform: rotate(1turn);
   }
 }
+.q-switch {
+  
+  
+  
+  --q-switch-inner-padding: 2px;
+  --q-switch-border-radius: 9999px; 
+  --q-switch-transition-duration: 0.15s;
+  --q-switch-transition-easing: ease-out;
+  
+  --q-switch-label-padding-v: 10px;
+  --q-switch-label-padding-h: 15px;
+  --q-switch-font-size: 0.75rem;
+  
+  --q-switch-shadow-color-primary: rgb(var(--q-theme-on-background-rgb) / 20%);
+  --q-switch-shadow-color-secondary: rgb(var(--q-theme-on-background-rgb) / 10%);
+  --q-switch-shadow-blur-base: 3px;
+  --q-switch-shadow-offset-y: 1px;
+  --q-switch-shadow-spread: 2px;
+  
+  --q-switch-shadow-color-primary-hover: rgb(var(--q-theme-on-background-rgb) / 30%);
+  --q-switch-shadow-color-secondary-hover: rgb(var(--q-theme-on-background-rgb) / 15%);
+  --q-switch-shadow-blur-hover: 6px;
+  --q-switch-shadow-offset-y-hover: 2px;
+  --q-switch-shadow-spread-hover: 4px;
+  
+  --q-switch-disabled-opacity: 0.5;
+  --q-switch-hover-background-opacity: 0.5;
+  
+  --q-switch-checked-background: var(--q-theme-primary);
+  --q-switch-on-checked-background: var(--q-theme-on-primary);
+  --q-switch-unchecked-background: rgb(var(--q-theme-neutral-light-rgb) / 50%);
+  --q-switch-on-unchecked-background: var(--q-theme-neutral);
+  
+  
+  
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  white-space: nowrap;
+  background: var(--q-switch-unchecked-background);
+  border-radius: var(--q-switch-border-radius);
+  padding: var(--q-switch-inner-padding);
+  transition: background var(--q-switch-transition-duration) var(--q-switch-transition-easing);
+  
+  
+  
+  &--small {
+    --q-switch-inner-padding: 1px;
+    --q-switch-label-padding-v: 8px;
+    --q-switch-label-padding-h: 12px;
+    --q-switch-font-size: 0.6875rem;
+  }
+  &--large {
+    --q-switch-inner-padding: 3px;
+    --q-switch-label-padding-v: 12px;
+    --q-switch-label-padding-h: 18px;
+    --q-switch-font-size: 0.875rem;
+  }
+  
+  
+  
+  &--disabled {
+    opacity: var(--q-switch-disabled-opacity);
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+}
+.q-switch__container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+}
+.q-switch__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  appearance: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--q-switch-border-radius);
+  z-index: 2;
+  
+  &:focus-visible {
+    outline: $outline;
+  }
+  
+  &:disabled {
+    cursor: not-allowed;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+}
+.q-switch__labels {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  position: relative;
+}
+.q-switch__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--q-switch-border-radius);
+  padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h);
+  user-select: none;
+  transition:
+    padding-left var(--q-switch-transition-duration) var(--q-switch-transition-easing),
+    padding-right var(--q-switch-transition-duration) var(--q-switch-transition-easing),
+    box-shadow var(--q-switch-transition-duration) var(--q-switch-transition-easing);
+  cursor: pointer;
+  color: var(--q-switch-on-unchecked-background);
+  background: transparent;
+  font-size: var(--q-switch-font-size);
+  line-height: 1;
+  pointer-events: none;
+  font-weight: 500;
+  flex: 1;
+  min-width: 0;
+}
+.q-switch__label--off {
+  padding-right: var(--q-switch-label-padding-v);
+}
+.q-switch__label--on {
+  padding-left: var(--q-switch-label-padding-v);
+}
+.q-switch--with-labels {
+  --q-switch-label-padding-v: 4px; 
+  .q-switch__label {
+    padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h); 
+  }
+}
+.q-switch--checked:not(.q-switch--readonly) {
+  background: var(--q-switch-checked-background);
+  .q-switch__label--off {
+    color: var(--q-switch-on-checked-background);
+  }
+}
+.q-switch__input:checked ~ .q-switch__labels .q-switch__label--on,
+.q-switch__input:not(:checked) ~ .q-switch__labels .q-switch__label--off {
+  background: var(--q-theme-background);
+  color: var(--q-theme-on-background);
+  box-shadow:
+    var(--q-switch-shadow-color-primary) 0 0 var(--q-switch-shadow-blur-base),
+    var(--q-switch-shadow-color-secondary) 0 var(--q-switch-shadow-offset-y)
+      var(--q-switch-shadow-spread);
+  padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h);
+}
+.q-switch--readonly {
+  cursor: default;
+  pointer-events: none;
+  .q-switch__input:checked ~ .q-switch__labels .q-switch__label--on,
+  .q-switch__input:not(:checked) ~ .q-switch__labels .q-switch__label--off {
+    background: var(--q-theme-neutral);
+    color: var(--q-theme-on-neutral);
+    box-shadow: none;
+  }
+}
+.q-switch:not(.q-switch--disabled) {
+  .q-switch__input:hover ~ .q-switch__labels .q-switch__label--on,
+  .q-switch__input:hover ~ .q-switch__labels .q-switch__label--off {
+    background: rgba(
+      var(--q-theme-background-rgb, 255, 255, 255),
+      var(--q-switch-hover-background-opacity)
+    );
+  }
+  .q-switch__input:checked:hover ~ .q-switch__labels .q-switch__label--on,
+  .q-switch__input:not(:checked):hover ~ .q-switch__labels .q-switch__label--off {
+    background: var(--q-theme-background);
+    box-shadow:
+      var(--q-switch-shadow-color-primary-hover) 0 0 var(--q-switch-shadow-blur-hover),
+      var(--q-switch-shadow-color-secondary-hover) 0 var(--q-switch-shadow-offset-y-hover)
+        var(--q-switch-shadow-spread-hover);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .q-switch__label {
+    transition: none;
+  }
+}
 .q-text-area {
   
   display: flex;

package/esm/components/QCheckbox/QCheckbox.d.ts

@@ -10,7 +10,9 @@ declare function __VLS_template(): {
         extras?(_: {}): any;
         extras?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        inputEl: HTMLInputElement;
+    };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -23,7 +25,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
     color: string;
     icons: typeof DEFAULT_ICONS;
     labelPlacement: import('./types').QCheckboxLabelPlacement;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputEl: HTMLInputElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1 +1 @@
-{"version":3,"file":"QCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/QCheckbox.vue"],"names":[],"mappings":"AAiDA;AAwGC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAO3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7C,KAAK,WAAW,GAAG,cAAc,CAAC;AA+CnC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAkGT,OAAO,IAA6B;;wBAZtB,GAAG;wBACF,GAAG;;;;EAgB/B;AAeD,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":"QCheckbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/QCheckbox.vue"],"names":[],"mappings":"AAyDA;AA4HC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAU3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAK7C,KAAK,WAAW,GAAG,cAAc,CAAC;AAwDnC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,WAAW,CAAC;AAKhB,iBAAS,cAAc;WAgHT,OAAO,IAA6B;;wBAbtB,GAAG;wBACF,GAAG;;;;;;EAiB/B;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;OASnB,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/QCheckbox/QCheckbox.vue.js

@@ -1,28 +1,31 @@
-import { defineComponent as x, mergeModels as v, useModel as _, computed as q, createElementBlock as g, openBlock as a, Fragment as C, createElementVNode as o, normalizeClass as B, createBlock as n, createCommentVNode as d, unref as i, createSlots as b, withCtx as m, renderSlot as h, mergeProps as k, withKeys as p, withModifiers as r } from "vue";
-import { DEFAULT_ICONS as $ } from "./constants.js";
-import { QIcon as w } from "../QIcon/index.js";
-import { QCheckboxLabel as f } from "./index.js";
-const V = ["id"], M = ["aria-checked", "disabled", "onKeydown"], P = ["checked", "disabled"], Q = /* @__PURE__ */ x({
+import { defineComponent as x, mergeModels as C, useModel as _, toRef as g, useTemplateRef as B, computed as $, watch as w, createElementBlock as E, openBlock as r, normalizeClass as V, createBlock as n, createCommentVNode as t, createElementVNode as b, unref as a, createSlots as f, withCtx as p, renderSlot as h, mergeProps as k, withKeys as y, withModifiers as d } from "vue";
+import { DEFAULT_ICONS as M } from "./constants.js";
+import { QIcon as P } from "../QIcon/index.js";
+import { QCheckboxLabel as q } from "./index.js";
+import { useId as z } from "../../composables/uid.js";
+const I = ["checked", "disabled", "required", "aria-readonly"], K = ["id", "aria-checked", "disabled", "onKeydown"], L = /* @__PURE__ */ x({
   inheritAttrs: !1,
   __name: "QCheckbox",
-  props: /* @__PURE__ */ v({
+  props: /* @__PURE__ */ C({
     id: {},
     class: {},
     label: {},
+    for: {},
+    required: { type: Boolean },
     labelPlacement: { default: "right" },
     disabled: { type: Boolean },
     readonly: { type: Boolean },
     indeterminate: { type: Boolean },
     color: { default: "primary" },
     size: { default: "regular" },
-    icons: { default: () => $ }
+    icons: { default: () => M }
   }, {
     modelValue: { type: Boolean },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
   setup(s) {
-    const e = s, l = _(s, "modelValue"), y = q(() => [
+    const e = s, l = _(s, "modelValue"), i = z(g(e, "id")), c = B("inputEl"), v = $(() => [
       "q-checkbox",
       `q-checkbox--${e.size}`,
       `q-checkbox--${e.color}`,
@@ -34,84 +37,92 @@ const V = ["id"], M = ["aria-checked", "disabled", "onKeydown"], P = ["checked",
       },
       e.class
     ]);
-    function c() {
+    function u() {
       !e.disabled && !e.readonly && (l.value = !l.value);
     }
-    return (t, u) => (a(), g(
-      C,
-      null,
+    return w(l, (o) => {
+      c.value && (c.value.checked = !!o);
+    }), (o, m) => (r(), E(
+      "div",
+      {
+        class: V(v.value)
+      },
       [
-        o("label", {
-          id: e.id,
-          class: B(y.value)
+        e.label && e.labelPlacement !== "right" ? (r(), n(a(q), {
+          key: 0,
+          for: a(i),
+          label: e.label,
+          required: e.required
+        }, f({
+          _: 2
+          /* DYNAMIC */
         }, [
-          e.labelPlacement !== "right" ? (a(), n(i(f), {
-            key: 0,
-            label: e.label
-          }, b({
-            _: 2
-            /* DYNAMIC */
-          }, [
-            t.$slots.extras ? {
-              name: "extras",
-              fn: m(() => [
-                h(t.$slots, "extras")
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["label"])) : d("v-if", !0),
-          o("button", k({
-            role: "checkbox",
-            type: "button",
-            class: "q-checkbox__input",
-            "aria-checked": e.indeterminate ? "mixed" : l.value,
-            disabled: e.disabled || e.readonly
-          }, t.$attrs, {
-            onClick: r(c, ["prevent"]),
-            onKeydown: [
-              p(r(c, ["prevent"]), ["space"]),
-              u[0] || (u[0] = p(r(() => {
-              }, ["prevent"]), ["enter"]))
-            ]
-          }), [
-            l.value || t.indeterminate ? (a(), n(
-              i(w),
-              k({ key: 0 }, l.value ? e.icons.checked : e.icons.indeterminate, { class: "q-checkbox__input-icon" }),
-              null,
-              16
-              /* FULL_PROPS */
-            )) : d("v-if", !0)
-          ], 16, M),
-          e.labelPlacement === "right" ? (a(), n(i(f), {
-            key: 1,
-            label: e.label
-          }, b({
-            _: 2
-            /* DYNAMIC */
-          }, [
-            t.$slots.extras ? {
-              name: "extras",
-              fn: m(() => [
-                h(t.$slots, "extras")
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["label"])) : d("v-if", !0)
-        ], 10, V),
-        o("input", {
+          o.$slots.extras ? {
+            name: "extras",
+            fn: p(() => [
+              h(o.$slots, "extras")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["for", "label", "required"])) : t("v-if", !0),
+        t(" Hidden native input for form submission "),
+        b("input", k({
+          ref: "inputEl",
           type: "checkbox",
-          tabindex: "-1",
-          "aria-hidden": "true",
           class: "q-checkbox__native-input",
-          checked: !!l.value,
-          disabled: e.disabled || e.readonly
-        }, null, 8, P)
+          checked: l.value,
+          disabled: e.disabled || e.readonly,
+          required: e.required,
+          "aria-readonly": e.readonly,
+          tabindex: "-1",
+          "aria-hidden": "true"
+        }, o.$attrs), null, 16, I),
+        t(" Custom interactive button "),
+        b("button", {
+          id: a(i),
+          role: "checkbox",
+          type: "button",
+          class: "q-checkbox__input",
+          "aria-checked": e.indeterminate ? "mixed" : l.value,
+          disabled: e.disabled || e.readonly,
+          onClick: d(u, ["prevent"]),
+          onKeydown: [
+            y(d(u, ["prevent"]), ["space"]),
+            m[0] || (m[0] = y(d(() => {
+            }, ["prevent"]), ["enter"]))
+          ]
+        }, [
+          l.value || o.indeterminate ? (r(), n(
+            a(P),
+            k({ key: 0 }, l.value ? e.icons.checked : e.icons.indeterminate, { class: "q-checkbox__input-icon" }),
+            null,
+            16
+            /* FULL_PROPS */
+          )) : t("v-if", !0)
+        ], 40, K),
+        e.label && e.labelPlacement === "right" ? (r(), n(a(q), {
+          key: 1,
+          for: a(i),
+          label: e.label,
+          required: e.required
+        }, f({
+          _: 2
+          /* DYNAMIC */
+        }, [
+          o.$slots.extras ? {
+            name: "extras",
+            fn: p(() => [
+              h(o.$slots, "extras")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["for", "label", "required"])) : t("v-if", !0)
       ],
-      64
-      /* STABLE_FRAGMENT */
+      2
+      /* CLASS */
     ));
   }
 });
 export {
-  Q as default
+  L as default
 };

package/esm/components/QCheckbox/QCheckboxLabel.d.ts

@@ -1,14 +1,13 @@
-import { QCheckboxLabelProps } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         extras?(_: {}): any;
     };
     refs: {};
-    rootEl: any;
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<QCheckboxLabelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QCheckboxLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<import('..').QLabelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('..').QLabelProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/esm/components/QCheckbox/QCheckboxLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QCheckboxLabel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/QCheckboxLabel.vue"],"names":[],"mappings":"AAWA;AAqBC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAOnD,iBAAS,cAAc;WAoCT,OAAO,IAA6B;;wBAVtB,GAAG;;;;EAe9B;AAQD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kTAMnB,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":"QCheckboxLabel.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/QCheckboxLabel.vue"],"names":[],"mappings":"AAeA;AAsCA,iBAAS,cAAc;WA6CT,OAAO,IAA6B;;wBAVtB,GAAG;;;;EAe9B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,uUAOnB,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"}

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

@@ -1,33 +1,41 @@
-import { defineComponent as r, createElementBlock as t, openBlock as o, createElementVNode as l, toDisplayString as n, renderSlot as c } from "vue";
-const i = { key: 0 }, p = { class: "q-field__extras" }, _ = { key: 1 }, b = /* @__PURE__ */ r({
+import { defineComponent as a, createElementBlock as o, openBlock as t, createVNode as l, createCommentVNode as c, unref as i, withCtx as n, createTextVNode as d, toDisplayString as _, renderSlot as p } from "vue";
+import { QLabel as f } from "../QLabel/index.js";
+const u = { class: "q-checkbox__label-wrapper" }, m = {
+  key: 0,
+  class: "q-field__extras"
+}, q = /* @__PURE__ */ a({
   __name: "QCheckboxLabel",
   props: {
     id: {},
     class: {},
-    label: {}
+    label: {},
+    for: {},
+    required: { type: Boolean }
   },
-  setup(a) {
-    const e = a;
-    return (s, d) => s.$slots.extras ? (o(), t("div", i, [
-      l(
-        "span",
-        null,
-        n(e.label),
-        1
-        /* TEXT */
-      ),
-      l("div", p, [
-        c(s.$slots, "extras")
-      ])
-    ])) : (o(), t(
-      "span",
-      _,
-      n(e.label),
-      1
-      /* TEXT */
-    ));
+  setup(s) {
+    const e = s;
+    return (r, b) => (t(), o("div", u, [
+      l(i(f), {
+        class: "q-checkbox__label",
+        for: e.for,
+        required: e.required
+      }, {
+        default: n(() => [
+          d(
+            _(e.label),
+            1
+            /* TEXT */
+          )
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["for", "required"]),
+      r.$slots.extras ? (t(), o("div", m, [
+        p(r.$slots, "extras")
+      ])) : c("v-if", !0)
+    ]));
   }
 });
 export {
-  b as default
+  q as default
 };

package/esm/components/QCheckbox/index.d.ts

@@ -3,6 +3,8 @@ declare const QCheckbox: {
         modelValue?: boolean;
     } & import('../../types/component').QBaseComponentProps & {
         label?: string;
+        for?: string;
+        required?: boolean;
     } & {
         labelPlacement?: import('./types').QCheckboxLabelPlacement;
         disabled?: boolean;
@@ -20,7 +22,9 @@ declare const QCheckbox: {
         color: string;
         icons: typeof import('./constants').DEFAULT_ICONS;
         labelPlacement: import('./types').QCheckboxLabelPlacement;
-    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        inputEl: HTMLInputElement;
+    }, any, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -31,6 +35,8 @@ declare const QCheckbox: {
         modelValue?: boolean;
     } & import('../../types/component').QBaseComponentProps & {
         label?: string;
+        for?: string;
+        required?: boolean;
     } & {
         labelPlacement?: import('./types').QCheckboxLabelPlacement;
         disabled?: boolean;
@@ -54,6 +60,8 @@ declare const QCheckbox: {
     modelValue?: boolean;
 } & import('../../types/component').QBaseComponentProps & {
     label?: string;
+    for?: string;
+    required?: boolean;
 } & {
     labelPlacement?: import('./types').QCheckboxLabelPlacement;
     disabled?: boolean;
@@ -78,18 +86,18 @@ declare const QCheckbox: {
     };
 });
 declare const QCheckboxLabel: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./types').QCheckboxLabelProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('..').QLabelProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('./types').QCheckboxLabelProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    }, Readonly<import('..').QLabelProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('./types').QCheckboxLabelProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+} & import('vue').ComponentOptionsBase<Readonly<import('..').QLabelProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {
         extras?(_: {}): any;
     };

package/esm/components/QCheckbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/index.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAA;AAC7C,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;EAAmC,CAAA;AAGvD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/index.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA8B,CAAA;AAC7C,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;EAAmC,CAAA;AAGvD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA"}

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

@@ -1,11 +1,6 @@
 import { DEFAULT_ICONS } from './constants';
-import { QBaseComponentProps } from '../../types/component';
-export type QCheckboxLabelProps = QBaseComponentProps & {
-    /**
-     * The text content of the checkbox.
-     */
-    label?: string;
-};
+import { QLabelProps } from '../QLabel';
+export type QCheckboxLabelProps = QLabelProps;
 export type QCheckboxLabelPlacement = 'left' | 'right';
 export type QCheckboxLabelSize = 'small' | 'regular' | 'large';
 export type QCheckboxProps = QCheckboxLabelProps & {

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAG3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAEhE,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,GAAG;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAA;AAEtD,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG;IAClD;;OAEG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAA;IAExC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAA;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QCheckbox/types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAG3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAE5C,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAA;AAE7C,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAA;AAEtD,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;AAE9D,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAAG;IAClD;;OAEG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAA;IAExC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAA;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;CAC5B,CAAA"}