@bagelink/vue 0.0.610 → 0.0.614

package/dist/components/form/inputs/Checkbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/Checkbox.vue"],"names":[],"mappings":";gBAWc,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;AAwFzC,wBAMG"}
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/Checkbox.vue"],"names":[],"mappings":";gBASc,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;gBAA3B,OAAO,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC;;AA+DzC,wBAMG"}

package/dist/components/form/inputs/TextInput.vue.d.ts

@@ -24,6 +24,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     autocomplete?: AutoFillField;
     autofocus?: boolean;
     debounceDelay?: number;
+    onFocusout?: (e: FocusEvent) => void;
 }>, {
     type: string;
     modelValue: string;
@@ -55,6 +56,7 @@ declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_T
     autocomplete?: AutoFillField;
     autofocus?: boolean;
     debounceDelay?: number;
+    onFocusout?: (e: FocusEvent) => void;
 }>, {
     type: string;
     modelValue: string;

package/dist/components/form/inputs/TextInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/TextInput.vue"],"names":[],"mappings":"AAGA,OAAO,EAEN,KAAK,aAAa,EAElB,MAAM,eAAe,CAAA;;SAqRf,MAAM;YACH,MAAM;eACH,MAAM;kBACH,MAAM;iBACP,MAAM,GAAG,MAAM;YACpB,MAAM;YACN,OAAO;YACP,OAAO;eACJ,OAAO;cACR,MAAM;aACP,OAAO;eACL,OAAO;WACX,MAAM;uBACM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAC/B,aAAa;gBACR,aAAa;gBACb,OAAO;iBACN,OAAO;WACb,OAAO;YACN,MAAM;mBACC,aAAa;gBAChB,OAAO;oBACH,MAAM;;;;;;;;;SAtBjB,MAAM;YACH,MAAM;eACH,MAAM;kBACH,MAAM;iBACP,MAAM,GAAG,MAAM;YACpB,MAAM;YACN,OAAO;YACP,OAAO;eACJ,OAAO;cACR,MAAM;aACP,OAAO;eACL,OAAO;WACX,MAAM;uBACM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAC/B,aAAa;gBACR,aAAa;gBACb,OAAO;iBACN,OAAO;WACb,OAAO;YACN,MAAM;mBACC,aAAa;gBAChB,OAAO;oBACH,MAAM;;;;;;;;;UAVf,MAAM;gBARA,MAAM,GAAG,MAAM;mBAkBZ,MAAM;;AA5BxB,wBA+BG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"TextInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/TextInput.vue"],"names":[],"mappings":"AAGA,OAAO,EAEN,KAAK,aAAa,EAElB,MAAM,eAAe,CAAA;;SAyRf,MAAM;YACH,MAAM;eACH,MAAM;kBACH,MAAM;iBACP,MAAM,GAAG,MAAM;YACpB,MAAM;YACN,OAAO;YACP,OAAO;eACJ,OAAO;cACR,MAAM;aACP,OAAO;eACL,OAAO;WACX,MAAM;uBACM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAC/B,aAAa;gBACR,aAAa;gBACb,OAAO;iBACN,OAAO;WACb,OAAO;YACN,MAAM;mBACC,aAAa;gBAChB,OAAO;oBACH,MAAM;iBACT,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;;;;;;;;;SAvB/B,MAAM;YACH,MAAM;eACH,MAAM;kBACH,MAAM;iBACP,MAAM,GAAG,MAAM;YACpB,MAAM;YACN,OAAO;YACP,OAAO;eACJ,OAAO;cACR,MAAM;aACP,OAAO;eACL,OAAO;WACX,MAAM;uBACM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAC/B,aAAa;gBACR,aAAa;gBACb,OAAO;iBACN,OAAO;WACb,OAAO;YACN,MAAM;mBACC,aAAa;gBAChB,OAAO;oBACH,MAAM;iBACT,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;;;;;;;;;UAX7B,MAAM;gBARA,MAAM,GAAG,MAAM;mBAkBZ,MAAM;;AA5BxB,wBAgCG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/components/form/inputs/ToggleInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/ToggleInput.vue"],"names":[],"mappings":"AA8BA,iBAAS,cAAc;mBA2GK,GAAG;EAK9B;AAoBD,QAAA,MAAM,eAAe;gBA1IP,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;;;kBA6J4I,IAAI;;;;;;;;;;;;;;;;;;;gBA7J3L,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;;;kBA6J4I,IAAI;;;;;;;;;;;;;;;;;;;kBAPzL,OAAO;MAIrB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAUxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"ToggleInput.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/ToggleInput.vue"],"names":[],"mappings":"AA8BA,iBAAS,cAAc;mBAsGK,GAAG;EAK9B;AAoBD,QAAA,MAAM,eAAe;gBArIP,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;;;kBAwJ4I,IAAI;;;;;;;;;;;;;;;;;;;gBAxJ3L,OAAO,KAAK,EAAE,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAC;;;kBAwJ4I,IAAI;;;;;;;;;;;;;;;;;;;kBAPzL,OAAO;MAIrB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAUxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/index.cjs

@@ -5823,8 +5823,8 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     async function runSubmit() {
       var _a2, _b, _c, _d;
       if (submitting.value) return;
-      submitting.value = true;
       if (((_b = (_a2 = form.value) == null ? void 0 : _a2.validateForm) == null ? void 0 : _b.call(_a2)) === false) return;
+      submitting.value = true;
       try {
         await ((_c = props2.onSubmit) == null ? void 0 : _c.call(props2, formData.value));
         closeModal();
@@ -5897,7 +5897,7 @@ const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-b0a25141"]]);
+const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-083a1b2d"]]);
 const _hoisted_1$G = { class: "accordion-item" };
 const _hoisted_2$x = ["aria-expanded", "aria-controls"];
 const _hoisted_3$l = { class: "accordion-label" };
@@ -6729,7 +6729,7 @@ const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-0ffde6c7"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-d3655508"]]);
 const _hoisted_1$z = {
   key: 0,
   class: "card_label"
@@ -17122,7 +17122,7 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-e8fcfd5e"]]);
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-6bc5ed15"]]);
 function toDate(argument) {
   const argStr = Object.prototype.toString.call(argument);
   if (argument instanceof Date || typeof argument === "object" && argStr === "[object Date]") {
@@ -28574,7 +28574,8 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     lines: {},
     autocomplete: {},
     autofocus: { type: Boolean },
-    debounceDelay: { default: 300 }
+    debounceDelay: { default: 300 },
+    onFocusout: {}
   },
   emits: ["update:modelValue", "debounce"],
   setup(__props, { emit: __emit }) {
@@ -28636,14 +28637,18 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
             disabled: _ctx.disabled,
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs, { onInput: updateInputVal }), null, 16, _hoisted_3$d)), [
+          }, _ctx.nativeInputAttrs, {
+            onFocusout: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => _ctx.onFocusout && _ctx.onFocusout(...args)),
+            onInput: updateInputVal
+          }), null, 16, _hoisted_3$d)), [
             [vue.vModelDynamic, vue.unref(inputVal)]
           ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", vue.mergeProps({
             key: 1,
             id: _ctx.id,
             ref_key: "input",
             ref: input,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
             title: _ctx.title,
             type: _ctx.type,
             rows: rows.value,
@@ -28669,7 +28674,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-b024d618"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-5e9a753f"]]);
 const _hoisted_1$n = { class: "primary-checkbox" };
 const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
