@bagelink/vue 0.0.441 → 0.0.449

package/dist/components/AccordionItem.vue.d.ts

@@ -1,10 +1,16 @@
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
     label?: string | undefined;
     id?: string | undefined;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    open?: boolean | undefined;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     label?: string | undefined;
     id?: string | undefined;
-}>>>, {}, {}>, {
+    open?: boolean | undefined;
+}>>> & {
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>, {
     head?(_: {}): any;
     default?(_: {}): any;
 }>;

package/dist/components/AccordionItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/AccordionItem.vue"],"names":[],"mappings":"AA2BA;;;;;;;;;;;AA2MA,wBAAwG;AACxG,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,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"AccordionItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/AccordionItem.vue"],"names":[],"mappings":"AA2BA;;;;;;;;;;;;;;;;;AA6NA,wBAAwG;AACxG,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,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

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

@@ -197,7 +197,9 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
             uploaded?: boolean | undefined;
         }[]>;
     }): any;
-    placeholder?(_: {}): any;
+    placeholder?(_: {
+        browse: () => void;
+    }): any;
 }>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAyEA;AAGA,OAAO,EAAO,KAAK,WAAW,EAA0B,MAAM,eAAe,CAAC;AAgB9E,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmf1C,wBAAwG;AAGxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"FileUpload.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/form/inputs/FileUpload.vue"],"names":[],"mappings":"AAyEA;AAGA,OAAO,EACD,KAAK,WAAW,EACrB,MAAM,eAAe,CAAC;AAgBvB,KAAK,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+e1C,wBAAwG;AAGxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

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,EACS,KAAK,aAAa,EACjC,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAuRd,MAAM;gBARA,MAAM,GAAG,MAAM;;AAV9B,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,EACS,KAAK,aAAa,EACjC,MAAM,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyRd,MAAM;gBARA,MAAM,GAAG,MAAM;;AAV9B,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"}

package/dist/index.cjs

@@ -4908,7 +4908,15 @@ function numField(id, label, options) {
     id,
     label,
     placeholder: options == null ? void 0 : options.placeholder,
-    attrs: { type: "number" }
+    helptext: options == null ? void 0 : options.helptext,
+    attrs: {
+      type: "number",
+      nativeInputAttrs: {
+        step: options == null ? void 0 : options.step,
+        min: options == null ? void 0 : options.min,
+        max: options == null ? void 0 : options.max
+      }
+    }
   };
 }
 function frmRow(...children2) {
@@ -5568,25 +5576,38 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
-    id: {}
+    id: {},
+    open: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
     const props2 = __props;
-    let open = vue.ref(false);
+    const emit2 = __emit;
+    let openVal = vue.ref(false);
+    let isOpen = vue.computed({
+      get: () => openVal.value,
+      set: (value) => {
+        openVal.value = value;
+        emit2("update:open", value);
+      }
+    });
+    vue.onMounted(() => {
+      if (props2.open)
+        isOpen.value = true;
+    });
     const accordionState = vue.inject("accordionState");
     const id = props2.id || Math.random().toString(36).substring(7);
     vue.watch(
       () => accordionState == null ? void 0 : accordionState.openItem,
       (currentOpenId) => {
-        if (currentOpenId !== id) {
-          open.value = false;
-        }
+        if (currentOpenId !== id)
+          isOpen.value = false;
       },
       { immediate: true }
     );
     function toggle() {
-      open.value = !open.value;
-      if (open.value && (accordionState == null ? void 0 : accordionState.openItem))
+      isOpen.value = !isOpen.value;
+      if (isOpen.value && (accordionState == null ? void 0 : accordionState.openItem))
         accordionState.openItem = id;
       else if ((accordionState == null ? void 0 : accordionState.openItem) === id)
         accordionState.openItem = null;
@@ -5595,7 +5616,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
         vue.createElementVNode("button", {
           onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
-          "aria-expanded": vue.unref(open) ? "true" : "false",
+          "aria-expanded": vue.unref(isOpen) ? "true" : "false",
           class: "accordion-head",
           "aria-controls": `accordion-body-${vue.unref(id)}`
         }, [
@@ -5603,18 +5624,18 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("span", _hoisted_3$l, vue.toDisplayString(_ctx.label), 1)
           ], true),
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["accordion-icon", { open: vue.unref(open) }])
+            class: vue.normalizeClass(["accordion-icon", { open: vue.unref(isOpen) }])
           }, [
             vue.createVNode(vue.unref(_sfc_main$K), { icon: "expand_more" })
           ], 2)
         ], 8, _hoisted_2$v),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
