@bagelink/vue 1.2.79 → 1.2.81

package/dist/style.css

@@ -1134,32 +1134,30 @@ fieldset[data-v-f7e758e5] {
 .fi[data-v-f99f1900]:before{ content:" "
 }
 
-.bgl-multi-step-form[data-v-53bb3be3] {
+.bgl-multi-step-form[data-v-9c0b618c] {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
 	width: 100%;
 	/* Default transition duration */
-	--transition-duration: 200ms;
+	--transition-duration: 300ms;
 	--move-distance: 35%;
-	--ease-in: ease-in-out;
-	--ease-out: ease-in-out;
-	/* --ease-in: cubic-bezier(0.42, 0, 0.58, 1); */
-	/* --ease-out: cubic-bezier(0.5, 0, 0.75, 0); */
+	--ease-in: cubic-bezier(0.42, 0, 0.58, 1);
+	--ease-out: cubic-bezier(0.42, 0, 0.58, 1);
 }
-.bgl-steps-indicator[data-v-53bb3be3] {
+.bgl-steps-indicator[data-v-9c0b618c] {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 1rem;
 }
-.bgl-step-indicator[data-v-53bb3be3] {
+.bgl-step-indicator[data-v-9c0b618c] {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	position: relative;
 }
-.bgl-step-indicator[data-v-53bb3be3]::before {
+.bgl-step-indicator[data-v-9c0b618c]::before {
 	content: '';
 	position: absolute;
 	top: 50%;
@@ -1169,10 +1167,10 @@ fieldset[data-v-f7e758e5] {
 	background: #e0e0e0;
 	z-index: -1;
 }
-.bgl-step-indicator[data-v-53bb3be3]:first-child::before {
+.bgl-step-indicator[data-v-9c0b618c]:first-child::before {
 	display: none;
 }
-.bgl-step-indicator > span[data-v-53bb3be3]:first-child {
+.bgl-step-indicator > span[data-v-9c0b618c]:first-child {
 	width: 30px;
 	height: 30px;
 	border-radius: 50%;
@@ -1183,73 +1181,77 @@ fieldset[data-v-f7e758e5] {
 	justify-content: center;
 	margin-bottom: 0.5rem;
 }
-.bgl-step-indicator.active > span[data-v-53bb3be3]:first-child {
+.bgl-step-indicator.active > span[data-v-9c0b618c]:first-child {
 	background: var(--primary-color, #4CAF50);
 	color: white;
 }
-.bgl-step-indicator.completed > span[data-v-53bb3be3]:first-child {
+.bgl-step-indicator.completed > span[data-v-9c0b618c]:first-child {
 	background: var(--success-color, #8BC34A);
 	color: white;
 }
-.bgl-step-indicator.clickable[data-v-53bb3be3] {
+.bgl-step-indicator.clickable[data-v-9c0b618c] {
 	cursor: pointer;
 }
-.bgl-step-label[data-v-53bb3be3] {
+.bgl-step-label[data-v-9c0b618c] {
 	font-size: 0.8rem;
 	max-width: 100px;
 	text-align: center;
 }
-.bgl-form-wrapper[data-v-53bb3be3] {
+.bgl-form-wrapper[data-v-9c0b618c] {
 	display: grid;
 	overflow: clip;
 	height: auto;
 	transition: height var(--transition-duration) ease;
 	interpolate-size: allow-keywords;
 }
-.bgl-form-wrapper > div[data-v-53bb3be3] {
+.bgl-form-wrapper > div[data-v-9c0b618c] {
 	grid-area: 1 / 1;
 }
-.bgl-form-container[data-v-53bb3be3] {
+.bgl-form-container[data-v-9c0b618c] {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 }
-.bgl-step-controls[data-v-53bb3be3] {
+.bgl-step-controls[data-v-9c0b618c] {
 	display: flex;
 	justify-content: center;
 	gap: 1rem;
 	grid-area: unset !important;
+	margin-top: 2rem;
 }
 
 /* Slide Left Animation (going forward) */
-.slide-left-enter-active[data-v-53bb3be3] {
-	transition: opacity, transform calc(var(--transition-duration) * 1.2) var(--ease-in);
+.slide-left-enter-active[data-v-9c0b618c] {
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
-.slide-left-leave-active[data-v-53bb3be3] {
-	transition: opacity, transform var(--transition-duration) var(--ease-out);
+.slide-left-leave-active[data-v-9c0b618c] {
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
-.slide-left-enter-from[data-v-53bb3be3] {
+.slide-left-enter-from[data-v-9c0b618c] {
 	opacity: 0;
 	transform: translateX(var(--move-distance));
 }
-.slide-left-leave-to[data-v-53bb3be3] {
+.slide-left-leave-to[data-v-9c0b618c] {
 	opacity: 0;
 	transform: translateX(-30%);
 }
 
 /* Slide Right Animation (going back) */
-.slide-right-enter-active[data-v-53bb3be3] {
-	transition: all calc(var(--transition-duration) * 1.2) var(--ease-in);
+.slide-right-enter-active[data-v-9c0b618c] {
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
-.slide-right-leave-active[data-v-53bb3be3] {
-	transition: all var(--transition-duration) var(--ease-out);
-	transition-property: opacity, transform;
+.slide-right-leave-active[data-v-9c0b618c] {
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
-.slide-right-enter-from[data-v-53bb3be3] {
+.slide-right-enter-from[data-v-9c0b618c] {
 	opacity: 0;
 	transform: translateX(-30%);
 }
-.slide-right-leave-to[data-v-53bb3be3] {
+.slide-right-leave-to[data-v-9c0b618c] {
 	opacity: 0;
 	transform: translateX(var(--move-distance));
 }
@@ -1370,42 +1372,78 @@ fieldset[data-v-f7e758e5] {
     color: var(--label-color) !important;
 }
 
-pre code.hljs{
+/* Global styles */
+pre code.hljs {
 	padding: 0 !important;
-	inset: 0 !important;
-	position: absolute;
+	background: transparent !important;
 }
 
-.codeText[data-v-13335b34]{
-  font-family: monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  caret-color: var(--bgl-white);
-  color: var(--bgl-white);
+.code-editor-container[data-v-6ab9613f] {
+	margin-bottom: 0.5rem;
+	height: 100%;
 }
-.code-editor-wrap[data-v-13335b34] {
-  background: #282c34;
-  height: max-content;
+.label[data-v-6ab9613f] {
+	display: block;
+	text-align: left;
+	margin-bottom: 0.25rem;
 }
-.code-editor-wrap[data-v-13335b34]:focus-within, .code-editor-wrap[data-v-13335b34]:focus-visible, .code-editor-wrap[data-v-13335b34]:focus {
-    box-shadow: inset 0 0 10px #00000021;
-	outline: solid 1px var(--border-color);
-	/* outline: -webkit-focus-ring-color auto 1px; */
+.code-editor-grandpa[data-v-6ab9613f] {
+	background: #22252A;
+	border-radius: 0.25rem;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	padding: 1ch;
+	padding-inline-start: 2ch;
 }
-.code-editor-wrap:focus-within:has(textarea:focus) + .label[data-v-13335b34],
-.label[data-v-13335b34]:has(+ .code-editor-wrap:focus-within) {
-	color: var(--bgl-primary) !important;
+.code-editor-grandpa[data-v-6ab9613f]:focus-within {
+	outline: solid 1px var(--border-color, #4f575f);
+	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
 }
-.code-editor[data-v-13335b34] {
-  color: transparent;
-  resize: none;
+.editor-content-papa[data-v-6ab9613f] {
+	position: relative;
+	width: 100%;
+	padding-bottom: calc(100% - 5lh);
 }
-.code-editor[data-v-13335b34]::selection {
-  background: #2466bc30;
-  color: inherit;
+.code-display[data-v-6ab9613f],
+.code-input[data-v-6ab9613f] {
+	inset: 0;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	font-family: monospace;
+	font-size: 1em;
+	line-height: 1.5;
+	tab-size: 2;
+	word-break: keep-all;
+	text-align: left;
 }
-.code-editor[data-v-13335b34]:focus {
-  outline: none;
+.code-display[data-v-6ab9613f] {
+	position: relative;
+	color:  #fff;
+	pointer-events: none;
+	z-index: 1;
+}
+.code-display code[data-v-6ab9613f] {
+	display: block;
+	background: transparent !important;
+	padding: 0 !important;
+}
+.code-input[data-v-6ab9613f] {
+	position: absolute;
+	background: transparent;
+	color: transparent;
+	caret-color:  #fff;
+	border: none;
+	resize: none;
+	outline: none;
+	z-index: 2;
+}
+.code-input[data-v-6ab9613f]::selection {
+	background-color: rgba(36, 102, 188, 0.3);
+	color: transparent;
 }
 
 .colorInputPick{
@@ -2008,32 +2046,27 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 .content-area li{
 	line-height: 1.65;
 }
-.code-editor {
-	flex: 1;
-	min-height: 240px !important;
-	height: 100%;
-}
 
-.rich-text-editor[data-v-30bcda4c] {
+.rich-text-editor[data-v-2782b5dd] {
 	background: var(--input-bg);
 	border: 1px solid var(--border-color);
 	transition: all 0.3s ease;
 }
-.editor-container[data-v-30bcda4c] {
+.editor-container[data-v-2782b5dd] {
 	display: flex;
-	gap: 1rem;
+	gap: 0.5rem;
 }
-.content-area[data-v-30bcda4c],
-.preview-area[data-v-30bcda4c] {
+.content-area[data-v-2782b5dd],
+.preview-area[data-v-2782b5dd] {
 	flex: 1;
 	min-height: 200px;
 	background: var(--bgl-richtext-color);
 }
-.split-view[data-v-30bcda4c] {
+.split-view[data-v-2782b5dd] {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 }
-.editableContent[data-v-30bcda4c] {
+.editableContent[data-v-2782b5dd] {
 	width: 100%;
 	min-height: 240px;
 	height: 100%;
@@ -2041,7 +2074,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	outline: none;
 	background: transparent;
 }
-.html-editor[data-v-30bcda4c] {
+.html-editor[data-v-2782b5dd] {
 	width: 100%;
 	height: 100%;
 	min-height: 200px;
@@ -2052,12 +2085,12 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	color: white;
 	background-color: var(--bgl-black);
 }
-.preview-area[data-v-30bcda4c] {
+.preview-area[data-v-2782b5dd] {
 	font-family: monospace;
 	white-space: pre-wrap;
 	overflow-x: auto;
 }
-.fullscreen-mode[data-v-30bcda4c] {
+.fullscreen-mode[data-v-2782b5dd] {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -2066,18 +2099,15 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	z-index: 9999;
 	padding: 2rem;
 }
-.fullscreen-mode .editor-container[data-v-30bcda4c] {
+.fullscreen-mode .editor-container[data-v-2782b5dd] {
 	height: calc(100vh - 4rem);
 }
-.fullscreen-mode .content-area[data-v-30bcda4c],
-.fullscreen-mode .preview-area[data-v-30bcda4c] {
+.fullscreen-mode .content-area[data-v-2782b5dd],
+.fullscreen-mode .preview-area[data-v-2782b5dd] {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor[data-v-30bcda4c]{
-	height: 100% !important;
-}
-.debug-controls[data-v-30bcda4c] {
+.debug-controls[data-v-2782b5dd] {
 	display: flex;
 	gap: 0.5rem;
 	justify-content: flex-end;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAIrE,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,EAC7C,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EACxB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC;;EAwBP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,GAAI,YAAY,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,OAAO,CAAC,EAAE,MAAM,EAAE,GAChB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAO5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAM5C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAIrE,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,EAC7C,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EACxB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC;;EAwBP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,GAAI,YAAY,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,OAAO,CAAC,EAAE,MAAM,EAAE,GAChB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAKD,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CA0CxF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAO5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAM5C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F"}

package/package.json

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

package/src/components/form/BagelForm.vue

@@ -111,6 +111,7 @@ function updateFormData(fieldId: string, value: any) {
 
 // Form validation
 const validateForm = () => form.value?.reportValidity() ?? false
+const checkValidity = () => form.value?.checkValidity() ?? false
 const formError = ref<Error>()
 // Form submission
 async function handleSubmit() {
@@ -156,7 +157,7 @@ function handleSlotInputChange(event: Event) {
 	}
 }
 
-defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema })
+defineExpose({ form, isDirty, validateForm, resolveSchema, refreshSchema, checkValidity })
 </script>
 
 <template>

package/src/components/form/BglMultiStepForm.vue

@@ -2,8 +2,8 @@
 import type { BglFormSchemaFnT } from '@bagelink/vue'
 
 import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers'
-import { BagelForm, Btn, useBglSchema } from '@bagelink/vue'
-import { ref, watch, computed } from 'vue'
+import { BagelForm, Btn, useBglSchema, sleep } from '@bagelink/vue'
+import { ref, watch, computed, nextTick } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -13,7 +13,7 @@ const props = withDefaults(
 			'schema' | `${string}modelValue` | `ref${string}` | `onVnode${string}` | 'onSubmit'
 			)
 		>
-		schema: BglFormSchemaFnT<T>
+		schema?: BglFormSchemaFnT<T>
 		showProgress?: boolean
 		rtl?: boolean
 		stepLabels?: string[]
@@ -119,9 +119,6 @@ const currentStepSchema = computed(() => {
 	return [computedSchema.value[actualIndex]]
 })
 
-const isStepping = ref(false)
-let isSteppingTO: NodeJS.Timeout
-
 // Tracks which way we're sliding (left or right)
 const slideDirection = ref(props.rtl ? 'right' : 'left')
 
@@ -138,9 +135,7 @@ watch(
 		}
 
 		previousStep.value = oldStep
-		clearTimeout(isSteppingTO)
-		isStepping.value = true
-		isSteppingTO = setTimeout(() => (isStepping.value = false), 200)
+		// We don't need isStepping flag anymore
 		emits('stepChange', {
 			newStep,
 			oldStep,
@@ -150,19 +145,32 @@ watch(
 	}
 )
 
-const canDoNext = computed(() => currentStep.value < numberOfSteps.value - 1)
+const isLastStep = computed(() => currentStep.value === numberOfSteps.value - 1)
 
 const isStepValidated = computed(() => (stepIndex: number) => validatedSteps.value.includes(stepIndex))
 
+// Add a computed property to check if current step is valid
+const isStepValid = ref(false)
+
+async function checkCurrentStepValidity() {
+	await nextTick()
+	if (!props.validateOnSteps) isStepValid.value = true
+	else isStepValid.value = formRef.value?.checkValidity() ?? false
+}
+
 function prevStep() {
 	if (currentStep.value > 0) currentStep.value--
 }
 
 const formContainer = ref<HTMLElement>()
 
-function nextStep() {
+async function nextStep() {
+	// Always use reportValidity when attempting to move to next step
+	// This will show validation errors to the user
 	if (props.validateOnSteps && reportValidity() === false) return
-	if (canDoNext.value) currentStep.value++
+	if (!isLastStep.value) currentStep.value++
+	await sleep(400)
+	checkCurrentStepValidity()
 }
 
 function goToStep(stepIndex: number) {
@@ -173,6 +181,7 @@ function goToStep(stepIndex: number) {
 	}
 
 	// For forward navigation to non-validated steps, validate current step first if needed
+	// This will show validation errors to the user
 	if (props.validateOnSteps && reportValidity() === false) {
 		return false
 	}
@@ -187,6 +196,7 @@ function goToStep(stepIndex: number) {
 }
 
 function handleSubmit() {
+	// Show validation errors to the user when submitting
 	if (reportValidity() === false) return
 	emits('submit', formData.value)
 }
@@ -194,15 +204,11 @@ function handleSubmit() {
 function reset() {
 	validatedSteps.value = []
 	currentStep.value = 0
-	// Clear form if BagelForm supports it
-	// if (formRef.value && typeof formRef.value.clearForm === 'function') {
-	// 	formRef.value.clearForm()
-	// }
 }
 
 // Re-evaluate filtered steps when formData changes
 watch(() => formData.value, () => {
-	// If current step index is now invalid after filtering, reset to first valid step
+	checkCurrentStepValidity()
 	if (currentStep.value >= numberOfSteps.value && numberOfSteps.value > 0) {
 		currentStep.value = 0
 	}
@@ -211,11 +217,13 @@ watch(() => formData.value, () => {
 defineExpose({
 	submit: handleSubmit,
 	validateForm: reportValidity,
+	checkValidity: formRef.value?.checkValidity,
 	isDirty: computed(() => formRef.value?.isDirty),
 	reset,
 	goToStep,
 	currentStep: computed(() => currentStep.value),
 	totalSteps: computed(() => numberOfSteps.value),
+	isStepValid,
 	nextStep,
 	prevStep,
 })
@@ -260,7 +268,7 @@ defineExpose({
 				:name="slideDirection === 'right' ? 'slide-right' : 'slide-left'"
 				mode="out-in"
 			>
-				<div v-if="!isStepping" :key="currentStep" ref="formContainer" class="bgl-form-container">
+				<div :key="currentStep" ref="formContainer" class="bgl-form-container">
 					<BagelForm
 						ref="formRef"
 						v-model="formData"
@@ -286,11 +294,17 @@ defineExpose({
 						submit: handleSubmit,
 						currentStep,
 						totalSteps: numberOfSteps,
-						canDoNext,
+						isLastStep,
+						isStepValid,
 					}"
 				>
-					<Btn v-if="currentStep !== 0" color="gray" icon="arrow_back" click="prevStep" />
-					<Btn v-if="canDoNext" icon="arrow_forward" @click="nextStep" />
+					<Btn v-if="currentStep !== 0" color="gray" icon="arrow_back" @click="prevStep" />
+					<Btn
+						v-if="!isLastStep"
+						icon="arrow_forward"
+						:disabled="props.validateOnSteps && !isStepValid"
+						@click="nextStep"
+					/>
 					<Btn v-else value="Submit" @click="handleSubmit" />
 				</slot>
 			</div>
@@ -305,12 +319,10 @@ defineExpose({
 	gap: 1rem;
 	width: 100%;
 	/* Default transition duration */
-	--transition-duration: 200ms;
+	--transition-duration: 300ms;
 	--move-distance: 35%;
-	--ease-in: ease-in-out;
-	--ease-out: ease-in-out;
-	/* --ease-in: cubic-bezier(0.42, 0, 0.58, 1); */
-	/* --ease-out: cubic-bezier(0.5, 0, 0.75, 0); */
+	--ease-in: cubic-bezier(0.42, 0, 0.58, 1);
+	--ease-out: cubic-bezier(0.42, 0, 0.58, 1);
 }
 
 .bgl-steps-indicator {
@@ -398,16 +410,18 @@ defineExpose({
 	justify-content: center;
 	gap: 1rem;
 	grid-area: unset !important;
-
+	margin-top: 2rem;
 }
 
 /* Slide Left Animation (going forward) */
 .slide-left-enter-active {
-	transition: opacity, transform calc(var(--transition-duration) * 1.2) var(--ease-in);
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
 
 .slide-left-leave-active {
-	transition: opacity, transform var(--transition-duration) var(--ease-out);
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
 
 .slide-left-enter-from {
@@ -422,12 +436,13 @@ defineExpose({
 
 /* Slide Right Animation (going back) */
 .slide-right-enter-active {
-	transition: all calc(var(--transition-duration) * 1.2) var(--ease-in);
+	transition: opacity var(--transition-duration) var(--ease-in),
+	            transform var(--transition-duration) var(--ease-in);
 }
 
 .slide-right-leave-active {
-	transition: all var(--transition-duration) var(--ease-out);
-	transition-property: opacity, transform;
+	transition: opacity var(--transition-duration) var(--ease-out),
+	            transform var(--transition-duration) var(--ease-out);
 }
 
 .slide-right-enter-from {