@@ -28690,15 +28695,12 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
           type: "checkbox"
         }, null, 512), [
           [vue.vModelCheckbox, val.value]
-        ]),
-        vue.createElementVNode("span", null, [
-          vue.createVNode(vue.unref(_sfc_main$O), { icon: "check" })
         ])
       ]);
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-2f03e6ec"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-0878583e"]]);
 const _hoisted_1$m = ["title"];
 const _hoisted_2$h = ["id", "placeholder", "required"];
 const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
@@ -29143,7 +29145,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const $el = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-6716fd45"]]);
-const _withScopeId$1 = (n2) => (vue.pushScopeId("data-v-eceeebfb"), n2 = n2(), vue.popScopeId(), n2);
+const _withScopeId$1 = (n2) => (vue.pushScopeId("data-v-06b95183"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$i = ["title"];
 const _hoisted_2$d = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));
 const _hoisted_3$9 = [
@@ -29174,9 +29176,8 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["bagel-input bgl-checkbox justify-content-center gap-1", { small: _ctx.small }]),
-        title: _ctx.title,
-        onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => checked.value = !checked.value, ["prevent"]))
+        class: vue.normalizeClass(["bagel-input bgl-toggle", { small: _ctx.small }]),
+        title: _ctx.title
       }, [
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["switch", { checked: checked.value }])
@@ -29198,7 +29199,7 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-eceeebfb"]]);
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-06b95183"]]);
 function OrderedMap(content) {
   this.content = content;
 }

package/dist/index.mjs

@@ -5821,8 +5821,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     async function runSubmit() {
       var _a2, _b, _c, _d;
       if (submitting.value) return;
-      submitting.value = true;
       if (((_b = (_a2 = form.value) == null ? void 0 : _a2.validateForm) == null ? void 0 : _b.call(_a2)) === false) return;
+      submitting.value = true;
       try {
         await ((_c = props2.onSubmit) == null ? void 0 : _c.call(props2, formData.value));
         closeModal();
@@ -5895,7 +5895,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-b0a25141"]]);
+const ModalForm = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-083a1b2d"]]);
 const _hoisted_1$G = { class: "accordion-item" };
 const _hoisted_2$x = ["aria-expanded", "aria-controls"];
 const _hoisted_3$l = { class: "accordion-label" };
@@ -6727,7 +6727,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-0ffde6c7"]]);
+const DataPreview = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-d3655508"]]);
 const _hoisted_1$z = {
   key: 0,
   class: "card_label"
@@ -17120,7 +17120,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-e8fcfd5e"]]);
+const CheckInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-6bc5ed15"]]);
 function toDate(argument) {
   const argStr = Object.prototype.toString.call(argument);
   if (argument instanceof Date || typeof argument === "object" && argStr === "[object Date]") {
@@ -28572,7 +28572,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     lines: {},
     autocomplete: {},
     autofocus: { type: Boolean },
-    debounceDelay: { default: 300 }
+    debounceDelay: { default: 300 },
+    onFocusout: {}
   },
   emits: ["update:modelValue", "debounce"],
   setup(__props, { emit: __emit }) {
@@ -28634,14 +28635,18 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             disabled: _ctx.disabled,
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs, { onInput: updateInputVal }), null, 16, _hoisted_3$d)), [
+          }, _ctx.nativeInputAttrs, {
+            onFocusout: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => _ctx.onFocusout && _ctx.onFocusout(...args)),
+            onInput: updateInputVal
+          }), null, 16, _hoisted_3$d)), [
             [vModelDynamic, unref(inputVal)]
           ]) : withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
             key: 1,
             id: _ctx.id,
             ref_key: "input",
             ref: input,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(inputVal) ? inputVal.value = $event : inputVal = $event),
             title: _ctx.title,
             type: _ctx.type,
             rows: rows.value,
@@ -28667,7 +28672,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-b024d618"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-5e9a753f"]]);
 const _hoisted_1$n = { class: "primary-checkbox" };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
@@ -28688,15 +28693,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           type: "checkbox"
         }, null, 512), [
           [vModelCheckbox, val.value]
-        ]),
-        createElementVNode("span", null, [
-          createVNode(unref(_sfc_main$O), { icon: "check" })
         ])
       ]);
     };
   }
 });