-            vue.unref(open) ? (vue.openBlock(), vue.createElementBlock("div", {
+            vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
               class: "accordion-body",
               id: `accordion-body-${vue.unref(id)}`,
-              "aria-hidden": vue.unref(open) ? "false" : "true"
+              "aria-hidden": vue.unref(isOpen) ? "false" : "true"
             }, [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ], 8, _hoisted_4$f)) : vue.createCommentVNode("", true)
@@ -5625,7 +5646,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-402c99d7"]]);
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-c1f34c59"]]);
 const _sfc_main$E = {};
 const _hoisted_1$B = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$u = { class: "p-1" };
@@ -18450,7 +18471,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
             disabled: _ctx.disabled,
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_4$9)), [
+          }, _ctx.nativeInputAttrs, { onInput: updateInputVal }), null, 16, _hoisted_4$9)), [
             [vue.vModelText, vue.unref(inputVal)]
           ]),
           _ctx.helptext ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5$8, vue.toDisplayString(_ctx.helptext), 1)) : vue.createCommentVNode("", true)
@@ -18468,7 +18489,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-d2e87e5e"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-06fc66fe"]]);
 const _hoisted_1$k = { class: "primary-checkbox" };
 const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "Checkbox",
@@ -18701,7 +18722,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-880c5069"]]);
-const _withScopeId$2 = (n2) => (vue.pushScopeId("data-v-7efccba8"), n2 = n2(), vue.popScopeId(), n2);
+const _withScopeId$2 = (n2) => (vue.pushScopeId("data-v-52599888"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$g = { class: "bagel-input" };
 const _hoisted_2$d = {
   key: 0,
@@ -18824,9 +18845,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
       input.onchange = (e) => {
         const target = e == null ? void 0 : e.target;
         if (target == null ? void 0 : target.files) {
-          Array.from(target.files).forEach(
-            (file) => fileQueue.value.push({ name: file.name, file, progress: 0 })
-          );
+          Array.from(target.files).forEach((file) => fileQueue.value.push({ name: file.name, file, progress: 0 }));
         }
         flushQueue();
       };
@@ -18849,9 +18868,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     const drop3 = (e) => {
       preventDefault(e);
       if (e.dataTransfer) {
-        Array.from(e.dataTransfer.files).forEach(
-          (file) => fileQueue.value.push({ name: file.name, file, progress: 0 })
-        );
+        Array.from(e.dataTransfer.files).forEach((file) => fileQueue.value.push({ name: file.name, file, progress: 0 }));
       }
       isDragOver.value = false;
       flushQueue();
@@ -18935,7 +18952,10 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
               ], 64);
             }), 128))
           ], true),
-          !storageFiles.value.length && !fileQueue.value.length || _ctx.multiple ? vue.renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [
+          !storageFiles.value.length && !fileQueue.value.length || _ctx.multiple ? vue.renderSlot(_ctx.$slots, "placeholder", {
+            key: 0,
+            browse
+          }, () => [
             _hoisted_13
           ], true) : vue.createCommentVNode("", true)
         ], 34)
@@ -18943,7 +18963,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-7efccba8"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-52599888"]]);
 const _withScopeId$1 = (n2) => (vue.pushScopeId("data-v-b87221d6"), n2 = n2(), vue.popScopeId(), n2);
 const _hoisted_1$f = ["title"];
 const _hoisted_2$c = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ vue.createElementVNode("span", { class: "slider round" }, null, -1));

package/dist/index.mjs

