@bagelink/vue 0.0.755 → 0.0.757

package/dist/components/layout/Tabs.vue.d.ts

@@ -8,11 +8,13 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<{
     tabs: Tab[];
     modelValue?: string;
+    flat?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<{
     tabs: Tab[];
     modelValue?: string;
+    flat?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/layout/Tabs.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Tabs.vue"],"names":[],"mappings":"AAmDA,OAAO,EAAE,KAAK,GAAG,EAAW,MAAM,eAAe,CAAA;AA2CjD,iBAAS,cAAc;0CA2C6D,GAAG;;WAUzE,OAAO,IAA6B;EAEjD;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;UAzGd,GAAG,EAAE;iBACE,MAAM;;;;UADb,GAAG,EAAE;iBACE,MAAM;;;kFA+GlB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Tabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Tabs.vue"],"names":[],"mappings":"AAsDA,OAAO,EAAE,KAAK,GAAG,EAAW,MAAM,eAAe,CAAA;AA8CjD,iBAAS,cAAc;0CA2C6D,GAAG;;WAUzE,OAAO,IAA6B;EAEjD;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;UA5Gd,GAAG,EAAE;iBACE,MAAM;WACZ,OAAO;;;;UAFR,GAAG,EAAE;iBACE,MAAM;WACZ,OAAO;;;kFAiHb,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.cjs

@@ -227,8 +227,8 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     vue.useCssVars((_ctx) => ({
-      "a30674be": computedBackgroundColor.value,
-      "1811393c": cumputedTextColor.value
+      "4cc6fa2a": computedBackgroundColor.value,
+      "0ff33606": cumputedTextColor.value
     }));
     const props2 = __props;
     const isComponent = vue.computed(() => {
@@ -317,7 +317,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-7463197f"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-a73ad8c2"]]);
 const _hoisted_1$G = ["dismissable"];
 const _hoisted_2$r = { class: "m-0" };
 const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
@@ -19010,7 +19010,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options, (opt) => {
           return vue.openBlock(), vue.createElementBlock("label", {
             key: opt.id,
-            class: "border round p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
+            class: "border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
             for: opt.id
           }, [
             vue.withDirectives(vue.createElementVNode("input", {
@@ -19026,7 +19026,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("div", _hoisted_3$d, [
               opt.imgSrc ? (vue.openBlock(), vue.createElementBlock("img", {
                 key: 0,
-                class: "bg-popup shadow-light py-025 rounded m_w40",
+                class: "bg-popup shadow-light py-025 radius-05 m_w40",
                 width: "60",
                 src: opt.imgSrc,
                 alt: opt.imgAlt
@@ -19051,7 +19051,7 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-3ae8f4d3"]]);
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-3e9e030f"]]);
 const _hoisted_1$p = { class: "bagel-input" };
 const _hoisted_2$f = { class: "pb-025" };
 const _hoisted_3$c = { class: "flex gap-05 flex-wrap" };
@@ -43670,7 +43670,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
               key: action.name,
               thin: "",
               flat: "",
-              class: vue.normalizeClass([action.class, "rounded"]),
+              class: vue.normalizeClass([action.class, "radius-05"]),
               "aria-label": action.name,
               icon: action.icon,
               onClick: ($event) => emit2("action", action.name)
@@ -43687,12 +43687,12 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$l = { class: "rich-text-editor round pt-05 px-1 pb-1" };
+const _hoisted_1$l = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
 const _hoisted_2$c = { class: "editor-container flex flex-stretch gap-1 m_column" };
-const _hoisted_3$a = { class: "content-area rounded p-1 shadow-light w-100 grid" };
+const _hoisted_3$a = { class: "content-area radius-05 p-1 shadow-light w-100 grid" };
 const _hoisted_4$6 = {
   key: 0,
-  class: "preview-area w-100 rounded p-1"
+  class: "preview-area w-100 radius-05 p-1"
 };
 const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
@@ -43853,7 +43853,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-1cddc1b1"]]);
+const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-9c94183b"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -52214,7 +52214,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
         vue.createElementVNode("div", {
           class: vue.normalizeClass(["switch", { checked: checked.value }])
         }, _cache[1] || (_cache[1] = [
-          vue.createElementVNode("span", { class: "slider round" }, null, -1)
+          vue.createElementVNode("span", { class: "slider rounded" }, null, -1)
         ]), 2),
         vue.withDirectives(vue.createElementVNode("input", {
           id: inputId.value,
@@ -52233,7 +52233,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-0a2b089d"]]);
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-683b2f6d"]]);
 const _hoisted_1$f = { class: "m-0 pb-025 txt14 line-height-1" };
 const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "BottomMenu",
@@ -52342,7 +52342,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
           icon: "keyboard_arrow_right",
           onClick: toggleMenu
         }),
-        vue.createVNode(vue.unref(_sfc_main$N), { class: "py-1 px-05 h-100 flex column gap-05 round relative bg-primary font-light overflow-y" }, {
+        vue.createVNode(vue.unref(_sfc_main$N), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
           default: vue.withCtx(() => [
             !vue.unref(isOpen) || !vue.unref(slots)["brand-open"] ? vue.renderSlot(_ctx.$slots, "brand", { key: 0 }, void 0, true) : vue.createCommentVNode("", true),
             vue.unref(isOpen) ? vue.renderSlot(_ctx.$slots, "brand-open", { key: 1 }, void 0, true) : vue.createCommentVNode("", true),
@@ -52388,7 +52388,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-6007d02b"]]);
+const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-3ee4f3f7"]]);
 const _hoisted_1$d = { class: "bgl_card tabs-top" };
 const _hoisted_2$7 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$5 = ["onClick"];
@@ -52471,7 +52471,8 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "Tabs",
   props: {
     tabs: {},
-    modelValue: {}
+    modelValue: {},
+    flat: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -52503,10 +52504,11 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         vue.createVNode(vue.unref(TabsNav), {
           modelValue: slctTab.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => slctTab.value = $event),
+          flat: _ctx.flat,
           tabs: _ctx.tabs,
           group: vue.unref(group),
           class: "mb-05"
-        }, null, 8, ["modelValue", "tabs", "group"]),
+        }, null, 8, ["modelValue", "flat", "tabs", "group"]),
         vue.unref(currentTab) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           vue.unref(slots)[vue.unref(currentTab)] ? vue.renderSlot(_ctx.$slots, vue.unref(currentTab), { key: 0 }) : vue.unref(currentTab) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabComponent)), { key: 1 })) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)
@@ -54659,13 +54661,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
                       item.type === "image" ? (vue.openBlock(), vue.createElementBlock("img", {
                         key: 0,
-                        class: vue.normalizeClass(["thumbnail object-fit-cover hover opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: vue.unref(currentIndex) === index2 }]),
+                        class: vue.normalizeClass(["thumbnail object-fit-cover hover opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: vue.unref(currentIndex) === index2 }]),
                         src: item.src,
                         alt: "",
                         onClick: ($event) => selectItem(index2)
                       }, null, 10, _hoisted_11)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$b), {
                         key: 1,
-                        class: vue.normalizeClass(["thumbnail object-fit-cover hover opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: vue.unref(currentIndex) === index2 }]),
+                        class: vue.normalizeClass(["thumbnail object-fit-cover hover opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: vue.unref(currentIndex) === index2 }]),
                         icon: "description",
                         onClick: ($event) => selectItem(index2)
                       }, null, 8, ["class", "onClick"]))
@@ -54681,7 +54683,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d550287d"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-68949c15"]]);
 const groups = {};
 const lightboxDirective = {
   mounted(el, binding) {
@@ -54851,7 +54853,7 @@ function numField(id, label, options) {
 function frmRow(...children2) {
   return {
     $el: "div",
-    class: "flex gap-1 m_block",
+    class: "flex gap-1 m_block align-items-end",
     children: children2
   };
 }

package/dist/index.mjs

@@ -225,8 +225,8 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "a30674be": computedBackgroundColor.value,
-      "1811393c": cumputedTextColor.value
+      "4cc6fa2a": computedBackgroundColor.value,
+      "0ff33606": cumputedTextColor.value
     }));
     const props2 = __props;
     const isComponent = computed(() => {
@@ -315,7 +315,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-7463197f"]]);
+const Btn = /* @__PURE__ */ _export_sfc(_sfc_main$S, [["__scopeId", "data-v-a73ad8c2"]]);
 const _hoisted_1$G = ["dismissable"];
 const _hoisted_2$r = { class: "m-0" };
 const _sfc_main$R = /* @__PURE__ */ defineComponent({
@@ -19008,7 +19008,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         (openBlock(true), createElementBlock(Fragment$1, null, renderList(_ctx.options, (opt) => {
           return openBlock(), createElementBlock("label", {
             key: opt.id,
-            class: "border round p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
+            class: "border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover",
             for: opt.id
           }, [
             withDirectives(createElementVNode("input", {
@@ -19024,7 +19024,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_3$d, [
               opt.imgSrc ? (openBlock(), createElementBlock("img", {
                 key: 0,
-                class: "bg-popup shadow-light py-025 rounded m_w40",
+                class: "bg-popup shadow-light py-025 radius-05 m_w40",
                 width: "60",
                 src: opt.imgSrc,
                 alt: opt.imgAlt
@@ -19049,7 +19049,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-3ae8f4d3"]]);
+const RadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-3e9e030f"]]);
 const _hoisted_1$p = { class: "bagel-input" };
 const _hoisted_2$f = { class: "pb-025" };
 const _hoisted_3$c = { class: "flex gap-05 flex-wrap" };
@@ -43668,7 +43668,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
               key: action.name,
               thin: "",
               flat: "",
-              class: normalizeClass([action.class, "rounded"]),
+              class: normalizeClass([action.class, "radius-05"]),
               "aria-label": action.name,
               icon: action.icon,
               onClick: ($event) => emit2("action", action.name)
@@ -43685,12 +43685,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$l = { class: "rich-text-editor round pt-05 px-1 pb-1" };
+const _hoisted_1$l = { class: "rich-text-editor rounded pt-05 px-1 pb-1" };
 const _hoisted_2$c = { class: "editor-container flex flex-stretch gap-1 m_column" };
-const _hoisted_3$a = { class: "content-area rounded p-1 shadow-light w-100 grid" };
+const _hoisted_3$a = { class: "content-area radius-05 p-1 shadow-light w-100 grid" };
 const _hoisted_4$6 = {
   key: 0,
-  class: "preview-area w-100 rounded p-1"
+  class: "preview-area w-100 radius-05 p-1"
 };
 const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "index",
@@ -43851,7 +43851,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-1cddc1b1"]]);
+const index$1 = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-9c94183b"]]);
 /*!
  * Signature Pad v5.0.3 | https://github.com/szimek/signature_pad
  * (c) 2024 Szymon Nowak | Released under the MIT license
@@ -52212,7 +52212,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(["switch", { checked: checked.value }])
         }, _cache[1] || (_cache[1] = [
-          createElementVNode("span", { class: "slider round" }, null, -1)
+          createElementVNode("span", { class: "slider rounded" }, null, -1)
         ]), 2),
         withDirectives(createElementVNode("input", {
           id: inputId.value,
@@ -52231,7 +52231,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-0a2b089d"]]);
+const ToggleInput = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-683b2f6d"]]);
 const _hoisted_1$f = { class: "m-0 pb-025 txt14 line-height-1" };
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "BottomMenu",
@@ -52340,7 +52340,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           icon: "keyboard_arrow_right",
           onClick: toggleMenu
         }),
-        createVNode(unref(_sfc_main$N), { class: "py-1 px-05 h-100 flex column gap-05 round relative bg-primary font-light overflow-y" }, {
+        createVNode(unref(_sfc_main$N), { class: "py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y" }, {
           default: withCtx(() => [
             !unref(isOpen) || !unref(slots)["brand-open"] ? renderSlot(_ctx.$slots, "brand", { key: 0 }, void 0, true) : createCommentVNode("", true),
             unref(isOpen) ? renderSlot(_ctx.$slots, "brand-open", { key: 1 }, void 0, true) : createCommentVNode("", true),
@@ -52386,7 +52386,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-6007d02b"]]);
+const SidebarMenu = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-3ee4f3f7"]]);
 const _hoisted_1$d = { class: "bgl_card tabs-top" };
 const _hoisted_2$7 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$5 = ["onClick"];
@@ -52469,7 +52469,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "Tabs",
   props: {
     tabs: {},
-    modelValue: {}
+    modelValue: {},
+    flat: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -52501,10 +52502,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         createVNode(unref(TabsNav), {
           modelValue: slctTab.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => slctTab.value = $event),
+          flat: _ctx.flat,
           tabs: _ctx.tabs,
           group: unref(group),
           class: "mb-05"
-        }, null, 8, ["modelValue", "tabs", "group"]),
+        }, null, 8, ["modelValue", "flat", "tabs", "group"]),
         unref(currentTab) ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
           unref(slots)[unref(currentTab)] ? renderSlot(_ctx.$slots, unref(currentTab), { key: 0 }) : unref(currentTab) ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabComponent)), { key: 1 })) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
@@ -54657,13 +54659,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     return openBlock(), createElementBlock(Fragment$1, { key: index2 }, [
                       item.type === "image" ? (openBlock(), createElementBlock("img", {
                         key: 0,
-                        class: normalizeClass(["thumbnail object-fit-cover hover opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: unref(currentIndex) === index2 }]),
+                        class: normalizeClass(["thumbnail object-fit-cover hover opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: unref(currentIndex) === index2 }]),
                         src: item.src,
                         alt: "",
                         onClick: ($event) => selectItem(index2)
                       }, null, 10, _hoisted_11)) : (openBlock(), createBlock(unref(_sfc_main$b), {
                         key: 1,
-                        class: normalizeClass(["thumbnail object-fit-cover hover opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: unref(currentIndex) === index2 }]),
+                        class: normalizeClass(["thumbnail object-fit-cover hover opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: unref(currentIndex) === index2 }]),
                         icon: "description",
                         onClick: ($event) => selectItem(index2)
                       }, null, 8, ["class", "onClick"]))
@@ -54679,7 +54681,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d550287d"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-68949c15"]]);
 const groups = {};
 const lightboxDirective = {
   mounted(el, binding) {
@@ -54849,7 +54851,7 @@ function numField(id, label, options) {
 function frmRow(...children2) {
   return {
     $el: "div",
-    class: "flex gap-1 m_block",
+    class: "flex gap-1 m_block align-items-end",
     children: children2
   };
 }

package/dist/style.css

@@ -46,19 +46,19 @@
 	max-height: 300px;
 }
 
-a[data-v-7463197f] {
+a[data-v-a73ad8c2] {
   text-decoration: none;
 }
-.loading[data-v-7463197f] {
+.loading[data-v-a73ad8c2] {
   border: 1px solid var(--bgl-light-text);
   border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin-7463197f 1s linear infinite;
+  animation: spin-a73ad8c2 1s linear infinite;
   border-radius: 100px;
   width: 1rem;
   height: 1rem;
   margin: auto;
 }
-@keyframes spin-7463197f {
+@keyframes spin-a73ad8c2 {
 0% {
     transform: rotate(0deg);
 }
@@ -66,7 +66,7 @@ a[data-v-7463197f] {
     transform: rotate(360deg);
 }
 }
-.bgl_btn-icon[data-v-7463197f] {
+.bgl_btn-icon[data-v-a73ad8c2] {
   height: var(--btn-height);
   width: var(--btn-height);
   border-radius: 100%;
@@ -76,108 +76,108 @@ a[data-v-7463197f] {
   flex-shrink: 0;
   transition: var(--bgl-transition);
 }
-.bgl_btn[data-v-7463197f] {
+.bgl_btn[data-v-a73ad8c2] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   transition: var(--bgl-transition);
   text-decoration: none;
 }
-.bgl_btn[disabled="true"][data-v-7463197f] {
+.bgl_btn[disabled="true"][data-v-a73ad8c2] {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.bgl_btn-flex[data-v-7463197f] {
+.bgl_btn-flex[data-v-a73ad8c2] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   justify-content: center;
   height: 100%;
 }
-.bgl_btn .bgl_.bgl_icon-font[data-v-7463197f] {
+.bgl_btn .bgl_.bgl_icon-font[data-v-a73ad8c2] {
   font-size: calc(var(--input-font-size) * 1.3);
 }
-.bgl_btn[data-v-7463197f],
-.bgl_btn-icon[data-v-7463197f] {
-  background-color: var(--a30674be);
-  color: var(--1811393c);
+.bgl_btn[data-v-a73ad8c2],
+.bgl_btn-icon[data-v-a73ad8c2] {
+  background-color: var(--4cc6fa2a);
+  color: var(--0ff33606);
 }
-.bgl_btn[data-v-7463197f]:hover,
-.bgl_btn-icon[data-v-7463197f]:hover {
+.bgl_btn[data-v-a73ad8c2]:hover,
+.bgl_btn-icon[data-v-a73ad8c2]:hover {
   filter: var(--bgl-hover-filter);
 }
-.bgl_btn[data-v-7463197f]:active,
-.bgl_btn-icon[data-v-7463197f]:active {
+.bgl_btn[data-v-a73ad8c2]:active,
+.bgl_btn-icon[data-v-a73ad8c2]:active {
   filter: var(--bgl-active-filter);
 }
-.bgl_btn.bgl_flatBtn[data-v-7463197f] {
+.bgl_btn.bgl_flatBtn[data-v-a73ad8c2] {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   background: transparent;
 }
-.bgl_btn-icon.bgl_flatBtn[data-v-7463197f] {
+.bgl_btn-icon.bgl_flatBtn[data-v-a73ad8c2] {
   background: transparent;
 }
-.bgl_btn.bgl_flatBtn[data-v-7463197f]:hover,
-.bgl_btn-icon.bgl_flatBtn[data-v-7463197f]:hover {
+.bgl_btn.bgl_flatBtn[data-v-a73ad8c2]:hover,
+.bgl_btn-icon.bgl_flatBtn[data-v-a73ad8c2]:hover {
   filter: var(--bgl-hover-filter);
   background: var(--bgl-gray-20);
   color: var(--bgl-primary);
 }
-.bgl_btn.bgl_flatBtn[data-v-7463197f]:active,
-.bgl_btn-icon.bgl_flatBtn[data-v-7463197f]:active {
+.bgl_btn.bgl_flatBtn[data-v-a73ad8c2]:active,
+.bgl_btn-icon.bgl_flatBtn[data-v-a73ad8c2]:active {
   background: var(--bgl-gray-40);
   filter: var(--bgl-active-filter);
   color: var(--bgl-primary);
 }
-.bgl_btn.bgl_flatBtn.red[data-v-7463197f],
-.bgl_btn-icon.bgl_flatBtn.red[data-v-7463197f] {
+.bgl_btn.bgl_flatBtn.red[data-v-a73ad8c2],
+.bgl_btn-icon.bgl_flatBtn.red[data-v-a73ad8c2] {
   color: var(--bgl-red);
 }
-.bgl_btn.bgl_flatBtn.white[data-v-7463197f],
-.bgl_btn-icon.bgl_flatBtn.white[data-v-7463197f] {
+.bgl_btn.bgl_flatBtn.white[data-v-a73ad8c2],
+.bgl_btn-icon.bgl_flatBtn.white[data-v-a73ad8c2] {
   color: var(--bgl-light-text);
 }
-.bgl_btn.bgl_flatBtn.light[data-v-7463197f],
-.bgl_btn-icon.bgl_flatBtn.light[data-v-7463197f] {
+.bgl_btn.bgl_flatBtn.light[data-v-a73ad8c2],
+.bgl_btn-icon.bgl_flatBtn.light[data-v-a73ad8c2] {
   color: var(--bgl-primary-tint);
 }
-.bgl_btn.bgl_flatBtn.black[data-v-7463197f],
-.bgl_btn-icon.bgl_flatBtn.black[data-v-7463197f] {
+.bgl_btn.bgl_flatBtn.black[data-v-a73ad8c2],
+.bgl_btn-icon.bgl_flatBtn.black[data-v-a73ad8c2] {
   color: var(--bgl-text-color);
 }
-.bgl_btn.bgl_flatBtn.gray[data-v-7463197f],
-.bgl_btn-icon.bgl_flatBtn.gray[data-v-7463197f] {
+.bgl_btn.bgl_flatBtn.gray[data-v-a73ad8c2],
+.bgl_btn-icon.bgl_flatBtn.gray[data-v-a73ad8c2] {
   color: var(--bgl-gray);
 }
-.bgl_btn.thin[data-v-7463197f] {
+.bgl_btn.thin[data-v-a73ad8c2] {
   padding-inline: calc(var(--btn-padding) / 3);
   border-radius: calc(var(--btn-border-radius) / 1.5);
 }
-.bgl_btn.round[data-v-7463197f] {
-  border-radius: calc(var(--btn-border-radius) * 2);
+.bgl_btn.round[data-v-a73ad8c2] {
+  border-radius: 1000px;
 }
-.bgl_btn-icon.thin[data-v-7463197f] {
+.bgl_btn-icon.thin[data-v-a73ad8c2] {
   height: calc(var(--btn-height) / 1.5);
   width: calc(var(--btn-height) / 1.5);
   line-height: normal;
 }
-.bgl_btn-icon.thin .bgl_btn-flex[data-v-7463197f] {
+.bgl_btn-icon.thin .bgl_btn-flex[data-v-a73ad8c2] {
 	height: 100%;
 }
-[dir="rtl"] .bgl_.bgl_icon-font[data-v-7463197f] {
+[dir="rtl"] .bgl_.bgl_icon-font[data-v-a73ad8c2] {
   transform: rotateY(180deg);
 }
-.bgl_btn-border[data-v-7463197f] {
-  outline: 1px solid var(--a30674be);
-  color: var(--a30674be);
+.bgl_btn-border[data-v-a73ad8c2] {
+  outline: 1px solid var(--4cc6fa2a);
+  color: var(--4cc6fa2a);
   background: transparent;
 }
-.bgl_btn-border[data-v-7463197f]:hover {
+.bgl_btn-border[data-v-a73ad8c2]:hover {
   color: var(--bgl-light-text);
-  background: var(--a30674be);
+  background: var(--4cc6fa2a);
   filter: brightness(100%);
 }
-.bgl_btn-border[data-v-7463197f]:active {
+.bgl_btn-border[data-v-a73ad8c2]:active {
   filter: brightness(80%);
 }
 
@@ -918,12 +918,12 @@ data[data-v-2da95d24] {
 	margin-block: calc(var(--input-height) / 2 - 15px);
 }
 
-.radio-input-list[data-v-3ae8f4d3]{
+.radio-input-list[data-v-3e9e030f]{
 	width: auto;
 	transform: scale(1.4);
 	margin-inline-end: 0.6rem;
 }
-.active-list-item[data-v-3ae8f4d3]:has(:checked){
+.active-list-item[data-v-3e9e030f]:has(:checked){
 	background: var(--bgl-primary-light) !important;
 	border-color: var(--bgl-primary) !important;
 	accent-color: var(--bgl-accent-color);
@@ -1205,29 +1205,29 @@ p {
     8 #818181 /* few chars */
   ;
 }
-.preview-area[data-v-1cddc1b1]{
+.preview-area[data-v-9c94183b]{
 	font-family: "FontWithASyntaxHighlighter", monospace;
   	font-palette: --myCustomPalette;
 	background: var(--bgl-code-bg);
 	color: var(--bgl-code-color)
 }
-.rich-text-editor[data-v-1cddc1b1] {
+.rich-text-editor[data-v-9c94183b] {
 	background: var(--input-bg);
 	margin-bottom: 0.5rem;
 	width: 100%;
 }
-.editableContent[data-v-1cddc1b1]{
+.editableContent[data-v-9c94183b]{
 	min-height: 100%;
 	white-space: pre-wrap;
 	outline: none;
 }
-.content-area[data-v-1cddc1b1]{
+.content-area[data-v-9c94183b]{
 	background: var(--bgl-richtext-color);
 }
-.content-area[data-v-1cddc1b1], .preview-area[data-v-1cddc1b1]{
+.content-area[data-v-9c94183b], .preview-area[data-v-9c94183b]{
 	min-height: 200px;
 }
-.fullscreen-mode[data-v-1cddc1b1] {
+.fullscreen-mode[data-v-9c94183b] {
     position: fixed;
     top: 0;
     left: 0;
@@ -1239,14 +1239,14 @@ p {
     overflow: auto;
 	border-radius: 0;
 }
-.fullscreen-mode .content-area[data-v-1cddc1b1]{
+.fullscreen-mode .content-area[data-v-9c94183b]{
 	height: calc(100vh - 5rem);
 	padding: 4rem !important;
 	max-width: 900px;
 	margin-inline: auto ;
 	overflow-y: auto;
 }
-.fullscreen-mode .toolbar[data-v-1cddc1b1]{
+.fullscreen-mode .toolbar[data-v-9c94183b]{
 	max-width: 900px;
 	margin-inline: auto ;
 	/* border-bottom: 1px solid var(--border-color); */
@@ -1567,17 +1567,17 @@ p {
 	height: 30px;
 }
 
-.bagel-input.bgl-toggle[data-v-0a2b089d]{
+.bagel-input.bgl-toggle[data-v-683b2f6d]{
     display: unset !important;
 }
-.bagel-input.bgl-toggle[data-v-0a2b089d] *{
+.bagel-input.bgl-toggle[data-v-683b2f6d] *{
   cursor: pointer !important;
 }
-.bagel-input.bgl-toggle input[data-v-0a2b089d]{
+.bagel-input.bgl-toggle input[data-v-683b2f6d]{
     padding:  unset !important;
     min-width:  unset !important;
 }
-.bgl-toggle input[data-v-0a2b089d] {
+.bgl-toggle input[data-v-683b2f6d] {
     appearance: none;
     position: relative;
     display: inline-block;
@@ -1590,7 +1590,7 @@ p {
     transition: 0.25s linear all;
     outline: 1px solid var(--border-color);
 }
-.bgl-toggle input[data-v-0a2b089d]::before {
+.bgl-toggle input[data-v-683b2f6d]::before {
   position: absolute;
   content: "";
   height: calc(var(--input-height) / 2 - 2px);
@@ -1603,7 +1603,7 @@ p {
   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 label[data-v-0a2b089d] {
+.bgl-toggle label[data-v-683b2f6d] {
   padding-inline-start: 0.5rem;
   transition: var(--bgl-transition);
   cursor: pointer;
@@ -1611,30 +1611,30 @@ p {
   line-height: var(--input-height);
   font-size: var(--input-font-size);
 }
-.bgl-toggle label[data-v-0a2b089d]:hover {
+.bgl-toggle label[data-v-683b2f6d]:hover {
   filter: brightness(90%);
 }
-.bgl-toggle label[data-v-0a2b089d]:active {
+.bgl-toggle label[data-v-683b2f6d]:active {
   filter: var(--bgl-active-filter);
 }
-.bgl-toggle input[data-v-0a2b089d]:focus-visible {
+.bgl-toggle input[data-v-683b2f6d]:focus-visible {
     outline: -webkit-focus-ring-color auto 1px;
     outline-offset: 2px
 }
-.bgl-toggle input[data-v-0a2b089d]:focus {
+.bgl-toggle input[data-v-683b2f6d]:focus {
     outline-color: transparent;
 }
-.bgl-toggle input[data-v-0a2b089d]:focus-visible {
+.bgl-toggle input[data-v-683b2f6d]:focus-visible {
     outline: -webkit-focus-ring-color auto 1px;
     outline-offset: 2px
 }
-.bgl-toggle[data-v-0a2b089d] :checked{
+.bgl-toggle[data-v-683b2f6d] :checked{
   background: var(--bgl-primary);
 }
-.bgl-toggle[data-v-0a2b089d] :checked::before{
+.bgl-toggle[data-v-683b2f6d] :checked::before{
   margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
 }
-.bgl-toggle input:checked + label[data-v-0a2b089d] {
+.bgl-toggle input:checked + label[data-v-683b2f6d] {
     color: var(--bgl-primary) !important;
 }
 
@@ -1696,33 +1696,33 @@ p {
 	justify-content: flex-start !important;
 }
 
-.bgl_sidebar[data-v-6007d02b] {
+.bgl_sidebar[data-v-3ee4f3f7] {
 }
-.toggleNav[data-v-6007d02b] {
+.toggleNav[data-v-3ee4f3f7] {
 	height: 22px !important;
 	width: 22px !important;
 	transition: var(--bgl-transition);
 	top: 2rem;
 	inset-inline-end: -3px;
 }
-.toggleNav[data-v-6007d02b]:hover {
+.toggleNav[data-v-3ee4f3f7]:hover {
 	opacity: 1;
 }
-.wideNav .toggleNav[data-v-6007d02b] {
+.wideNav .toggleNav[data-v-3ee4f3f7] {
 	transform: rotate(180deg);
 }
-[dir='rtl'] .toggleNav[data-v-6007d02b] {
+[dir='rtl'] .toggleNav[data-v-3ee4f3f7] {
 	transform: rotate(180deg);
 }
-[dir='rtl'] .wideNav .toggleNav[data-v-6007d02b] {
+[dir='rtl'] .wideNav .toggleNav[data-v-3ee4f3f7] {
 	transform: rotate(0deg);
 }
-.showP-enter-active[data-v-6007d02b],
-.showP-leave-active[data-v-6007d02b] {
+.showP-enter-active[data-v-3ee4f3f7],
+.showP-leave-active[data-v-3ee4f3f7] {
   transition: all 0.5s ease;
 }
-.showP-enter-from[data-v-6007d02b],
-.showP-leave-to[data-v-6007d02b] {
+.showP-enter-from[data-v-3ee4f3f7],
+.showP-leave-to[data-v-3ee4f3f7] {
   opacity: 0;
   transform: translateX(-20px);
 }
@@ -3301,19 +3301,19 @@ tbody tr[data-v-680da9b9]:hover {
   -moz-user-drag: none;
 }
 
-.lightbox-image[data-v-d550287d]{
+.lightbox-image[data-v-68949c15]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-d550287d] {
+.bgl-lightbox-overlay[data-v-68949c15] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-d550287d] {
+.bgl-lightbox[data-v-68949c15] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-d550287d]{
-	animation: 500ms ease bgl-lightbox-load-d550287d;
+.bgl-lightbox-item[data-v-68949c15]{
+	animation: 500ms ease bgl-lightbox-load-68949c15;
 }
-@keyframes bgl-lightbox-load-d550287d {
+@keyframes bgl-lightbox-load-68949c15 {
 from {
     scale:0.7;
 }
@@ -3321,32 +3321,32 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-d550287d] * {
+.bgl-lightbox-item[data-v-68949c15] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-d550287d;
+	animation: 200ms ease bgl-lightbox-load-68949c15;
 }
-.navigation[data-v-d550287d] {
+.navigation[data-v-68949c15] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-d550287d] {
+.navigation-btn[data-v-68949c15] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-d550287d] {
+.thumbnail[data-v-68949c15] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-d550287d]:hover {
+.thumbnail[data-v-68949c15]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-d550287d]:active {
+.thumbnail[data-v-68949c15]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-d550287d] {
+.thumbnail.active[data-v-68949c15] {
 	opacity: 1;
 	outline: 2px solid white;
 }
@@ -3363,14 +3363,25 @@ to {
     height: 100vh;
 }
 .round {
+    border-radius: 1000px;
+}
+.rounded,
+.radius,
+.radius-1 {
     border-radius: var(--btn-border-radius) !important;
 }
-.rounded {
+.radius-05 {
     border-radius: calc(var(--btn-border-radius) / 2) !important;
 }
-.round-extra {
+.radius-2 {
     border-radius: calc(var(--btn-border-radius) * 2) !important;
 }
+.radius-3 {
+    border-radius: calc(var(--btn-border-radius) * 3) !important;
+}
+.radius-4 {
+    border-radius: calc(var(--btn-border-radius) * 4) !important;
+}
 .round-none {
     border-radius: 0;
 }
@@ -5161,17 +5172,31 @@ to {
     }
 
     .m_round {
+        border-radius: 1000px;
+    }
+
+    .m_rounded,
+    .m_radius,
+    .m_radius-1 {
         border-radius: var(--btn-border-radius) !important;
     }
 
-    .m_rounded {
+    .m_radius-05 {
         border-radius: calc(var(--btn-border-radius) / 2) !important;
     }
 
-    .m_round-extra {
+    .m_radius-2 {
         border-radius: calc(var(--btn-border-radius) * 2) !important;
     }
 
+    .m_radius-3 {
+        border-radius: calc(var(--btn-border-radius) * 3) !important;
+    }
+
+    .m_radius-4 {
+        border-radius: calc(var(--btn-border-radius) * 4) !important;
+    }
+
     .m_round-none {
         border-radius: 0 !important;
     }

package/package.json

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

package/src/components/Btn.vue

@@ -246,7 +246,7 @@ a {
 }
 
 .bgl_btn.round {
-  border-radius: calc(var(--btn-border-radius) * 2);
+  border-radius: 1000px;
 }
 
 .bgl_btn-icon.thin {

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

@@ -26,7 +26,7 @@ const selectedOption = defineModel('modelValue')
 		<label
 			v-for="opt in options"
 			:key="opt.id"
-			class="border round p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
+			class="border rounded p-1 flex bg-gray-light mb-05 gap-075 active-list-item hover"
 			:for="opt.id"
 		>
 			<input
@@ -40,7 +40,7 @@ const selectedOption = defineModel('modelValue')
 			<div class="flex w-100 gap-1 flex-wrap m_gap-05 m_gap-row-025">
 				<img
 					v-if="opt.imgSrc"
-					class="bg-popup shadow-light py-025 rounded m_w40"
+					class="bg-popup shadow-light py-025 radius-05 m_w40"
 					width="60"
 					:src="opt.imgSrc"
 					:alt="opt.imgAlt"

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -67,7 +67,7 @@ function handleSelectChange(selectedOption: string) {
 				thin
 				flat
 				:class="action.class"
-				class="rounded"
+				class="radius-05"
 				:aria-label="action.name"
 				:icon="action.icon"
 				@click="emit('action', action.name)"

package/src/components/form/inputs/RichText2/index.vue

@@ -134,10 +134,10 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
-	<div class="rich-text-editor round pt-05 px-1 pb-1">
+	<div class="rich-text-editor rounded pt-05 px-1 pb-1">
 		<Toolbar :config @action="handleToolbarAction" />
 		<div class="editor-container flex flex-stretch gap-1 m_column">
-			<div class="content-area rounded p-1 shadow-light w-100 grid">
+			<div class="content-area radius-05 p-1 shadow-light w-100 grid">
 				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
 				<div
 					v-else
@@ -151,7 +151,7 @@ function handleKeyDown(event: KeyboardEvent) {
 					@keydown="handleKeyDown"
 				/>
 			</div>
-			<code v-if="isSplitView" class="preview-area  w-100 rounded p-1">{{ contentHtml }}</code>
+			<code v-if="isSplitView" class="preview-area  w-100 radius-05 p-1">{{ contentHtml }}</code>
 		</div>
 	</div>
 </template>

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

@@ -26,7 +26,7 @@ onMounted(() => {
 		:class="{ small }"
 	>
 		<div class="switch" :class="{ checked }">
-			<span class="slider round" />
+			<span class="slider rounded" />
 		</div>
 
 		<input

package/src/components/formkit/Toggle.vue

@@ -14,7 +14,7 @@ const inputVal = defineModel('modelValue', {
 	<div class="bagel-input checkbox" :title="label">
 		<label class="switch">
 			<input :id="id" v-model="inputVal" type="checkbox">
-			<span class="slider round" />
+			<span class="slider rounded" />
 		</label>
 	</div>
 </template>

package/src/components/layout/SidebarMenu.vue

@@ -32,7 +32,7 @@ function toggleMenu() {
 			@click="toggleMenu"
 		/>
 		<Card
-			class="py-1 px-05 h-100 flex column gap-05 round relative bg-primary font-light overflow-y "
+			class="py-1 px-05 h-100 flex column gap-05 rounded relative bg-primary font-light overflow-y "
 		>
 			<slot v-if="!isOpen || !slots['brand-open']" name="brand" />
 			<slot v-if="isOpen" name="brand-open" />

package/src/components/layout/Tabs.vue

@@ -8,6 +8,7 @@ import { useTabs } from './tabsManager'
 const props = defineProps<{
 	tabs: Tab[]
 	modelValue?: string
+	flat?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -19,13 +20,15 @@ const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id)
 
 const slctTab = $computed({
 	get: () => props.modelValue || tabValue(props.tabs[0]),
-	set: (value) => { emit('update:modelValue', value) },
+	set: value => {
+		emit('update:modelValue', value)
+	},
 })
 
 const tabComponent = defineComponent({
 	render() {
 		const currentTabIndex = props.tabs.findIndex(
-			tab => tabValue(tab) === currentTab.value,
+			tab => tabValue(tab) === currentTab.value
 		)
 		if (currentTabIndex === -1) return null
 		const slotChildren = slots.default?.()[1]?.children
@@ -37,7 +40,7 @@ const tabComponent = defineComponent({
 
 z
 <template>
-	<TabsNav v-model="slctTab" :tabs :group class="mb-05" />
+	<TabsNav v-model="slctTab" :flat :tabs :group class="mb-05" />
 	<div v-if="currentTab">
 		<template v-if="slots[currentTab]">
 			<slot :name="currentTab" />

package/src/components/lightbox/Lightbox.vue

@@ -155,7 +155,7 @@ defineExpose({ open, close })
 						<img
 							v-if="item.type === 'image'"
 							class="thumbnail object-fit-cover hover
-							 opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0"
+							 opacity-5 rounded flex bg-popup justify-content-center align-items-center flex-shrink-0"
 							:src="item.src"
 							alt=""
 							:class="{ active: currentIndex === index }"
@@ -164,7 +164,7 @@ defineExpose({ open, close })
 						<Icon
 							v-else
 							class="thumbnail object-fit-cover hover
-							 opacity-5 round flex bg-popup justify-content-center align-items-center flex-shrink-0"
+							 opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0"
 							icon="description"
 							:class="{ active: currentIndex === index }"
 							@click="selectItem(index)"

package/src/styles/layout.css

@@ -11,18 +11,34 @@
     height: 100vh;
 }
 
+
 .round {
+    border-radius: 1000px;
+}
+
+.rounded,
+.radius,
+.radius-1 {
     border-radius: var(--btn-border-radius) !important;
 }
 
-.rounded {
+.radius-05 {
     border-radius: calc(var(--btn-border-radius) / 2) !important;
 }
 
-.round-extra {
+.radius-2 {
     border-radius: calc(var(--btn-border-radius) * 2) !important;
 }
 
+.radius-3 {
+    border-radius: calc(var(--btn-border-radius) * 3) !important;
+}
+
+.radius-4 {
+    border-radius: calc(var(--btn-border-radius) * 4) !important;
+}
+
+
 .round-none {
     border-radius: 0;
 }

package/src/styles/mobilLayout.css

@@ -35,17 +35,31 @@
     }
 
     .m_round {
+        border-radius: 1000px;
+    }
+
+    .m_rounded,
+    .m_radius,
+    .m_radius-1 {
         border-radius: var(--btn-border-radius) !important;
     }
 
-    .m_rounded {
+    .m_radius-05 {
         border-radius: calc(var(--btn-border-radius) / 2) !important;
     }
 
-    .m_round-extra {
+    .m_radius-2 {
         border-radius: calc(var(--btn-border-radius) * 2) !important;
     }
 
+    .m_radius-3 {
+        border-radius: calc(var(--btn-border-radius) * 3) !important;
+    }
+
+    .m_radius-4 {
+        border-radius: calc(var(--btn-border-radius) * 4) !important;
+    }
+
     .m_round-none {
         border-radius: 0 !important;
     }

package/src/utils/BagelFormUtils.ts

@@ -160,7 +160,7 @@ export function numField(
 export function frmRow(...children: Field[]) {
 	return {
 		$el: 'div',
-		class: 'flex gap-1 m_block',
+		class: 'flex gap-1 m_block align-items-end',
 		children,
 	}
 }