-const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-2f03e6ec"]]);
+const Checkbox = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-0878583e"]]);
 const _hoisted_1$m = ["title"];
 const _hoisted_2$h = ["id", "placeholder", "required"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
@@ -29141,7 +29143,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 const $el = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-6716fd45"]]);
-const _withScopeId$1 = (n2) => (pushScopeId("data-v-eceeebfb"), n2 = n2(), popScopeId(), n2);
+const _withScopeId$1 = (n2) => (pushScopeId("data-v-06b95183"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$i = ["title"];
 const _hoisted_2$d = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "slider round" }, null, -1));
 const _hoisted_3$9 = [
@@ -29172,9 +29174,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["bagel-input bgl-checkbox justify-content-center gap-1", { small: _ctx.small }]),
-        title: _ctx.title,
-        onClick: _cache[1] || (_cache[1] = withModifiers(($event) => checked.value = !checked.value, ["prevent"]))
+        class: normalizeClass(["bagel-input bgl-toggle", { small: _ctx.small }]),
+        title: _ctx.title
       }, [
         createElementVNode("div", {
           class: normalizeClass(["switch", { checked: checked.value }])
@@ -29196,7 +29197,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-eceeebfb"]]);
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-06b95183"]]);
 function OrderedMap(content) {
   this.content = content;
 }

package/dist/style.css

@@ -531,11 +531,11 @@ a[data-v-59ea4a90] {
 	border-radius: var(--card-border-radius);
 }
 
-.modal-title[data-v-b0a25141] {
+.modal-title[data-v-083a1b2d] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-b0a25141] {
+.modal-title[data-v-083a1b2d] {
 		margin-top: 1rem;
 }
 }
@@ -859,25 +859,25 @@ tbody tr[data-v-d01cb754]:hover {
 	background: var(--bgl-gray-light);
 }
 
-data[data-v-0ffde6c7] {
+data[data-v-d3655508] {
 	font-size: var(--input-font-size);
 	border: 1.1px solid var(--border-color);
 	padding: 20px;
 	border-radius: var(--input-border-radius);
 }
-.data-row[data-v-0ffde6c7] {
+.data-row[data-v-d3655508] {
 	display: flex;
 	justify-content: space-between;
 	border-bottom: 1px solid var(--border-color);
 	align-items: center;
 	min-height: 50px;
 }
-.data-row .bagel-input.shrink[data-v-0ffde6c7],
-.data-row .bagel-input.shrink input[data-v-0ffde6c7] {
+.data-row .bagel-input.shrink[data-v-d3655508],
+.data-row .bagel-input.shrink input[data-v-d3655508] {
 	min-width: 140px !important;
 	/* margin-top: -0.45rem !important; */
 }
-.data-link[data-v-0ffde6c7] {
+.data-link[data-v-d3655508] {
 	display: block;
 	font-size: var(--input-font-size);
 	margin-bottom: 2px;
@@ -885,7 +885,7 @@ data[data-v-0ffde6c7] {
 	color: var(--input-color);
 }
 @media screen and (max-width: 910px) {
-.data-row[data-v-0ffde6c7] {
+.data-row[data-v-d3655508] {
 		display: block;
 		/* min-height: 80px; */
 		padding-bottom: 1rem;
@@ -895,9 +895,11 @@ data[data-v-0ffde6c7] {
 .data-row .bagel-input,
 .data-row .bagel-input input {
 	min-width: 140px !important;
-	/* margin-top: 0.5rem !important; */
 	height: calc(var(--input-height) - 0.25rem) !important;
 }
+.data-row .bagel-input.bgl-toggle input {
+	height:20px !important;
+}
 
 .card_label {
 	font-size: 1rem;
@@ -1868,17 +1870,20 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	transform: translateY(-2.6rem);
 }
 
-.bgl-checkbox[data-v-e8fcfd5e] {
+.bgl-checkbox[data-v-6bc5ed15] {
 	flex-direction: row;
 	cursor: pointer;
 }
-.bgl-checkbox input[type='checkbox'][data-v-e8fcfd5e] {
+.bgl-checkbox input[type='checkbox'][data-v-6bc5ed15] {
 	accent-color: var(--bgl-primary);
 	height: calc(var(--input-height) / 2.75);
 	width: calc(var(--input-height) / 2.75);
 	min-width: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
-.bgl-checkbox input[type='checkbox'][data-v-e8fcfd5e]::before {
+.bgl-checkbox input[type='checkbox'][data-v-6bc5ed15]::before {
 	content: '';
 	height: calc(var(--input-height) / 2.75);
 	width: calc(var(--input-height) / 2.75);
@@ -1888,23 +1893,23 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	transition: all 200ms ease;
 	position: absolute;
 }
-.bgl-checkbox input[type='checkbox'][data-v-e8fcfd5e]:hover::before {
+.bgl-checkbox input[type='checkbox'][data-v-6bc5ed15]:hover::before {
 	opacity: 0.2;
 	transform: scale(2);
 }
-.bgl-checkbox label[data-v-e8fcfd5e] {
+.bgl-checkbox label[data-v-6bc5ed15] {
 	cursor: pointer;
 	user-select: none;
 	font-size: var(--input-font-size);
 	transition: var(--bgl-transition-400);
 }
-.bgl-checkbox:hover label[data-v-e8fcfd5e] {
+.bgl-checkbox:hover label[data-v-6bc5ed15] {
   color: var(--bgl-primary) !important;
 }
-.bgl-checkbox input:checked + label[data-v-e8fcfd5e]{
+.bgl-checkbox input:checked + label[data-v-6bc5ed15]{
 	color: var(--bgl-primary) !important;
 }
-.bagel-input:focus-within.bgl-checkbox:not(:checked) label[data-v-e8fcfd5e] {
+.bagel-input:focus-within.bgl-checkbox:not(:checked) label[data-v-6bc5ed15] {
     color: var(--label-color) !important;
 }
 .dp__input_wrap{position:relative;width:100%;box-sizing:unset}.dp__input_wrap:focus{border-color:var(--dp-border-color-hover);outline:none}.dp__input_valid{box-shadow:0 0 var(--dp-border-radius) var(--dp-success-color);border-color:var(--dp-success-color)}.dp__input_valid:hover{border-color:var(--dp-success-color)}.dp__input_invalid{box-shadow:0 0 var(--dp-border-radius) var(--dp-danger-color);border-color:var(--dp-danger-color)}.dp__input_invalid:hover{border-color:var(--dp-danger-color)}.dp__input{background-color:var(--dp-background-color);border-radius:var(--dp-border-radius);font-family:var(--dp-font-family);border:1px solid var(--dp-border-color);outline:none;transition:border-color .2s cubic-bezier(0.645, 0.045, 0.355, 1);width:100%;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:var(--dp-input-padding);color:var(--dp-text-color);box-sizing:border-box}.dp__input::placeholder{opacity:.7}.dp__input:hover:not(.dp__input_focus){border-color:var(--dp-border-color-hover)}.dp__input_reg{caret-color:rgba(0,0,0,0)}.dp__input_focus{border-color:var(--dp-border-color-focus)}.dp__disabled{background:var(--dp-disabled-color)}.dp__disabled::placeholder{color:var(--dp-disabled-color-text)}.dp__input_icons{display:inline-block;width:var(--dp-font-size);height:var(--dp-font-size);stroke-width:0;font-size:var(--dp-font-size);line-height:calc(var(--dp-font-size)*1.5);padding:6px 12px;color:var(--dp-icon-color);box-sizing:content-box}.dp__input_icon{cursor:pointer;position:absolute;top:50%;inset-inline-start:0;transform:translateY(-50%);color:var(--dp-icon-color)}.dp__clear_icon{position:absolute;top:50%;inset-inline-end:0;transform:translateY(-50%);cursor:pointer;color:var(--dp-icon-color)}.dp__input_icon_pad{padding-inline-start:var(--dp-input-icon-padding)}.dp__menu{background:var(--dp-background-color);border-radius:var(--dp-border-radius);min-width:var(--dp-menu-min-width);font-family:var(--dp-font-family);font-size:var(--dp-font-size);user-select:none;border:1px solid var(--dp-menu-border-color);box-sizing:border-box}.dp__menu::after{box-sizing:border-box}.dp__menu::before{box-sizing:border-box}.dp__menu:focus{border:1px solid var(--dp-menu-border-color);outline:none}.dp--menu-wrapper{position:absolute;z-index:99999}.dp__menu_inner{padding:var(--dp-menu-padding)}.dp--menu--inner-stretched{padding:6px 0}.dp__menu_index{z-index:99999}.dp-menu-loading,.dp__menu_readonly,.dp__menu_disabled{position:absolute;inset:0;z-index:999999}.dp__menu_disabled{background:rgba(255,255,255,.5);cursor:not-allowed}.dp__menu_readonly{background:rgba(0,0,0,0);cursor:default}.dp-menu-loading{background:rgba(255,255,255,.5);cursor:default}.dp--menu-load-container{display:flex;height:100%;width:100%;justify-content:center;align-items:center}.dp--menu-loader{width:48px;height:48px;border:var(--dp-loader);border-bottom-color:rgba(0,0,0,0);border-radius:50%;display:inline-block;box-sizing:border-box;animation:dp-load-rotation 1s linear infinite;position:absolute}@keyframes dp-load-rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.dp__arrow_top{left:var(--dp-arrow-left);top:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-top:1px solid var(--dp-menu-border-color);transform:translate(-50%, -50%) rotate(-45deg)}.dp__arrow_bottom{left:var(--dp-arrow-left);bottom:0;height:12px;width:12px;background-color:var(--dp-background-color);position:absolute;border-inline-end:1px solid var(--dp-menu-border-color);border-bottom:1px solid var(--dp-menu-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__action_extra{text-align:center;padding:2px 0}.dp--preset-dates{padding:5px;border-inline-end:1px solid var(--dp-border-color)}@media only screen and (width <= 600px){.dp--preset-dates{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}}.dp--preset-dates-collapsed{display:flex;align-self:center;border:none;overflow-x:auto;max-width:calc(var(--dp-menu-width) - var(--dp-action-row-padding)*2)}.dp__sidebar_left{padding:5px;border-inline-end:1px solid var(--dp-border-color)}.dp__sidebar_right{padding:5px;margin-inline-end:1px solid var(--dp-border-color)}.dp--preset-range{display:block;width:100%;padding:5px;text-align:left;white-space:nowrap;color:var(--dp-text-color);border-radius:var(--dp-border-radius);transition:var(--dp-common-transition)}.dp--preset-range:hover{background-color:var(--dp-hover-color);color:var(--dp-hover-text-color);cursor:pointer}@media only screen and (width <= 600px){.dp--preset-range{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range:first-child{margin-left:0}.dp--preset-range:last-child{margin-right:0}}.dp--preset-range-collapsed{border:1px solid var(--dp-border-color);margin:0 3px}.dp--preset-range-collapsed:first-child{margin-left:0}.dp--preset-range-collapsed:last-child{margin-right:0}.dp__menu_content_wrapper{display:flex}@media only screen and (width <= 600px){.dp__menu_content_wrapper{flex-direction:column-reverse}}.dp--menu-content-wrapper-collapsed{flex-direction:column-reverse}.dp__calendar_header{position:relative;display:flex;justify-content:center;align-items:center;color:var(--dp-text-color);white-space:nowrap;font-weight:bold}.dp__calendar_header_item{text-align:center;flex-grow:1;height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);box-sizing:border-box}.dp__calendar_row{display:flex;justify-content:center;align-items:center;margin:var(--dp-row-margin)}.dp__calendar_item{text-align:center;flex-grow:1;box-sizing:border-box;color:var(--dp-text-color)}.dp__calendar{position:relative}.dp__calendar_header_cell{border-bottom:thin solid var(--dp-border-color);padding:var(--dp-calendar-header-cell-padding)}.dp__cell_inner{display:flex;align-items:center;text-align:center;justify-content:center;border-radius:var(--dp-cell-border-radius);height:var(--dp-cell-size);padding:var(--dp-cell-padding);width:var(--dp-cell-size);border:1px solid rgba(0,0,0,0);box-sizing:border-box;position:relative}.dp__cell_inner:hover{transition:all .2s}.dp__cell_auto_range_start,.dp__date_hover_start:hover,.dp__range_start{border-end-end-radius:0;border-start-end-radius:0}.dp__cell_auto_range_end,.dp__date_hover_end:hover,.dp__range_end{border-end-start-radius:0;border-start-start-radius:0}.dp__range_end,.dp__range_start,.dp__active_date{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__date_hover_end:hover,.dp__date_hover_start:hover,.dp__date_hover:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__cell_offset{color:var(--dp-secondary-color)}.dp__cell_disabled{color:var(--dp-secondary-color);cursor:not-allowed}.dp__range_between{background:var(--dp-range-between-dates-background-color);color:var(--dp-range-between-dates-text-color);border-radius:0;border:1px solid var(--dp-range-between-border-color)}.dp__range_between_week{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border-radius:0;border-top:1px solid var(--dp-primary-color);border-bottom:1px solid var(--dp-primary-color)}.dp__today{border:1px solid var(--dp-primary-color)}.dp__week_num{color:var(--dp-secondary-color);text-align:center}.dp__cell_auto_range{border-radius:0;border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_start{border-start-start-radius:var(--dp-cell-border-radius);border-end-start-radius:var(--dp-cell-border-radius);border-inline-start:1px dashed var(--dp-primary-color);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color)}.dp__cell_auto_range_end{border-start-end-radius:var(--dp-cell-border-radius);border-end-end-radius:var(--dp-cell-border-radius);border-top:1px dashed var(--dp-primary-color);border-bottom:1px dashed var(--dp-primary-color);border-inline-end:1px dashed var(--dp-primary-color)}.dp__calendar_header_separator{width:100%;height:1px;background:var(--dp-border-color)}.dp__calendar_next{margin-inline-start:var(--dp-multi-calendars-spacing)}.dp__marker_line,.dp__marker_dot{height:5px;background-color:var(--dp-marker-color);position:absolute;bottom:0}.dp__marker_dot{width:5px;border-radius:50%;left:50%;transform:translateX(-50%)}.dp__marker_line{width:100%;left:0}.dp__marker_tooltip{position:absolute;border-radius:var(--dp-border-radius);background-color:var(--dp-tooltip-color);padding:5px;border:1px solid var(--dp-border-color);z-index:99999;box-sizing:border-box;cursor:default}.dp__tooltip_content{white-space:nowrap}.dp__tooltip_text{display:flex;align-items:center;flex-flow:row nowrap;color:var(--dp-text-color)}.dp__tooltip_mark{height:5px;width:5px;border-radius:50%;background-color:var(--dp-text-color);color:var(--dp-text-color);margin-inline-end:5px}.dp__arrow_bottom_tp{bottom:0;height:8px;width:8px;background-color:var(--dp-tooltip-color);position:absolute;border-inline-end:1px solid var(--dp-border-color);border-bottom:1px solid var(--dp-border-color);transform:translate(-50%, 50%) rotate(45deg)}.dp__instance_calendar{position:relative;width:100%}@media only screen and (width <= 600px){.dp__flex_display{flex-direction:column}}.dp--flex-display-collapsed{flex-direction:column}.dp__cell_highlight{background-color:var(--dp-highlight-color)}.dp__month_year_row{display:flex;align-items:center;height:var(--dp-month-year-row-height);color:var(--dp-text-color);box-sizing:border-box}.dp__inner_nav{display:flex;align-items:center;justify-content:center;cursor:pointer;height:var(--dp-month-year-row-button-size);width:var(--dp-month-year-row-button-size);color:var(--dp-icon-color);text-align:center;border-radius:50%}.dp__inner_nav svg{height:var(--dp-button-icon-height);width:var(--dp-button-icon-height)}.dp__inner_nav:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}[dir=rtl] .dp__inner_nav{transform:rotate(180deg)}.dp__inner_nav_disabled:hover,.dp__inner_nav_disabled{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp--year-select,.dp__month_year_select{text-align:center;cursor:pointer;height:var(--dp-month-year-row-height);display:flex;align-items:center;justify-content:center;border-radius:var(--dp-border-radius);box-sizing:border-box;color:var(--dp-text-color)}.dp--year-select:hover,.dp__month_year_select:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__month_year_select{width:50%}.dp--year-select{width:100%}.dp__month_year_wrap{display:flex;flex-direction:row;width:100%}.dp__year_disable_select{justify-content:space-around}.dp--header-wrap{display:flex;width:100%;flex-direction:column}.dp__overlay{width:100%;background:var(--dp-background-color);transition:opacity 1s ease-out;z-index:99999;font-family:var(--dp-font-family);color:var(--dp-text-color);box-sizing:border-box}.dp--overlay-absolute{position:absolute;height:100%;top:0;left:0}.dp--overlay-relative{position:relative}.dp__overlay_container::-webkit-scrollbar-track{box-shadow:var(--dp-scroll-bar-background);background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar{width:5px;background-color:var(--dp-scroll-bar-background)}.dp__overlay_container::-webkit-scrollbar-thumb{background-color:var(--dp-scroll-bar-color);border-radius:10px}.dp__overlay:focus{border:none;outline:none}.dp__container_flex{display:flex}.dp__container_block{display:block}.dp__overlay_container{flex-direction:column;overflow-y:auto;height:var(--dp-overlay-height)}.dp__time_picker_overlay_container{height:100%}.dp__overlay_row{padding:0;box-sizing:border-box;display:flex;margin-inline:auto auto;flex-wrap:wrap;max-width:100%;width:100%;align-items:center}.dp__flex_row{flex:1}.dp__overlay_col{box-sizing:border-box;width:33%;padding:var(--dp-overlay-col-padding);white-space:nowrap}.dp__overlay_cell_pad{padding:var(--dp-common-padding) 0}.dp__overlay_cell_active{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center;background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__overlay_cell{cursor:pointer;border-radius:var(--dp-border-radius);text-align:center}.dp__overlay_cell:hover{background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp__cell_in_between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__over_action_scroll{right:5px;box-sizing:border-box}.dp__overlay_cell_disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp__overlay_cell_disabled:hover{background:var(--dp-disabled-color)}.dp__overlay_cell_active_disabled{cursor:not-allowed;background:var(--dp-primary-disabled-color)}.dp__overlay_cell_active_disabled:hover{background:var(--dp-primary-disabled-color)}.dp__btn,.dp--qr-btn,.dp--time-invalid,.dp--time-overlay-btn{border:none;font:inherit;transition:var(--dp-common-transition);line-height:normal}.dp--year-mode-picker{display:flex;width:100%;align-items:center;justify-content:space-between;height:var(--dp-cell-size)}.dp--tp-wrap{max-width:var(--dp-menu-min-width)}.dp__time_input{width:100%;display:flex;align-items:center;justify-content:center;user-select:none;font-family:var(--dp-font-family);color:var(--dp-text-color)}.dp__time_col_reg_block{padding:0 20px}.dp__time_col_reg_inline{padding:0 10px}.dp__time_col_reg_with_button{padding:0 15px}.dp__time_col_sec{padding:0 10px}.dp__time_col_sec_with_button{padding:0 5px}.dp__time_col{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column}.dp__time_col_block{font-size:var(--dp-time-font-size)}.dp__time_display_block{padding:0 3px}.dp__time_display_inline{padding:5px}.dp__time_picker_inline_container{display:flex;width:100%;justify-content:center}.dp__inc_dec_button{padding:5px;margin:0;height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;color:var(--dp-icon-color);box-sizing:border-box}.dp__inc_dec_button svg{height:var(--dp-time-inc-dec-button-size);width:var(--dp-time-inc-dec-button-size)}.dp__inc_dec_button:hover{background:var(--dp-hover-color);color:var(--dp-primary-color)}.dp__time_display{cursor:pointer;color:var(--dp-text-color);border-radius:var(--dp-border-radius);display:flex;align-items:center;justify-content:center}.dp__time_display:hover:enabled{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__inc_dec_button_inline{width:100%;padding:0;height:8px;cursor:pointer;display:flex;align-items:center}.dp__inc_dec_button_disabled,.dp__inc_dec_button_disabled:hover{background:var(--dp-disabled-color);color:var(--dp-disabled-color-text);cursor:not-allowed}.dp__pm_am_button{background:var(--dp-primary-color);color:var(--dp-primary-text-color);border:none;padding:var(--dp-common-padding);border-radius:var(--dp-border-radius);cursor:pointer}.dp__tp_inline_btn_bar{width:100%;height:4px;background-color:var(--dp-secondary-color);transition:var(--dp-common-transition);border-collapse:collapse}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_top:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_r{background-color:var(--dp-primary-color);transform:rotate(-12deg) scale(1.15) translateY(-2px)}.dp__tp_inline_btn_bottom:hover .dp__tp_btn_in_l{background-color:var(--dp-primary-color);transform:rotate(12deg) scale(1.15) translateY(-2px)}.dp--time-overlay-btn{background:none}.dp--time-invalid{background-color:var(--dp-disabled-color)}.dp__action_row{display:flex;align-items:center;width:100%;padding:var(--dp-action-row-padding);box-sizing:border-box;color:var(--dp-text-color);flex-flow:row nowrap}.dp__action_row svg{height:var(--dp-button-icon-height);width:auto}.dp__selection_preview{display:block;color:var(--dp-text-color);font-size:var(--dp-preview-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dp__action_buttons{display:flex;flex:0;white-space:nowrap;align-items:center;justify-content:flex-end;margin-inline-start:auto}.dp__action_button{display:inline-flex;align-items:center;background:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);padding:var(--dp-action-buttons-padding);line-height:var(--dp-action-button-height);margin-inline-start:3px;height:var(--dp-action-button-height);cursor:pointer;border-radius:var(--dp-border-radius);font-size:var(--dp-preview-font-size);font-family:var(--dp-font-family)}.dp__action_cancel{color:var(--dp-text-color);border:1px solid var(--dp-border-color)}.dp__action_cancel:hover{border-color:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp__action_buttons .dp__action_select:hover{background:var(--dp-primary-color);transition:var(--dp-action-row-transtion)}.dp__action_buttons .dp__action_select:disabled{background:var(--dp-primary-disabled-color);cursor:not-allowed}.dp-quarter-picker-wrap{display:flex;flex-direction:column;height:100%;min-width:var(--dp-menu-min-width)}.dp--qr-btn-disabled{cursor:not-allowed;background:var(--dp-disabled-color)}.dp--qr-btn-disabled:hover{background:var(--dp-disabled-color)}.dp--qr-btn{width:100%;padding:var(--dp-common-padding)}.dp--qr-btn:not(.dp--highlighted,.dp--qr-btn-active,.dp--qr-btn-disabled,.dp--qr-btn-between){background:none}.dp--qr-btn:hover:not(.dp--qr-btn-active,.dp--qr-btn-disabled){background:var(--dp-hover-color);color:var(--dp-hover-text-color);transition:var(--dp-common-transition)}.dp--quarter-items{display:flex;flex-direction:column;flex:1;width:100%;height:100%;justify-content:space-evenly}.dp--qr-btn-active{background:var(--dp-primary-color);color:var(--dp-primary-text-color)}.dp--qr-btn-between{background:var(--dp-hover-color);color:var(--dp-hover-text-color)}.dp__btn,.dp--time-overlay-btn,.dp--time-invalid,.dp--qr-btn{border:none;font:inherit;transition:var(--dp-common-transition);line-height:normal}.dp--year-mode-picker{display:flex;width:100%;align-items:center;justify-content:space-between;height:var(--dp-cell-size)}:root{--dp-common-transition: all 0.1s ease-in;--dp-menu-padding: 6px 8px;--dp-animation-duration: 0.1s;--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);--dp-transition-timing: ease-out;--dp-action-row-transtion: all 0.2s ease-in;--dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--dp-border-radius: 4px;--dp-cell-border-radius: 4px;--dp-transition-length: 22px;--dp-transition-timing-general: 0.1s;--dp-button-height: 35px;--dp-month-year-row-height: 35px;--dp-month-year-row-button-size: 25px;--dp-button-icon-height: 20px;--dp-calendar-wrap-padding: 0 5px;--dp-cell-size: 35px;--dp-cell-padding: 5px;--dp-common-padding: 10px;--dp-input-icon-padding: 35px;--dp-input-padding: 6px 30px 6px 12px;--dp-menu-min-width: 260px;--dp-action-buttons-padding: 1px 6px;--dp-row-margin: 5px 0;--dp-calendar-header-cell-padding: 0.5rem;--dp-multi-calendars-spacing: 10px;--dp-overlay-col-padding: 3px;--dp-time-inc-dec-button-size: 32px;--dp-font-size: 1rem;--dp-preview-font-size: 0.8rem;--dp-time-font-size: 2rem;--dp-action-button-height: 22px;--dp-action-row-padding: 8px}.dp__theme_dark{--dp-background-color: #212121;--dp-text-color: #fff;--dp-hover-color: #484848;--dp-hover-text-color: #fff;--dp-hover-icon-color: #959595;--dp-primary-color: #005cb2;--dp-primary-disabled-color: #61a8ea;--dp-primary-text-color: #fff;--dp-secondary-color: #a9a9a9;--dp-border-color: #2d2d2d;--dp-menu-border-color: #2d2d2d;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #737373;--dp-disabled-color-text: #d0d0d0;--dp-scroll-bar-background: #212121;--dp-scroll-bar-color: #484848;--dp-success-color: #00701a;--dp-success-color-disabled: #428f59;--dp-icon-color: #959595;--dp-danger-color: #e53935;--dp-marker-color: #e53935;--dp-tooltip-color: #3e3e3e;--dp-highlight-color: rgb(0 92 178 / 20%);--dp-range-between-dates-background-color: var(--dp-hover-color, #484848);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #fff);--dp-range-between-border-color: var(--dp-hover-color, #fff);--dp-loader: 5px solid #005cb2}.dp__theme_light{--dp-background-color: #fff;--dp-text-color: #212121;--dp-hover-color: #f3f3f3;--dp-hover-text-color: #212121;--dp-hover-icon-color: #959595;--dp-primary-color: #1976d2;--dp-primary-disabled-color: #6bacea;--dp-primary-text-color: #f8f5f5;--dp-secondary-color: #c0c4cc;--dp-border-color: #ddd;--dp-menu-border-color: #ddd;--dp-border-color-hover: #aaaeb7;--dp-border-color-focus: #aaaeb7;--dp-disabled-color: #f6f6f6;--dp-scroll-bar-background: #f3f3f3;--dp-scroll-bar-color: #959595;--dp-success-color: #76d275;--dp-success-color-disabled: #a3d9b1;--dp-icon-color: #959595;--dp-danger-color: #ff6f60;--dp-marker-color: #ff6f60;--dp-tooltip-color: #fafafa;--dp-disabled-color-text: #8e8e8e;--dp-highlight-color: rgb(25 118 210 / 10%);--dp-range-between-dates-background-color: var(--dp-hover-color, #f3f3f3);--dp-range-between-dates-text-color: var(--dp-hover-text-color, #212121);--dp-range-between-border-color: var(--dp-hover-color, #f3f3f3);--dp-loader: 5px solid #1976d2}.dp__flex{display:flex;align-items:center}.dp__btn{background:none}.dp__main{font-family:var(--dp-font-family);user-select:none;box-sizing:border-box;position:relative;width:100%}.dp__pointer{cursor:pointer}.dp__icon{stroke:currentcolor;fill:currentcolor}.dp__button{width:100%;text-align:center;color:var(--dp-icon-color);cursor:pointer;display:flex;align-items:center;place-content:center center;padding:var(--dp-common-padding);box-sizing:border-box;height:var(--dp-button-height)}.dp__button.dp__overlay_action{position:absolute;bottom:0}.dp__button:hover{background:var(--dp-hover-color);color:var(--dp-hover-icon-color)}.dp__button svg{height:var(--dp-button-icon-height);width:auto}.dp__button_bottom{border-bottom-left-radius:var(--dp-border-radius);border-bottom-right-radius:var(--dp-border-radius)}.dp__flex_display{display:flex}.dp__flex_display_with_input{flex-direction:column;align-items:flex-start}.dp__relative{position:relative}.calendar-next-enter-active,.calendar-next-leave-active,.calendar-prev-enter-active,.calendar-prev-leave-active{transition:all var(--dp-transition-timing-general) ease-out}.calendar-next-enter-from{opacity:0;transform:translateX(var(--dp-transition-length))}.calendar-next-leave-to{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-enter-from{opacity:0;transform:translateX(calc(var(--dp-transition-length) * -1))}.calendar-prev-leave-to{opacity:0;transform:translateX(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-active,.dp-menu-appear-bottom-leave-active,.dp-menu-appear-top-enter-active,.dp-menu-appear-top-leave-active,.dp-slide-up-enter-active,.dp-slide-up-leave-active,.dp-slide-down-enter-active,.dp-slide-down-leave-active{transition:all var(--dp-animation-duration) var(--dp-transition-timing)}.dp-menu-appear-top-enter-from,.dp-menu-appear-top-leave-to,.dp-slide-down-leave-to,.dp-slide-up-enter-from{opacity:0;transform:translateY(var(--dp-transition-length))}.dp-menu-appear-bottom-enter-from,.dp-menu-appear-bottom-leave-to,.dp-slide-down-enter-from,.dp-slide-up-leave-to{opacity:0;transform:translateY(calc(var(--dp-transition-length) * -1))}.dp--arrow-btn-nav{transition:var(--dp-common-transition)}.dp--highlighted{background-color:var(--dp-highlight-color)}/*# sourceMappingURL=main.css.map */
@@ -2144,91 +2149,92 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-b024d618] {
+.bagel-input textarea[data-v-5e9a753f] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-b024d618] {
+.bagel-input.text-input textarea[data-v-5e9a753f] {
 	resize: none;
 }
-.code textarea[data-v-b024d618] {
+.code textarea[data-v-5e9a753f] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 }
-.code textarea[data-v-b024d618]::placeholder {
+.code textarea[data-v-5e9a753f]::placeholder {
 	color: var(--bgl-white) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-b024d618] {
+.bagel-input.small[data-v-5e9a753f] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-b024d618] {
+.bagel-input.dense label[data-v-5e9a753f] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-b024d618]:disabled {
+.bagel-input input[data-v-5e9a753f]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-b024d618] {
+.bagel-input label[data-v-5e9a753f] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap[data-v-b024d618] {
+.textInputIconWrap[data-v-5e9a753f] {
 	position: relative;
 }
-.textInputIconWrap .bgl_icon-font[data-v-b024d618] {
+.textInputIconWrap .bgl_icon-font[data-v-5e9a753f] {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart[data-v-b024d618] {
+.txtInputIconStart .iconStart[data-v-5e9a753f] {
 	position: absolute;
 	inset-inline-start: 0.7rem;
 	top: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart textarea[data-v-b024d618] {
+.txtInputIconStart textarea[data-v-5e9a753f] {
 	padding-inline-start: 2rem;
 }
-.bagel-input.small textarea[data-v-b024d618] {
+.bagel-input.small textarea[data-v-5e9a753f] {
 	height: 30px;
 }
 
-.primary-checkbox input[data-v-2f03e6ec] {
-  display: none;
-}
-.primary-checkbox[data-v-2f03e6ec] {
-  margin-top: 8px;
-}
-.primary-checkbox span[data-v-2f03e6ec] {
+.primary-checkbox input[data-v-0878583e] {
+  appearance: none;
+  accent-color: var(--bgl-primary);
+	height: calc(var(--input-height) / 2.75);
+	width: calc(var(--input-height) / 2.75);
+  min-width: 0;
   display: flex;
-  padding-top: 1px;
-  align-items: center;
   justify-content: center;
-  color: var(--bgl-white);
+  align-items: center;
+  cursor: pointer;
   border-radius: 100%;
-  width: 26px;
-  height: 26px;
   background: var(--bgl-white);
-  border: 4px solid var(--bgl-gray-light);
-  cursor: pointer;
+  border: 2px solid var(--input-bg);
+}
+.primary-checkbox[data-v-0878583e] {
+  height:var(--input-height);
+  width:var(--input-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
   transition: var(--bgl-transition);
-  user-select: none;
+  transform: scale(0.8);
 }
-.primary-checkbox span[data-v-2f03e6ec]:hover {
+.primary-checkbox[data-v-0878583e]:hover {
   filter: brightness(90%);
 }
-.primary-checkbox span[data-v-2f03e6ec]:active {
+.primary-checkbox[data-v-0878583e]:active {
   filter: brightness(80%);
 }
-.primary-checkbox input:checked + span[data-v-2f03e6ec] {
+.primary-checkbox input[data-v-0878583e]:checked {
   background: var(--bgl-primary);
-  border: none;
 }
 
 .datetime-wrap {
@@ -2471,57 +2477,30 @@ img.preview.single[data-v-6716fd45] {
 	color: var(--bgl-green);
 }
 
-.bgl-checkbox[data-v-eceeebfb] {
-  position: relative;
-  transition: var(--bgl-transition);
+.bagel-input.bgl-toggle[data-v-06b95183]{
+    display: unset !important;
 }
-.bgl-checkbox input[type=checkbox][data-v-eceeebfb] {
-  display: none;
+.bagel-input.bgl-toggle[data-v-06b95183] *{
+  cursor: pointer !important;
 }
-.bgl-checkbox label[data-v-eceeebfb] {
-  padding-inline-start: calc(var(--input-height) + 0.25rem);
-  transition: var(--bgl-transition);
-  cursor: pointer;
-  user-select: none;
-  line-height: var(--input-height);
-}
-.bgl-checkbox[data-v-eceeebfb]:hover {
-  filter: brightness(90%);
+.bagel-input.bgl-toggle input[data-v-06b95183]{
+    padding:  unset !important;
+    min-width:  unset !important;
 }
-.bgl-checkbox[data-v-eceeebfb]:active {
-  filter: var(--bgl-active-filter);
-}
-.switch[data-v-eceeebfb] {
-  position: absolute;
-  display: inline-block;
-  height: calc(var(--input-height) / 2);
-  width: calc(var(--input-height) - 2px);
-  border-radius: var(--input-height);
-  background: var(--bgl-gray);
-  outline: 1px solid var(--border-color);
-  margin-top: 0.15rem;
-  pointer-events: none;
-}
-.switch input[data-v-eceeebfb] {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.slider[data-v-eceeebfb] {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--input-bg);
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-  border-radius: calc(var(--input-height) / 2);
-  box-shadow: inset 0 0 10px #00000020;
-  background: var(--input-bg);
+.bgl-toggle input[data-v-06b95183] {
+    appearance: none;
+    position: relative;
+    display: inline-block;
+    background: var(--input-bg);
+    height: calc(var(--input-height) / 2);
+    width: calc(var(--input-height) - 2px);
+    vertical-align: middle;
+    border-radius: 2rem;
+    box-shadow: 0px 1px 3px #0003 inset;
+    transition: 0.25s linear all;
+    outline: 1px solid var(--border-color);
 }
-.slider[data-v-eceeebfb]:before {
+.bgl-toggle input[data-v-06b95183]::before {
   position: absolute;
   content: "";
   height: calc(var(--input-height) / 2 - 2px);
@@ -2534,12 +2513,40 @@ img.preview.single[data-v-6716fd45] {
   transition: 0.2s;
   box-shadow:0 1px 5px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
 }
-.checked .slider[data-v-eceeebfb] {
+.bgl-toggle label[data-v-06b95183] {
+  padding-inline-start: 0.5rem;
+  transition: var(--bgl-transition);
+  cursor: pointer;
+  user-select: none;
+  line-height: var(--input-height);
+  font-size: var(--input-font-size);
+}
+.bgl-toggle label[data-v-06b95183]:hover {
+  filter: brightness(90%);
+}
+.bgl-toggle label[data-v-06b95183]:active {
+  filter: var(--bgl-active-filter);
+}
+.bgl-toggle input[data-v-06b95183]:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+    outline-offset: 2px
+}
+.bgl-toggle input[data-v-06b95183]:focus {
+    outline-color: transparent;
+}
+.bgl-toggle input[data-v-06b95183]:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+    outline-offset: 2px
+}
+.bgl-toggle[data-v-06b95183] :checked{
   background: var(--bgl-primary);
 }
-.checked .slider[data-v-eceeebfb]:before {
+.bgl-toggle[data-v-06b95183] :checked::before{
   margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
 }
+.bgl-toggle input:checked + label[data-v-06b95183] {
+    color: var(--bgl-primary) !important;
+}
 
 /* Basic editor styles */
 .tiptap > * + * {
@@ -6989,13 +6996,22 @@ select {
     min-width: calc(var(--input-height) * 3);
     width: 100%;
 }
-.input.active,
+.input.active
 .bagel-input input:focus-visible,
 .bagel-input select:focus-visible,
-.bagel-input textarea:focus-visible {
-    outline: none;
+.bagel-input textarea:focus-visible,
+.bagel-input button:focus-visible,
+.bgl_btn:focus-visible {
+    outline-color: var(--bgl-primary-tint);
     box-shadow: inset 0 0 10px #00000012;
 }
+.bagel-input input:focus,
+.bagel-input select:focus,
+.bagel-input textarea:focus,
+.bagel-input .bgl_btn:focus,
+.bagel-input button:focus {
+    outline-color: rgba(0, 0, 0, 0.05);
+}
 .bagel-input.light-input input,
 .bagel-input.light-input textarea,
 .bagel-input.light-input select,
@@ -7010,7 +7026,7 @@ select {
 .bagel-input.light-input textarea:focus-visible {
     box-shadow: inset 0 0 2px var(--bgl-black) !important;
 }
-.bagel-input input[type="number"]::-webkit-inner-spin-button,
+.bagel-input input[type="number"]-webkit-inner-spin-button,
 .bagel-input input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.610",
+  "version": "0.0.614",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -53,7 +53,7 @@
   "devDependencies": {
     "@types/leaflet": "^1.9.12",
     "@types/signature_pad": "^2.3.6",
-    "@vue-macros/reactivity-transform": "^0.4.7",
+    "@vue-macros/reactivity-transform": "^1.0.0",
     "vue": "^3.4.33"
   },
   "peerDependencies": {

package/src/components/DataPreview.vue

@@ -124,7 +124,10 @@ data {
 .data-row .bagel-input,
 .data-row .bagel-input input {
 	min-width: 140px !important;
-	/* margin-top: 0.5rem !important; */
 	height: calc(var(--input-height) - 0.25rem) !important;
 }
+
+.data-row .bagel-input.bgl-toggle input {
+	height:20px !important;
+}
 </style>

package/src/components/ModalForm.vue

@@ -48,8 +48,8 @@ let submitting = $ref(false)
 
 async function runSubmit() {
 	if (submitting) return
-	submitting = true
 	if (form?.validateForm?.() === false) return
+	submitting = true
 	try {
 		await props.onSubmit?.(formData.value)
 		closeModal()

package/src/components/form/inputs/CheckInput.vue

@@ -50,6 +50,9 @@ onMounted(() => {
 	height: calc(var(--input-height) / 2.75);
 	width: calc(var(--input-height) / 2.75);
 	min-width: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 .bgl-checkbox input[type='checkbox']::before {
 	content: '';

package/src/components/form/inputs/Checkbox.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { MaterialIcon } from '@bagelink/vue'
-
 const val = defineModel('modelValue', {
 	type: Boolean,
 	default: false,
@@ -10,47 +8,44 @@ const val = defineModel('modelValue', {
 <template>
 	<label class="primary-checkbox">
 		<input v-model="val" type="checkbox">
-		<span>
-			<MaterialIcon icon="check" />
-		</span>
 	</label>
 </template>
 
 <style scoped>
 .primary-checkbox input {
-  display: none;
+  appearance: none;
+  accent-color: var(--bgl-primary);
+	height: calc(var(--input-height) / 2.75);
+	width: calc(var(--input-height) / 2.75);
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 100%;
+  background: var(--bgl-white);
+  border: 2px solid var(--input-bg);
 }
 
 .primary-checkbox {
-  margin-top: 8px;
-}
-
-.primary-checkbox span {
+  height:var(--input-height);
+  width:var(--input-height);
   display: flex;
-  padding-top: 1px;
-  align-items: center;
   justify-content: center;
-  color: var(--bgl-white);
-  border-radius: 100%;
-  width: 26px;
-  height: 26px;
-  background: var(--bgl-white);
-  border: 4px solid var(--bgl-gray-light);
-  cursor: pointer;
+  align-items: center;
   transition: var(--bgl-transition);
-  user-select: none;
+  transform: scale(0.8);
 }
 
-.primary-checkbox span:hover {
+.primary-checkbox:hover {
   filter: brightness(90%);
 }
 
-.primary-checkbox span:active {
+.primary-checkbox:active {
   filter: brightness(80%);
 }
 
-.primary-checkbox input:checked + span {
+.primary-checkbox input:checked {
   background: var(--bgl-primary);
-  border: none;
 }
 </style>

package/src/components/form/inputs/TextInput.vue

@@ -31,6 +31,7 @@ const props = withDefaults(
 		autocomplete?: AutoFillField
 		autofocus?: boolean
 		debounceDelay?: number
+		onFocusout?: (e: FocusEvent) => void
 	}>(),
 	{
 		type: 'text',
@@ -99,6 +100,7 @@ onMounted(() => {
 				:required="required"
 				:pattern="pattern"
 				v-bind="nativeInputAttrs"
+				@focusout="onFocusout"
 				@input="updateInputVal"
 			>
 			<textarea

package/src/components/form/inputs/ToggleInput.vue

@@ -21,10 +21,9 @@ onMounted(() => {
 
 <template>
 	<div
-		class="bagel-input bgl-checkbox justify-content-center gap-1"
+		class="bagel-input bgl-toggle"
 		:title
 		:class="{ small }"
-		@click.prevent="checked = !checked"
 	>
 		<div class="switch" :class="{ checked }">
 			<span class="slider round" />
@@ -46,83 +45,79 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.bgl-checkbox {
-  position: relative;
-  transition: var(--bgl-transition);
+.bagel-input.bgl-toggle{
+    display: unset !important;
+}
+.bagel-input.bgl-toggle *{
+  cursor: pointer !important;
+}
+.bagel-input.bgl-toggle input{
+    padding:  unset !important;
+    min-width:  unset !important;
 }
+.bgl-toggle input {
+    appearance: none;
+    position: relative;
+    display: inline-block;
+    background: var(--input-bg);
+    height: calc(var(--input-height) / 2);
+    width: calc(var(--input-height) - 2px);
+    vertical-align: middle;
+    border-radius: 2rem;
+    box-shadow: 0px 1px 3px #0003 inset;
+    transition: 0.25s linear all;
+    outline: 1px solid var(--border-color);
 
-.bgl-checkbox input[type=checkbox] {
-  display: none;
+}
+.bgl-toggle input::before {
+  position: absolute;
+  content: "";
+  height: calc(var(--input-height) / 2 - 2px);
+  width: calc(var(--input-height) / 2 - 2px);
+  inset-inline-start: 1px;
+  bottom: 1px;
+  border-radius: 50%;
+  background: var(--bgl-white);
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+  box-shadow:0 1px 5px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
 }
 
-.bgl-checkbox label {
-  padding-inline-start: calc(var(--input-height) + 0.25rem);
+.bgl-toggle label {
+  padding-inline-start: 0.5rem;
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
   line-height: var(--input-height);
+  font-size: var(--input-font-size);
 }
 
-.bgl-checkbox:hover {
+.bgl-toggle label:hover {
   filter: brightness(90%);
 }
 
-.bgl-checkbox:active {
+.bgl-toggle label:active {
   filter: var(--bgl-active-filter);
 }
 
-.switch {
-  position: absolute;
-  display: inline-block;
-  height: calc(var(--input-height) / 2);
-  width: calc(var(--input-height) - 2px);
-  border-radius: var(--input-height);
-  background: var(--bgl-gray);
-  outline: 1px solid var(--border-color);
-  margin-top: 0.15rem;
-  pointer-events: none;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+.bgl-toggle input:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+    outline-offset: 2px
 }
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--input-bg);
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-  border-radius: calc(var(--input-height) / 2);
-  box-shadow: inset 0 0 10px #00000020;
-  background: var(--input-bg);
+.bgl-toggle input:focus {
+    outline-color: transparent;
 }
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: calc(var(--input-height) / 2 - 2px);
-  width: calc(var(--input-height) / 2 - 2px);
-  inset-inline-start: 1px;
-  bottom: 1px;
-  border-radius: 50%;
-  background: var(--bgl-white);
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-  box-shadow:0 1px 5px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
+.bgl-toggle input:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+    outline-offset: 2px
 }
-
-.checked .slider {
+.bgl-toggle :checked{
   background: var(--bgl-primary);
 }
-
-.checked .slider:before {
+.bgl-toggle :checked::before{
   margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
 }
+.bgl-toggle input:checked + label {
+    color: var(--bgl-primary) !important;
+}
 </style>

package/src/styles/inputs.css

@@ -144,13 +144,22 @@ select {
     width: 100%;
 }
 
-.input.active,
+.input.active
 .bagel-input input:focus-visible,
 .bagel-input select:focus-visible,
-.bagel-input textarea:focus-visible {
-    outline: none;
+.bagel-input textarea:focus-visible,
+.bagel-input button:focus-visible,
+.bgl_btn:focus-visible {
+    outline-color: var(--bgl-primary-tint);
     box-shadow: inset 0 0 10px #00000012;
 }
+.bagel-input input:focus,
+.bagel-input select:focus,
+.bagel-input textarea:focus,
+.bagel-input .bgl_btn:focus,
+.bagel-input button:focus {
+    outline-color: rgba(0, 0, 0, 0.05);
+}
 
 .bagel-input.light-input input,
 .bagel-input.light-input textarea,
@@ -168,7 +177,7 @@ select {
     box-shadow: inset 0 0 2px var(--bgl-black) !important;
 }
 
-.bagel-input input[type="number"]::-webkit-inner-spin-button,
+.bagel-input input[type="number"]-webkit-inner-spin-button,
 .bagel-input input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
 }