@@ -4906,7 +4906,15 @@ function numField(id, label, options) {
     id,
     label,
     placeholder: options == null ? void 0 : options.placeholder,
-    attrs: { type: "number" }
+    helptext: options == null ? void 0 : options.helptext,
+    attrs: {
+      type: "number",
+      nativeInputAttrs: {
+        step: options == null ? void 0 : options.step,
+        min: options == null ? void 0 : options.min,
+        max: options == null ? void 0 : options.max
+      }
+    }
   };
 }
 function frmRow(...children2) {
@@ -5566,25 +5574,38 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
-    id: {}
+    id: {},
+    open: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
     const props2 = __props;
-    let open = ref(false);
+    const emit2 = __emit;
+    let openVal = ref(false);
+    let isOpen = computed({
+      get: () => openVal.value,
+      set: (value) => {
+        openVal.value = value;
+        emit2("update:open", value);
+      }
+    });
+    onMounted(() => {
+      if (props2.open)
+        isOpen.value = true;
+    });
     const accordionState = inject("accordionState");
     const id = props2.id || Math.random().toString(36).substring(7);
     watch(
       () => accordionState == null ? void 0 : accordionState.openItem,
       (currentOpenId) => {
-        if (currentOpenId !== id) {
-          open.value = false;
-        }
+        if (currentOpenId !== id)
+          isOpen.value = false;
       },
       { immediate: true }
     );
     function toggle() {
-      open.value = !open.value;
-      if (open.value && (accordionState == null ? void 0 : accordionState.openItem))
+      isOpen.value = !isOpen.value;
+      if (isOpen.value && (accordionState == null ? void 0 : accordionState.openItem))
         accordionState.openItem = id;
       else if ((accordionState == null ? void 0 : accordionState.openItem) === id)
         accordionState.openItem = null;
@@ -5593,7 +5614,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$C, [
         createElementVNode("button", {
           onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
-          "aria-expanded": unref(open) ? "true" : "false",
+          "aria-expanded": unref(isOpen) ? "true" : "false",
           class: "accordion-head",
           "aria-controls": `accordion-body-${unref(id)}`
         }, [
@@ -5601,18 +5622,18 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             createElementVNode("span", _hoisted_3$l, toDisplayString(_ctx.label), 1)
           ], true),
           createElementVNode("div", {
-            class: normalizeClass(["accordion-icon", { open: unref(open) }])
+            class: normalizeClass(["accordion-icon", { open: unref(isOpen) }])
           }, [
             createVNode(unref(_sfc_main$K), { icon: "expand_more" })
           ], 2)
         ], 8, _hoisted_2$v),
         createVNode(Transition, { name: "expand" }, {
           default: withCtx(() => [
-            unref(open) ? (openBlock(), createElementBlock("div", {
+            unref(isOpen) ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: "accordion-body",
               id: `accordion-body-${unref(id)}`,
-              "aria-hidden": unref(open) ? "false" : "true"
+              "aria-hidden": unref(isOpen) ? "false" : "true"
             }, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ], 8, _hoisted_4$f)) : createCommentVNode("", true)
@@ -5623,7 +5644,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-402c99d7"]]);
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-c1f34c59"]]);
 const _sfc_main$E = {};
 const _hoisted_1$B = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$u = { class: "p-1" };
@@ -18448,7 +18469,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             disabled: _ctx.disabled,
             required: _ctx.required,
             pattern: _ctx.pattern
-          }, _ctx.nativeInputAttrs), null, 16, _hoisted_4$9)), [
+          }, _ctx.nativeInputAttrs, { onInput: updateInputVal }), null, 16, _hoisted_4$9)), [
             [vModelText, unref(inputVal)]
           ]),
           _ctx.helptext ? (openBlock(), createElementBlock("p", _hoisted_5$8, toDisplayString(_ctx.helptext), 1)) : createCommentVNode("", true)
@@ -18466,7 +18487,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-d2e87e5e"]]);
+const TextInput = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-06fc66fe"]]);
 const _hoisted_1$k = { class: "primary-checkbox" };
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Checkbox",
@@ -18699,7 +18720,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 const RadioPillsInput = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-880c5069"]]);
-const _withScopeId$2 = (n2) => (pushScopeId("data-v-7efccba8"), n2 = n2(), popScopeId(), n2);
+const _withScopeId$2 = (n2) => (pushScopeId("data-v-52599888"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$g = { class: "bagel-input" };
 const _hoisted_2$d = {
   key: 0,
@@ -18822,9 +18843,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       input.onchange = (e) => {
         const target = e == null ? void 0 : e.target;
         if (target == null ? void 0 : target.files) {
-          Array.from(target.files).forEach(
-            (file) => fileQueue.value.push({ name: file.name, file, progress: 0 })
-          );
+          Array.from(target.files).forEach((file) => fileQueue.value.push({ name: file.name, file, progress: 0 }));
         }
         flushQueue();
       };
@@ -18847,9 +18866,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const drop3 = (e) => {
       preventDefault(e);
       if (e.dataTransfer) {
-        Array.from(e.dataTransfer.files).forEach(
-          (file) => fileQueue.value.push({ name: file.name, file, progress: 0 })
-        );
+        Array.from(e.dataTransfer.files).forEach((file) => fileQueue.value.push({ name: file.name, file, progress: 0 }));
       }
       isDragOver.value = false;
       flushQueue();
@@ -18933,7 +18950,10 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               ], 64);
             }), 128))
           ], true),
-          !storageFiles.value.length && !fileQueue.value.length || _ctx.multiple ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [
+          !storageFiles.value.length && !fileQueue.value.length || _ctx.multiple ? renderSlot(_ctx.$slots, "placeholder", {
+            key: 0,
+            browse
+          }, () => [
             _hoisted_13
           ], true) : createCommentVNode("", true)
         ], 34)
@@ -18941,7 +18961,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const $el = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-7efccba8"]]);
+const $el = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-52599888"]]);
 const _withScopeId$1 = (n2) => (pushScopeId("data-v-b87221d6"), n2 = n2(), popScopeId(), n2);
 const _hoisted_1$f = ["title"];
 const _hoisted_2$c = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("span", { class: "slider round" }, null, -1));

package/dist/style.css

@@ -535,13 +535,13 @@ a[data-v-d09a83c5] {
 }
 }
 
-.accordion-item[data-v-402c99d7] {
+.accordion-item[data-v-c1f34c59] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
 	cursor: pointer;
 	overflow: hidden;
 }
-.accordion-head[data-v-402c99d7] {
+.accordion-head[data-v-c1f34c59] {
 	height: var(--input-height);
 	background: transparent;
 	display: flex;
@@ -550,19 +550,19 @@ a[data-v-d09a83c5] {
 	justify-content: space-between;
 	border: none;
 }
-.accordion-icon[data-v-402c99d7] {
+.accordion-icon[data-v-c1f34c59] {
 	transition: all 0.2s ease;
 }
-.accordion-icon.open[data-v-402c99d7] {
+.accordion-icon.open[data-v-c1f34c59] {
 	transform: rotate(180deg);
 }
-.accordion-label[data-v-402c99d7] {
+.accordion-label[data-v-c1f34c59] {
 	font-weight: bold;
 }
-.accordion-head:hover .accordion-label[data-v-402c99d7] {
+.accordion-head:hover .accordion-label[data-v-c1f34c59] {
 	text-decoration: underline;
 }
-.accordion-body[data-v-402c99d7] {
+.accordion-body[data-v-c1f34c59] {
 }
 
 .expand-enter-active,
@@ -2382,58 +2382,58 @@ display: block;
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-d2e87e5e] {
+.bagel-input textarea[data-v-06fc66fe] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-d2e87e5e] {
+.bagel-input.text-input textarea[data-v-06fc66fe] {
 	resize: none;
 }
-.code textarea[data-v-d2e87e5e] {
+.code textarea[data-v-06fc66fe] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-black) !important;
 	color: var(--bgl-white) !important;
 }
-.code textarea[data-v-d2e87e5e]::placeholder{
+.code textarea[data-v-06fc66fe]::placeholder{
 	color: var(--bgl-white) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-d2e87e5e] {
+.bagel-input.small[data-v-06fc66fe] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-d2e87e5e] {
+.bagel-input.dense label[data-v-06fc66fe] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-d2e87e5e]:disabled {
+.bagel-input input[data-v-06fc66fe]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-d2e87e5e] {
+.bagel-input label[data-v-06fc66fe] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap[data-v-d2e87e5e] {
+.textInputIconWrap[data-v-06fc66fe] {
 	position: relative;
 }
-.textInputIconWrap .bgl_icon-font[data-v-d2e87e5e] {
+.textInputIconWrap .bgl_icon-font[data-v-06fc66fe] {
 	position: absolute;
 	inset-inline-end: 0.7rem;
 	bottom: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart[data-v-d2e87e5e] {
+.txtInputIconStart .iconStart[data-v-06fc66fe] {
 	position: absolute;
 	inset-inline-start: 0.7rem;
 	top: 50%;
 	line-height: 0;
 	color: var(--bgl-gray);
 }
-.txtInputIconStart textarea[data-v-d2e87e5e] {
+.txtInputIconStart textarea[data-v-06fc66fe] {
 	padding-inline-start: 2rem;
 }
-.bagel-input.small textarea[data-v-d2e87e5e] {
+.bagel-input.small textarea[data-v-06fc66fe] {
 	height: 30px;
 }
 
@@ -2596,7 +2596,7 @@ display: block;
 	color: var(--bgl-white);
 }
 
-.bagel-input .fileUploadWrap[data-v-7efccba8] {
+.bagel-input .fileUploadWrap[data-v-52599888] {
 	--width: 320px;
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
@@ -2609,7 +2609,7 @@ display: block;
 	overflow-y: auto;
 	background: var(--input-bg);
 }
-.previewName[data-v-7efccba8] {
+.previewName[data-v-52599888] {
 	padding: 0.5rem;
 	text-align: start;
 	color: var(--input-color);
@@ -2619,18 +2619,18 @@ display: block;
 	align-items: center;
 	padding-inline: 14px;
 }
-.previewName p[data-v-7efccba8] {
+.previewName p[data-v-52599888] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.imagePreviewWrap[data-v-7efccba8] {
+.imagePreviewWrap[data-v-52599888] {
 	background: var(--input-bg);
 	border-radius: var(--input-border-radius);
 	padding: 5px;
 	min-height: 90px;
 }
-img.preview[data-v-7efccba8] {
+img.preview[data-v-52599888] {
 	/* max-height: calc(var(--width) / 2); */
 	/* max-width: calc(var(--width) * 2); */
 	width: 40px;
@@ -2640,7 +2640,7 @@ img.preview[data-v-7efccba8] {
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
 }
-img.preview.single[data-v-7efccba8]{
+img.preview.single[data-v-52599888]{
 	max-width: var(--width);
 	width: auto;
 	object-fit: contain;
@@ -2648,18 +2648,18 @@ img.preview.single[data-v-7efccba8]{
 	max-height: calc(var(--width) / 2);
 	margin: 1rem;
 }
-.fileUploadWrap.dragover[data-v-7efccba8],
-.fileUploadWrap[data-v-7efccba8]:hover {
+.fileUploadWrap.dragover[data-v-52599888],
+.fileUploadWrap[data-v-52599888]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-7efccba8] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-52599888] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	color: var(--bgl-gray);
 }
-.pie[data-v-7efccba8] {
+.pie[data-v-52599888] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -2667,7 +2667,7 @@ img.preview.single[data-v-7efccba8]{
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-7efccba8]:before {
+.pie[data-v-52599888]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -2685,26 +2685,26 @@ img.preview.single[data-v-7efccba8]{
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-7efccba8] {
+.pie .success[data-v-52599888] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-7efccba8] {
+.pie .progress[data-v-52599888] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-7efccba8] {
+.pie.complete .progress[data-v-52599888] {
 	display: none;
 }
-.pie.complete .success[data-v-7efccba8] {
+.pie.complete .success[data-v-52599888] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-7efccba8]:before {
+.pie.complete[data-v-52599888]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-7efccba8] {
+.pie.complete[data-v-52599888] {
 	color: var(--bgl-green);
 }
 
@@ -3193,6 +3193,9 @@ p {
 .round {
     border-radius: var(--btn-border-radius);
 }
+.rounded {
+    border-radius: calc(var(--btn-border-radius) / 2);
+}
 .justify-items-center {
     justify-items: center;
 }
@@ -3262,6 +3265,16 @@ p {
     top: 0px;
     inset-inline-end: 0px;
 }
+.position-bottom-start {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-start: 0px;
+}
+.position-bottom-end {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-end: 0px;
+}
 .positioned-full {
     top: 0;
     bottom: 0;
@@ -4635,6 +4648,18 @@ p {
         inset-inline-end: 0px;
     }
 
+    .m_position-bottom-start {
+        position: absolute;
+        bottom: 0px;
+        inset-inline-start: 0px;
+    }
+
+    .m_position-bottom-end {
+        position: absolute;
+        bottom: 0px;
+        inset-inline-end: 0px;
+    }
+
     .m_positioned-full {
         top: 0;
         bottom: 0;
@@ -4642,6 +4667,7 @@ p {
         inset-inline-end: 0;
     }
 
+
     .m_auto-flow-rows {
         grid-auto-flow: row;
     }
@@ -6952,6 +6978,9 @@ select {
     min-width: 220px;
   }
 }
+.opacity-0 {
+    opacity: 0;
+}
 .opacity-1 {
     opacity: 0.1;
 }
@@ -7246,7 +7275,23 @@ select {
 .color-input-green input {
     color: var(--bgl-green) !important;
 }
+.cover,
+.object-fit-cover {
+    object-fit: cover;
+}
+.contain,
+.object-fit-contain {
+    object-fit: contain;
+}
+.scale-down,
+.object-fit-scale-down {
+    object-fit: scale-down;
+}
 @media screen and (max-width: 910px) {
+    .m_opacity-0 {
+        opacity: 0;
+    }
+
     .m_opacity-1 {
         opacity: 0.1;
     }
@@ -7635,6 +7680,21 @@ select {
     .m_color-input-green input {
         color: var(--bgl-green) !important;
     }
+
+    .m_cover,
+    .m_object-fit-cover {
+        object-fit: cover;
+    }
+
+    .m_contain,
+    .m_object-fit-contain {
+        object-fit: contain;
+    }
+
+    .m_scale-down,
+    .m_object-fit-scale-down {
+        object-fit: scale-down;
+    }
 }
 /* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */
 /*noinspection CssUnknownTarget*/

package/dist/utils/BagelFormUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAE7C,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,KAAK,eAAe,GAAG,YAAY,CAAC;AAEpC,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAeP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAWP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAE7C,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,KAAK,eAAe,GAAG,YAAY,CAAC;AAEpC,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAeP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAmBP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.441",
+  "version": "0.0.449",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/AccordionItem.vue

@@ -2,23 +2,23 @@
 	<div class="accordion-item">
 		<button
 			@click="toggle()"
-			:aria-expanded="open ? 'true' : 'false'"
+			:aria-expanded="isOpen ? 'true' : 'false'"
 			class="accordion-head"
 			:aria-controls="`accordion-body-${id}`"
 		>
 			<slot name="head" >
 				<span class="accordion-label">{{ label }}</span>
 			</slot>
-			<div class="accordion-icon" :class="{ open }">
+			<div class="accordion-icon" :class="{ open: isOpen }">
 				<MaterialIcon icon="expand_more" />
 			</div>
 		</button>
 		<Transition name="expand">
 			<div
-				v-if="open"
+				v-if="isOpen"
 				class="accordion-body"
 				:id="`accordion-body-${id}`"
-				:aria-hidden="open ? 'false' : 'true'"
+				:aria-hidden="isOpen ? 'false' : 'true'"
 			>
 				<slot />
 			</div>
@@ -28,13 +28,29 @@
 
 <script lang="ts" setup>
 import { MaterialIcon } from '@bagelink/vue';
-import { watch, inject } from 'vue';
+import { watch, inject, onMounted } from 'vue';
 
 const props = defineProps<{
 	label?: string;
 	id?: string;
+	open?: boolean;
 }>();
-let open = $ref(false);
+
+const emit = defineEmits(['update:open']);
+
+let openVal = $ref(false);
+
+let isOpen = $computed({
+	get: () => openVal,
+	set: (value: boolean) => {
+		openVal = value;
+		emit('update:open', value);
+	},
+});
+
+onMounted(() => {
+	if (props.open) isOpen = true;
+});
 
 const accordionState = inject('accordionState') as { openItem: string | null };
 const id = props.id || Math.random().toString(36).substring(7);
@@ -42,16 +58,14 @@ const id = props.id || Math.random().toString(36).substring(7);
 watch(
 	() => accordionState?.openItem,
 	(currentOpenId) => {
-		if (currentOpenId !== id) {
-			open = false;
-		}
+		if (currentOpenId !== id) isOpen = false;
 	},
 	{ immediate: true },
 );
 
 function toggle() {
-	open = !open;
-	if (open && accordionState?.openItem) accordionState.openItem = id;
+	isOpen = !isOpen;
+	if (isOpen && accordionState?.openItem) accordionState.openItem = id;
 	else if (accordionState?.openItem === id) accordionState.openItem = null;
 }
 </script>

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

@@ -14,58 +14,58 @@
 				dragover: isDragOver,
 			}"
 		>
-		<slot name="files" :files="storageFiles" :fileQueue>
-			<template v-for="file in storageFiles" :key="file.id">
-				<div class="single-image" v-if="!multiple">
-					<img class="single preview" :src="file.url" alt="" />
+			<slot name="files" :files="storageFiles" :fileQueue>
+				<template v-for="file in storageFiles" :key="file.id">
+					<div class="single-image" v-if="!multiple">
+						<img class="single preview" :src="file.url" alt="" >
 					<!-- <p class="no-margin">
 						{{ file.name }}
 					</p> -->
-				</div>
-				<div class="multi-image-item previewName" v-if="multiple">
-					<img  class="preview" :src="file.url" alt="" />
-					<p class="no-margin">
-						{{ file.name }}
-					</p>
-					<Btn
-						thin
-						@click.stop="removeFile(file)"
-						flat
-						icon="delete"
-						color="red"
-					/>
-				</div>
-			</template>
-			<template v-for="fileQ in fileQueue" :key="fileQ.file">
-				<div class="imagePreviewWrap" v-if="!multiple">
-					<img class="preview" :src="fileToUrl(fileQ.file)" alt="" />
-				</div>
-				<div class="previewName">
-					<img
-						:width="width || '220'"
-						v-if="multiple"
-						class="preview"
-						:src="fileToUrl(fileQ.file)"
-						alt=""
-					/>
-					<p class="no-margin">
-						{{ fileQ.name }}
-					</p>
-					<div
-						class="pie"
-						:style="`--p:${fileQ.progress}`"
-						style="--b: 2px"
-						:class="{ complete: fileQ.progress === 100 }"
-					>
-						<span class="progress" v-if="fileQ.progress < 100">
-							{{ `${fileQ.progress.toFixed(0)}` }}
-						</span>
-						<MaterialIcon class="success" icon="check" />
 					</div>
-				</div>
-			</template>
-		</slot>
-			<slot v-if="(!storageFiles.length && !fileQueue.length) || multiple" name="placeholder">
+					<div class="multi-image-item previewName" v-if="multiple">
+						<img  class="preview" :src="file.url" alt="" >
+						<p class="no-margin">
+							{{ file.name }}
+						</p>
+						<Btn
+							thin
+							@click.stop="removeFile(file)"
+							flat
+							icon="delete"
+							color="red"
+						/>
+					</div>
+				</template>
+				<template v-for="fileQ in fileQueue" :key="fileQ.file">
+					<div class="imagePreviewWrap" v-if="!multiple">
+						<img class="preview" :src="fileToUrl(fileQ.file)" alt="" >
+					</div>
+					<div class="previewName">
+						<img
+							:width="width || '220'"
+							v-if="multiple"
+							class="preview"
+							:src="fileToUrl(fileQ.file)"
+							alt=""
+						>
+						<p class="no-margin">
+							{{ fileQ.name }}
+						</p>
+						<div
+							class="pie"
+							:style="`--p:${fileQ.progress}`"
+							style="--b: 2px"
+							:class="{ complete: fileQ.progress === 100 }"
+						>
+							<span class="progress" v-if="fileQ.progress < 100">
+								{{ `${fileQ.progress.toFixed(0)}` }}
+							</span>
+							<MaterialIcon class="success" icon="check" />
+						</div>
+					</div>
+				</template>
+			</slot>
+			<slot v-if="(!storageFiles.length && !fileQueue.length) || multiple" name="placeholder" :browse>
 				<p>Drop files here or click to upload</p>
 			</slot>
 		</div>
@@ -74,7 +74,9 @@
 
 <script setup lang="ts">
 import { onMounted, watch } from 'vue';
-import { Btn, type StorageFile, useBagel, MaterialIcon } from '@bagelink/vue';
+import {
+	Btn, type StorageFile, useBagel, MaterialIcon,
+} from '@bagelink/vue';
 
 const bagel = useBagel();
 
@@ -104,8 +106,7 @@ const bindKey: StrKey = props.bindkey || 'id';
 const file_bindkeys = defineModel<FSValue>('modelValue');
 const storageFiles = $ref<StorageFile[]>([]);
 
-const compareIds = (v1?: FSValue, v2?: FSValue) =>
-	[v1].flat().join(',') === [v2].flat().join(',');
+const compareIds = (v1?: FSValue, v2?: FSValue) => [v1].flat().join(',') === [v2].flat().join(',');
 
 onMounted(() => {
 	if (!props.files && [file_bindkeys.value].flat().length) {
@@ -190,9 +191,7 @@ const browse = () => {
 	input.onchange = (e: Event) => {
 		const target = e?.target as HTMLInputElement;
 		if (target?.files) {
-			Array.from(target.files).forEach((file: File) =>
-				fileQueue.push({ name: file.name, file, progress: 0 }),
-			);
+			Array.from(target.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
 		}
 		flushQueue();
 	};
@@ -214,9 +213,7 @@ const dragover = (e: DragEvent) => {
 const drop = (e: DragEvent) => {
 	preventDefault(e);
 	if (e.dataTransfer) {
-		Array.from(e.dataTransfer.files).forEach((file: File) =>
-			fileQueue.push({ name: file.name, file, progress: 0 }),
-		);
+		Array.from(e.dataTransfer.files).forEach((file: File) => fileQueue.push({ name: file.name, file, progress: 0 }));
 	}
 	isDragOver = false;
 	flushQueue();
@@ -296,7 +293,6 @@ img.preview.single{
 	color: var(--bgl-gray);
 }
 
-
 .pie {
 	width: 30px;
 	height: 30px;

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

@@ -39,6 +39,7 @@
 				:required="required"
 				:pattern="pattern"
 				v-bind="nativeInputAttrs"
+				@input="updateInputVal"
 			/>
 			<p v-if="helptext">{{ helptext }}</p>
 		</label>

package/src/styles/appearance.css

@@ -1,3 +1,7 @@
+.opacity-0 {
+    opacity: 0;
+}
+
 .opacity-1 {
     opacity: 0.1;
 }
@@ -390,9 +394,28 @@
     color: var(--bgl-green) !important;
 }
 
+.cover,
+.object-fit-cover {
+    object-fit: cover;
+}
+
+.contain,
+.object-fit-contain {
+    object-fit: contain;
+}
+
+.scale-down,
+.object-fit-scale-down {
+    object-fit: scale-down;
+}
+
 
 
 @media screen and (max-width: 910px) {
+    .m_opacity-0 {
+        opacity: 0;
+    }
+
     .m_opacity-1 {
         opacity: 0.1;
     }
@@ -781,4 +804,19 @@
     .m_color-input-green input {
         color: var(--bgl-green) !important;
     }
+
+    .m_cover,
+    .m_object-fit-cover {
+        object-fit: cover;
+    }
+
+    .m_contain,
+    .m_object-fit-contain {
+        object-fit: contain;
+    }
+
+    .m_scale-down,
+    .m_object-fit-scale-down {
+        object-fit: scale-down;
+    }
 }

package/src/styles/layout.css

@@ -15,6 +15,10 @@
     border-radius: var(--btn-border-radius);
 }
 
+.rounded {
+    border-radius: calc(var(--btn-border-radius) / 2);
+}
+
 .justify-items-center {
     justify-items: center;
 }
@@ -105,6 +109,18 @@
     inset-inline-end: 0px;
 }
 
+.position-bottom-start {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-start: 0px;
+}
+
+.position-bottom-end {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-end: 0px;
+}
+
 .positioned-full {
     top: 0;
     bottom: 0;
@@ -1678,6 +1694,7 @@
     direction: rtl;
 }
 
+
 @media screen and (max-width: 910px) {
     .grid-wrap-2 {
         grid-template-columns: repeat(1, 1fr);

package/src/styles/mobilLayout.css

@@ -128,6 +128,18 @@
         inset-inline-end: 0px;
     }
 
+    .m_position-bottom-start {
+        position: absolute;
+        bottom: 0px;
+        inset-inline-start: 0px;
+    }
+
+    .m_position-bottom-end {
+        position: absolute;
+        bottom: 0px;
+        inset-inline-end: 0px;
+    }
+
     .m_positioned-full {
         top: 0;
         bottom: 0;
@@ -135,6 +147,7 @@
         inset-inline-end: 0;
     }
 
+
     .m_auto-flow-rows {
         grid-auto-flow: row;
     }

package/src/utils/BagelFormUtils.ts

@@ -121,7 +121,15 @@ export function numField(
 		id,
 		label,
 		placeholder: options?.placeholder,
-		attrs: { type: 'number' },
+		helptext: options?.helptext,
+		attrs: {
+			type: 'number',
+			nativeInputAttrs: {
+				step: options?.step,
+				min: options?.min,
+				max: options?.max,
+			},
+		},
 	};
 }