@unvired/turboforms-embed-sdk 1.0.21 → 1.0.23

package/README.md

@@ -251,7 +251,9 @@ document.addEventListener('deviceready', function() {
 | `GET_ATTACHMENT` | Attachment request |
 | `ERROR` | Error occurred |
 
-## ✅ Button Visibility & Enablement
+## ✅ Button Visibility & Enablement (Normal Forms)
+
+The following rules apply to standard (non-wizard) forms:
 
 | privateExternal    | Permission      | Main Toolbar Button        | More Options (Dropdown)         | Enable / Disable Rule                              |
 | ------------------ | --------------- | -------------------------- | ------------------------------- | -------------------------------------------------- |
@@ -261,6 +263,18 @@ document.addEventListener('deviceready', function() {
 | **true (Private)** | `writesingle`   | **Complete** (`submitBtn`) | **Save** (`saveOption`)         | Complete enabled **ONLY when form is 100% filled** |
 | **Any**            | `read`          | None                       | None                            | N/A (Read-only mode)                               |
 
+## 🧙 Wizard Form Navigation & Visibility
+
+For Wizard forms, the standard action buttons are managed per-page to prioritize navigation:
+
+| Page Status | Action Buttons (Save/Complete) | Navigation Buttons | Action Menu (More Options) |
+| :--- | :--- | :--- | :--- |
+| **Intermediate Steps** | **Hidden** | **Previous**, **Next** | **Help** / **Comments** (if enabled) |
+| **Final Step** | **Visible** (Follows standard rules above) | **Previous** | **All Actions** (Follows standard rules above) |
+
+* **Intermediate Steps**: To ensure a clean experience, the SDK automatically hides all final submission actions (buttons, icons, and "More" dropdown items) until the user reaches the end of the wizard.
+* **Final Step**: Once the user reaches the last page, the standard logic defined in the table above is applied. The **Next** button is replaced by the appropriate **Save** or **Complete** action based on permissions and form state.
+
 ## 🧭 “More Options” Dropdown Logic
 
 ### ▶ **Complete appears in More Options**

package/dist/unvired-form-sdk.html

@@ -513,12 +513,16 @@ body {
   box-sizing: border-box;
   background-color: #f5f5f5;
   font-family: Arial, sans-serif;
+  overflow: hidden; /* Prevent window from scrolling */
 }
 
 .formio-wrapper {
   border: 1px solid #ccc;
   background-color: #fff;
   border-radius: 8px;
+  overflow-y: auto; /* Enable internal scrolling */
+  -webkit-overflow-scrolling: touch;
+  height: 100%; /* Fill space */
 }
 
 #progressContainer {
@@ -1084,15 +1088,34 @@ body {
   }
 
   /* Add buffer at bottom to allow last components to scroll above the keyboard */
-  #form-container {
-    padding-bottom: 500px !important;
+  #formio-wrapper {
+    padding-bottom: 800px !important;
   }
 
-  /* Ensure DataGrid rows allow dropdowns to overflow now that we disabled fixed positioning on iOS */
-  .formio-component-datagrid .ui.table tr,
-  .formio-component-datagrid .ui.table td {
+  /* Logically add space below the select when opened to allow scrolling the last row higher */
+  .choices.is-open {
+    margin-bottom: 800px !important;
     overflow: visible !important;
   }
+
+  /* Prevent dropdown from being layered behind table headers or other rows */
+  .choices__list--dropdown {
+    z-index: 10000 !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Ensure the internal list doesn't have its own scrollbar/max-height that clips items */
+  .choices__list--dropdown .choices__list {
+    max-height: none !important;
+    overflow: visible !important;
+    padding-bottom: 20px !important;
+  }
+
+  /* Add extra space for the last item to ensure it's not clipped on iOS */
+  .choices__list--dropdown .choices__item:last-child {
+    padding-bottom: 20px !important;
+  }
 }</style>
     <style>.r6o-drawing{cursor:none}.r6o-relations-layer.readonly .handle rect{pointer-events:none}.r6o-relations-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.r6o-relations-layer circle{stroke:#515151;stroke-width:.4;fill:#3f3f3f}.r6o-relations-layer path{stroke:#595959;stroke-linecap:round;stroke-linejoin:round;fill:transparent}.r6o-relations-layer path.connection{stroke-width:1.6;stroke-dasharray:2,3}.r6o-relations-layer path.r6o-arrow{stroke-width:1.8;fill:#7f7f7f}.r6o-relations-layer .handle rect{stroke-width:1;stroke:#595959;fill:#fff;pointer-events:auto;cursor:pointer}.r6o-relations-layer .handle text{font-size:10px}.r6o-relations-layer .hover{stroke:rgba(63,63,63,.9);stroke-width:1.4;fill:transparent}
 .r6o-btn{background-color:#4483c4;border:1px solid #4483c4;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-size:14px;margin:0;outline:none;text-decoration:none;white-space:nowrap;padding:6px 18px;min-width:70px;vertical-align:middle;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.r6o-btn *{vertical-align:middle;cursor:pointer}.r6o-btn .r6o-icon{margin-right:4px}.r6o-btn:disabled{border-color:#a3c2e2 !important;background-color:#a3c2e2 !important}.r6o-btn:hover{background-color:#4f92d7;border-color:#4f92d7}.r6o-btn.outline{border:1px solid #4483c4;color:#4483c4;background-color:transparent;text-shadow:none}.r6o-autocomplete{display:inline;position:relative}.r6o-autocomplete div[role=combobox]{display:inline}.r6o-autocomplete input{outline:none;border:none;width:80px;height:100%;line-height:14px;white-space:pre;box-sizing:border-box;background-color:transparent;font-size:14px;color:#3f3f3f}.r6o-autocomplete ul{position:absolute;margin:0;padding:0;list-style-type:none;background-color:#fff;border-radius:3px;border:1px solid #d6d7d9;box-sizing:border-box;box-shadow:0 0 20px rgba(0,0,0,.25)}.r6o-autocomplete ul:empty{display:none}.r6o-autocomplete li{box-sizing:border-box;padding:2px 12px;width:100%;cursor:pointer}.r6o-editable-text{max-height:120px;overflow:auto;outline:none;min-height:2em;font-size:14px;font-family:"Lato",sans-serif}.r6o-editable-text:empty:not(:focus):before{content:attr(data-placeholder);color:#c2c2c2}.r6o-widget.comment{font-size:14px;min-height:3em;background-color:#fff;position:relative}.r6o-widget.comment .r6o-editable-text,.r6o-widget.comment .r6o-readonly-comment{padding:10px;width:100%;box-sizing:border-box;outline:none;border:none;background-color:transparent;resize:none}.r6o-widget.comment .r6o-readonly-comment{white-space:pre}.r6o-widget.comment .r6o-editable-text::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text::-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-moz-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-editable-text:-ms-input-placeholder{color:#c2c2c2}.r6o-widget.comment .r6o-lastmodified{border:1px solid #e5e5e5;display:inline-block;border-radius:2px;margin:0 10px 8px 10px;padding:4px 5px;line-height:100%;font-size:12px}.r6o-widget.comment .r6o-lastmodified .r6o-lastmodified-at{color:#757575;padding-left:3px}.r6o-widget.comment .r6o-arrow-down{position:absolute;height:20px;width:20px;top:9px;right:9px;line-height:22px;background-color:#fff;text-align:center;-webkit-font-smoothing:antialiased;border:1px solid #e5e5e5;cursor:pointer;-webkit-border-radius:1px;-khtml-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.r6o-widget.comment .r6o-arrow-down.r6o-menu-open{border-color:#4483c4}.r6o-widget.comment .r6o-comment-dropdown-menu{position:absolute;top:32px;right:8px;background-color:#fff;border:1px solid #e5e5e5;list-style-type:none;margin:0;padding:5px 0;z-index:9999;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);-moz-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2)}.r6o-widget.comment .r6o-comment-dropdown-menu li{padding:0 15px;cursor:pointer}.r6o-widget.comment .r6o-comment-dropdown-menu li:hover{background-color:#ecf0f1}.r6o-widget.comment .r6o-purposedropdown{position:relative;z-index:2}.r6o-widget.comment.editable{background-color:#ecf0f1}.r6o-widget.r6o-tag:empty{display:none}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){.r6o-widget.tag .r6o-taglist li{height:27px}.r6o-widget.tag .r6o-taglist li .r6o-delete-wrapper .r6o-delete{position:relative;top:-4px}}.r6o-widget.r6o-tag{background-color:#ecf0f1;border-bottom:1px solid #e5e5e5;padding:1px 3px;display:flex}.r6o-widget.r6o-tag ul{margin:0;padding:0;list-style-type:none;z-index:1}.r6o-widget.r6o-tag ul.r6o-taglist{flex:0;white-space:nowrap}.r6o-widget.r6o-tag ul.r6o-taglist li{margin:0;display:inline-block;margin:1px 1px 1px 0;padding:0;vertical-align:middle;overflow:hidden;font-size:12px;background-color:#fff;border:1px solid #d6d7d9;cursor:pointer;position:relative;line-height:180%;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 4px rgba(0,0,0,.1);-moz-box-shadow:0 0 4px rgba(0,0,0,.1);box-shadow:0 0 4px rgba(0,0,0,.1)}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-label{padding:2px 8px;display:inline-block}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper{display:inline-block;padding:2px 0;color:#fff;width:0;height:100%;background-color:#4483c4;-webkit-border-top-right-radius:2px;-webkit-border-bottom-right-radius:2px;-khtml-border-radius-topright:2px;-khtml-border-radius-bottomright:2px;-moz-border-radius-topright:2px;-moz-border-radius-bottomright:2px;border-top-right-radius:2px;border-bottom-right-radius:2px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper .r6o-delete{padding:2px 6px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-wrapper svg{vertical-align:text-top}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-active{width:24px;transition:width 200ms}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-enter-done{width:24px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit{width:24px}.r6o-widget.r6o-tag ul.r6o-taglist li .r6o-delete-exit-active{width:0;transition:width 200ms}.r6o-widget.r6o-tag .r6o-autocomplete{flex:1;position:relative}.r6o-widget.r6o-tag .r6o-autocomplete li{font-size:14px}.r6o-widget.r6o-tag input{width:100%;padding:0 3px;min-width:80px;outline:none;border:none;line-height:170%;background-color:transparent;color:#3f3f3f}.r6o-widget.r6o-tag input::-webkit-input-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input::-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-moz-placeholder{color:#c2c2c2}.r6o-widget.r6o-tag input:-ms-input-placeholder{color:#c2c2c2}.r6o-editor{position:absolute;z-index:99999;width:400px;color:#3f3f3f;opacity:0;font-family:"Lato",sans-serif;font-size:17px;line-height:27px;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;transition:opacity .2s ease-in}.r6o-editor .r6o-arrow{position:absolute;overflow:hidden;top:-12px;left:12px;width:28px;height:12px;display:none}.r6o-editor .r6o-arrow:after{content:"";position:absolute;top:5px;left:5px;width:18px;height:18px;background-color:#fff;-webkit-backface-visibility:hidden;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.r6o-editor .r6o-editor-inner{background-color:#fff;-webkit-border-radius:2px;-khtml-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:2px 2px 42px rgba(0,0,0,.4);-moz-box-shadow:2px 2px 42px rgba(0,0,0,.4);box-shadow:2px 2px 42px rgba(0,0,0,.4)}.r6o-editor .r6o-editor-inner .r6o-widget:first-child{-webkit-border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-khtml-border-radius-topleft:2px;-khtml-border-radius-topright:2px;-moz-border-radius-topleft:2px;-moz-border-radius-topright:2px;border-top-left-radius:2px;border-top-right-radius:2px}.r6o-editor .r6o-editor-inner .r6o-widget{border-bottom:1px solid #e5e5e5}.r6o-editor .r6o-footer{position:relative;text-align:right;padding:8px 0}.r6o-editor .r6o-footer .r6o-btn{margin-right:8px}.r6o-editor .r6o-footer .r6o-btn.delete-annotation{position:absolute;top:7px;left:7px;background-color:transparent;border:none;color:#4483c4;width:32px;height:32px;min-width:0;border-radius:100%;padding:0;display:flex;justify-content:center;align-items:center;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in}.r6o-editor .r6o-footer .r6o-btn.delete-annotation:hover{color:#fff;background-color:#ef352c}@media(max-width: 640px){.r6o-editor{width:260px}}.r6o-editor.r6o-arrow-top .r6o-arrow{display:block}.r6o-editor.r6o-arrow-right{margin-left:8px}.r6o-editor.r6o-arrow-right .r6o-arrow{left:auto;right:12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow{display:block;top:auto;bottom:-12px}.r6o-editor.r6o-arrow-bottom .r6o-arrow::after{top:-11px;box-shadow:none}.r6o-editor.pushed .r6o-arrow,.r6o-editor.dragged .r6o-arrow{display:none}.r6o-editor .r6o-draggable{cursor:move}.r6o-purposedropdown{width:150px;display:inline-block}.r6o-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.r6o-editor{margin-left:-12px}.r6o-annotation{background-color:rgba(255,165,0,.2);border-bottom:2px solid orange;cursor:pointer}.r6o-selection{background-color:rgba(207,207,255,.63);cursor:pointer}.r6o-hide-selection::selection,.r6o-hide-selection ::selection{background:transparent}.r6o-hide-selection::-moz-selection .r6o-hide-selection ::-moz-selection{background:transparent}.r6o-relation-editor{position:absolute;font-family:"Lato",sans-serif;font-size:17px;line-height:27px;-webkit-box-shadow:0 1px 14px rgba(0,0,0,.4);-moz-box-shadow:0 1px 14px rgba(0,0,0,.4);box-shadow:0 1px 14px rgba(0,0,0,.4);-webkit-border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;border-radius:3px;transform:translate(-50%, -50%);background-color:#fff}.r6o-relation-editor svg{vertical-align:middle;shape-rendering:geometricPrecision}.r6o-relation-editor *{box-sizing:border-box}.r6o-relation-editor .input-wrapper{height:34px;padding:0 6px;margin-right:68px;font-size:14px;background-color:#ecf0f1;cursor:text;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-khtml-border-radius-topleft:3px;-khtml-border-radius-bottomleft:3px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}.r6o-relation-editor .input-wrapper .r6o-autocomplete ul{position:relative;left:-6px}.r6o-relation-editor .buttons{position:absolute;display:inline-flex;top:0;right:0}.r6o-relation-editor .buttons span{height:34px;display:inline-block;width:34px;text-align:center;font-size:14px;cursor:pointer;padding:1px 0}.r6o-relation-editor .buttons .delete{background-color:#fff;color:#9ca4b1;border-left:1px solid #e5e5e5}.r6o-relation-editor .buttons .delete:hover{background-color:#f6f6f6}.r6o-relation-editor .buttons .ok{background-color:#4483c4;color:#fff;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-khtml-border-radius-topright:3px;-khtml-border-radius-bottomright:3px;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}.r6o-relation-editor .buttons .ok:hover{background-color:#4f92d7}
@@ -40578,12 +40601,16 @@ body {
   box-sizing: border-box;
   background-color: #f5f5f5;
   font-family: Arial, sans-serif;
+  overflow: hidden; /* Prevent window from scrolling */
 }
 
 .formio-wrapper {
   border: 1px solid #ccc;
   background-color: #fff;
   border-radius: 8px;
+  overflow-y: auto; /* Enable internal scrolling */
+  -webkit-overflow-scrolling: touch;
+  height: 100%; /* Fill space */
 }
 
 #progressContainer {
@@ -41149,15 +41176,34 @@ body {
   }
 
   /* Add buffer at bottom to allow last components to scroll above the keyboard */
-  #form-container {
-    padding-bottom: 500px !important;
+  #formio-wrapper {
+    padding-bottom: 800px !important;
   }
 
-  /* Ensure DataGrid rows allow dropdowns to overflow now that we disabled fixed positioning on iOS */
-  .formio-component-datagrid .ui.table tr,
-  .formio-component-datagrid .ui.table td {
+  /* Logically add space below the select when opened to allow scrolling the last row higher */
+  .choices.is-open {
+    margin-bottom: 800px !important;
     overflow: visible !important;
   }
+
+  /* Prevent dropdown from being layered behind table headers or other rows */
+  .choices__list--dropdown {
+    z-index: 10000 !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Ensure the internal list doesn't have its own scrollbar/max-height that clips items */
+  .choices__list--dropdown .choices__list {
+    max-height: none !important;
+    overflow: visible !important;
+    padding-bottom: 20px !important;
+  }
+
+  /* Add extra space for the last item to ensure it's not clipped on iOS */
+  .choices__list--dropdown .choices__item:last-child {
+    padding-bottom: 20px !important;
+  }
 }</style>
 
     <script>
@@ -47063,16 +47109,9 @@ var Choices = /** @class */function () {
     requestAnimationFrame(function () {
       _this.dropdown.show();
       _this.containerOuter.open(_this.dropdown.distanceFromTopWindow);
-      if (!preventInputFocus && _this._canSearch) {
-        // On iOS, delay focus slightly to ensure the keyboard has time to reset/close from previous field
-        if (window.platform && window.platform.iosPlatform) {
-          setTimeout(() => {
-            _this.input.focus({ preventScroll: true });
-          }, 150);
-        } else {
+        if (!preventInputFocus && _this._canSearch) {
           _this.input.focus({ preventScroll: true });
         }
-      }
       _this.passedElement.triggerEvent(constants_1.EVENTS.showDropdown, {});
     });
     return this;
@@ -54697,12 +54736,16 @@ class SmartSelectComponent extends SmartSelectField {
       if (this.component.multiple) {
         this.focusableElement = this.choices.input.element;
       } else {
-        this.focusableElement = this.choices.containerInner.element;
+        // On iOS, focus the search input even for single select to ensure keyboard opens and centering logic works
+        if (choicesOptions.searchEnabled && window.platform && window.platform.iosPlatform) {
+          this.focusableElement = this.choices.input.element;
+        } else {
+          this.focusableElement = this.choices.containerInner.element;
+        }
         this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
         if (choicesOptions.searchEnabled) {
           // Proactively position on mousedown so it's ready before focus happens
           this.addEventListener(this.choices.containerOuter.element, 'mousedown', () => this.positionDropdown());
-          this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus({ preventScroll: true }));
         }
       }
       this.addFocusBlurEvents(this.focusableElement);
@@ -54719,6 +54762,12 @@ class SmartSelectComponent extends SmartSelectField {
       }
     }
     if (window && this.choices && this.shouldPositionDropdown) {
+      const wrapper = document.getElementById('formio-wrapper');
+      if (wrapper) {
+        this.addEventListener(wrapper, 'scroll', () => {
+          this.positionDropdown(true);
+        }, false, true);
+      }
       this.addEventListener(window.document, 'scroll', () => {
         this.positionDropdown(true);
       }, false, true);
@@ -54877,11 +54926,8 @@ class SmartSelectComponent extends SmartSelectField {
 
       // Ensure select is visible above keyboard on iOS
       if (window.platform && window.platform.iosPlatform) {
-        setTimeout(() => {
-          if (this.focusableElement) {
-            this.focusableElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          }
-        }, 300);
+        // We removed native scrollIntoView as it interferes with manual scroll control in focus.js
+        // focus.js handles the centering now.
       }
 
       // Restore and lock scroll on iPad to prevent "flicker" shifts during keyboard toggles
@@ -54999,14 +55045,29 @@ class SmartSelectComponent extends SmartSelectField {
     const containerPosition = container.getBoundingClientRect();
     const isFlipped = container.classList.contains('is-flipped');
 
-    _.assign(dropdown.style, {
-      top: `${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px`,
+    const vpH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    const top = isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height;
+    
+    const style = {
       left: `${containerPosition.left}px`,
       width: `${containerPosition.width}px`,
       position: 'fixed',
       bottom: 'unset',
       right: 'unset',
-    });
+      top: `${top}px`,
+    };
+
+    // On iOS, we limit the max-height of the fixed dropdown to stay within the viewport.
+    // We also use a scroll listener on the wrapper (added in attach()) to ensure this fixed 
+    // element re-positions during scrolling, making it behave like an absolute element.
+    if (window.platform && window.platform.iosPlatform) {
+      // Limit max-height to available space but ensure at least 300px for a good scroll area.
+      // We subtract 30px to leave a small gap at the bottom for better visibility.
+      const availableHeight = isFlipped ? top - 20 : vpH - top - 30;
+      style.maxHeight = `${Math.max(availableHeight, 300)}px`;
+    }
+
+    _.assign(dropdown.style, style);
   }
 
   hasDataGridAncestor(comp) {
@@ -56304,6 +56365,11 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = true;
+          this.refs.clicktoSign.style.pointerEvents = 'none';
+          this.refs.clicktoSign.style.display = 'none';
+          
+          const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+          if(clickBox) clickBox.style.display = 'none';
         }
         if (this.refs.signatureImage && this.dataValue) {
           this.refs.signatureImage.setAttribute('src', this.dataValue);
@@ -56315,6 +56381,12 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = false;
+          this.refs.clicktoSign.style.pointerEvents = 'auto';
+          if (this.component.isEnableClicktoSign) {
+             this.refs.clicktoSign.style.display = 'inline-flex';
+             const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+             if(clickBox) clickBox.style.display = '';
+          }
         }
       }
     }
@@ -56386,6 +56458,11 @@ class SignatureComponent extends InputComponentForSignature {
       this.refs.refresh.classList.add('disabled');
       if (this.refs.clicktoSign) {
         this.refs.clicktoSign.disabled = true;
+        this.refs.clicktoSign.style.pointerEvents = 'none';
+        this.refs.clicktoSign.style.display = 'none';
+        
+        const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+        if(clickBox) clickBox.style.display = 'none';
       }
     }
 
@@ -59935,7 +60012,7 @@ async function renderRNform(
             }
 
             // Hide FormIO submit button component and wizard buttons in readOnly mode
-            if (mode == "readOnly") {
+            if (mode == "readOnly" || permission == "read") {
                 const submitComponents = document.querySelectorAll(
                     ".formio-component-submit"
                 );
@@ -59943,6 +60020,18 @@ async function renderRNform(
                     component.style.display = "none";
                 });
 
+                // Disable signature pads robustly via CSS
+                if (!document.getElementById("readonly-signature-style")) {
+                    const style = document.createElement("style");
+                    style.id = "readonly-signature-style";
+                    style.innerHTML = `
+                      .formio-component-signature { pointer-events: none !important; }
+                      .formio-component-signature [ref="clicktoSign"],
+                      .formio-component-signature .click-to-sign-box { display: none !important; }
+                    `;
+                    document.head.appendChild(style);
+                }
+
                 // Hide wizard navigation buttons
                 const wizardNextBtns = document.querySelectorAll(
                     ".btn-wizard-nav-next"
@@ -60626,7 +60715,7 @@ window.CommentOnBack = CommentOnBack;
 
     
     <div id="sticky-footer">
-        <div class="build-version">SDK v1.0.21</div>
+        <div class="build-version">SDK v1.0.23</div>
         <div class="relative-position">
             <button id="unvired-more-btn" class="ui button primary dataGrid-addRow" onclick="toggleTooltip()">
                 <i class="icon options"></i>

package/dist/unvired-forms-sdk.js

@@ -1489,12 +1489,16 @@ body {
   box-sizing: border-box;
   background-color: #f5f5f5;
   font-family: Arial, sans-serif;
+  overflow: hidden; /* Prevent window from scrolling */
 }
 
 .formio-wrapper {
   border: 1px solid #ccc;
   background-color: #fff;
   border-radius: 8px;
+  overflow-y: auto; /* Enable internal scrolling */
+  -webkit-overflow-scrolling: touch;
+  height: 100%; /* Fill space */
 }
 
 #progressContainer {
@@ -2060,15 +2064,34 @@ body {
   }
 
   /* Add buffer at bottom to allow last components to scroll above the keyboard */
-  #form-container {
-    padding-bottom: 500px !important;
+  #formio-wrapper {
+    padding-bottom: 800px !important;
   }
 
-  /* Ensure DataGrid rows allow dropdowns to overflow now that we disabled fixed positioning on iOS */
-  .formio-component-datagrid .ui.table tr,
-  .formio-component-datagrid .ui.table td {
+  /* Logically add space below the select when opened to allow scrolling the last row higher */
+  .choices.is-open {
+    margin-bottom: 800px !important;
     overflow: visible !important;
   }
+
+  /* Prevent dropdown from being layered behind table headers or other rows */
+  .choices__list--dropdown {
+    z-index: 10000 !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Ensure the internal list doesn't have its own scrollbar/max-height that clips items */
+  .choices__list--dropdown .choices__list {
+    max-height: none !important;
+    overflow: visible !important;
+    padding-bottom: 20px !important;
+  }
+
+  /* Add extra space for the last item to ensure it's not clipped on iOS */
+  .choices__list--dropdown .choices__item:last-child {
+    padding-bottom: 20px !important;
+  }
 }
 
 /* === STYLE_SEPARATOR === */
@@ -27899,14 +27922,20 @@ select.ui.dropdown {
       <div id="formio-cmt" style="margin-bottom: 20px;"></div>
     </div>
     <div id="sticky-footer">
-      <div class="build-version">SDK v1.0.21</div>
+      <div class="build-version">SDK v1.0.23</div>
       <button class="ui button primary dataGrid-addRow" id="saveBtn" disabled="true" onclick="FormOnSave()">
         <i class="icon save large"></i>Save
       </button>
+      <button class="ui button secondary dataGrid-addRow" id="prevBtn" style="display:none" onclick="FormOnPrevious()">
+        <i class="icon arrow left"></i>Previous
+      </button>
+      <button class="ui button primary dataGrid-addRow" id="nextBtn" style="display:none" onclick="FormOnNext()">
+        Next<i class="icon arrow right"></i>
+      </button>
       <button class="ui button primary dataGrid-addRow" id="submitBtn" style="display:none" onclick="FormOnSubmit()">
         <i class="icon save large"></i>Submit
       </button>
-      
+
       <!-- Quick Action Buttons -->
       <div id="quick-actions" style="display: flex; align-items: center;">
          <i id="quickCompleteBtn" class="icon clipboard check large" style="display:none; cursor: pointer; margin: 0 10px;" onclick="FormOnSubmit()" title="Complete"></i>
@@ -28055,6 +28084,16 @@ select.ui.dropdown {
       window.formOnSubmitFunction();
     }
   };
+  window.FormOnNext = window.FormOnNext || function() {
+    if (typeof window.formOnNextFunction === "function") {
+      window.formOnNextFunction();
+    }
+  };
+  window.FormOnPrevious = window.FormOnPrevious || function() {
+    if (typeof window.formOnPreviousFunction === "function") {
+      window.formOnPreviousFunction();
+    }
+  };
   const scriptContents = `
     // Global variable initialization
     window.form = window.form || {};
@@ -54315,16 +54354,9 @@ var Choices = /** @class */function () {
     requestAnimationFrame(function () {
       _this.dropdown.show();
       _this.containerOuter.open(_this.dropdown.distanceFromTopWindow);
-      if (!preventInputFocus && _this._canSearch) {
-        // On iOS, delay focus slightly to ensure the keyboard has time to reset/close from previous field
-        if (window.platform && window.platform.iosPlatform) {
-          setTimeout(() => {
-            _this.input.focus({ preventScroll: true });
-          }, 150);
-        } else {
+        if (!preventInputFocus && _this._canSearch) {
           _this.input.focus({ preventScroll: true });
         }
-      }
       _this.passedElement.triggerEvent(constants_1.EVENTS.showDropdown, {});
     });
     return this;
@@ -61950,12 +61982,16 @@ class SmartSelectComponent extends SmartSelectField {
       if (this.component.multiple) {
         this.focusableElement = this.choices.input.element;
       } else {
-        this.focusableElement = this.choices.containerInner.element;
+        // On iOS, focus the search input even for single select to ensure keyboard opens and centering logic works
+        if (choicesOptions.searchEnabled && window.platform && window.platform.iosPlatform) {
+          this.focusableElement = this.choices.input.element;
+        } else {
+          this.focusableElement = this.choices.containerInner.element;
+        }
         this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
         if (choicesOptions.searchEnabled) {
           // Proactively position on mousedown so it's ready before focus happens
           this.addEventListener(this.choices.containerOuter.element, 'mousedown', () => this.positionDropdown());
-          this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus({ preventScroll: true }));
         }
       }
       this.addFocusBlurEvents(this.focusableElement);
@@ -61972,6 +62008,12 @@ class SmartSelectComponent extends SmartSelectField {
       }
     }
     if (window && this.choices && this.shouldPositionDropdown) {
+      const wrapper = document.getElementById('formio-wrapper');
+      if (wrapper) {
+        this.addEventListener(wrapper, 'scroll', () => {
+          this.positionDropdown(true);
+        }, false, true);
+      }
       this.addEventListener(window.document, 'scroll', () => {
         this.positionDropdown(true);
       }, false, true);
@@ -62130,11 +62172,8 @@ class SmartSelectComponent extends SmartSelectField {
 
       // Ensure select is visible above keyboard on iOS
       if (window.platform && window.platform.iosPlatform) {
-        setTimeout(() => {
-          if (this.focusableElement) {
-            this.focusableElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          }
-        }, 300);
+        // We removed native scrollIntoView as it interferes with manual scroll control in focus.js
+        // focus.js handles the centering now.
       }
 
       // Restore and lock scroll on iPad to prevent "flicker" shifts during keyboard toggles
@@ -62252,14 +62291,29 @@ class SmartSelectComponent extends SmartSelectField {
     const containerPosition = container.getBoundingClientRect();
     const isFlipped = container.classList.contains('is-flipped');
 
-    _.assign(dropdown.style, {
-      top: \`\${isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height}px\`,
+    const vpH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    const top = isFlipped ? containerPosition.top - dropdown.offsetHeight : containerPosition.top + containerPosition.height;
+    
+    const style = {
       left: \`\${containerPosition.left}px\`,
       width: \`\${containerPosition.width}px\`,
       position: 'fixed',
       bottom: 'unset',
       right: 'unset',
-    });
+      top: \`\${top}px\`,
+    };
+
+    // On iOS, we limit the max-height of the fixed dropdown to stay within the viewport.
+    // We also use a scroll listener on the wrapper (added in attach()) to ensure this fixed 
+    // element re-positions during scrolling, making it behave like an absolute element.
+    if (window.platform && window.platform.iosPlatform) {
+      // Limit max-height to available space but ensure at least 300px for a good scroll area.
+      // We subtract 30px to leave a small gap at the bottom for better visibility.
+      const availableHeight = isFlipped ? top - 20 : vpH - top - 30;
+      style.maxHeight = \`\${Math.max(availableHeight, 300)}px\`;
+    }
+
+    _.assign(dropdown.style, style);
   }
 
   hasDataGridAncestor(comp) {
@@ -63560,6 +63614,11 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = true;
+          this.refs.clicktoSign.style.pointerEvents = 'none';
+          this.refs.clicktoSign.style.display = 'none';
+          
+          const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+          if(clickBox) clickBox.style.display = 'none';
         }
         if (this.refs.signatureImage && this.dataValue) {
           this.refs.signatureImage.setAttribute('src', this.dataValue);
@@ -63571,6 +63630,12 @@ class SignatureComponent extends InputComponentForSignature {
         }
         if (this.refs.clicktoSign) {
           this.refs.clicktoSign.disabled = false;
+          this.refs.clicktoSign.style.pointerEvents = 'auto';
+          if (this.component.isEnableClicktoSign) {
+             this.refs.clicktoSign.style.display = 'inline-flex';
+             const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+             if(clickBox) clickBox.style.display = '';
+          }
         }
       }
     }
@@ -63642,6 +63707,11 @@ class SignatureComponent extends InputComponentForSignature {
       this.refs.refresh.classList.add('disabled');
       if (this.refs.clicktoSign) {
         this.refs.clicktoSign.disabled = true;
+        this.refs.clicktoSign.style.pointerEvents = 'none';
+        this.refs.clicktoSign.style.display = 'none';
+        
+        const clickBox = this.refs.clicktoSign.closest('.click-to-sign-box');
+        if(clickBox) clickBox.style.display = 'none';
       }
     }
 
@@ -66348,6 +66418,161 @@ window.showDynamicModal = showDynamicModal;
 
 // === SCRIPT_SEPARATOR ===
 
+(function(){
+let isKeyboardOpen = false;
+let activeElement = null;
+const INITIAL_WINDOW_HEIGHT = window.innerHeight;
+
+console.log("[Focus] Script initialized. Initial Height:", INITIAL_WINDOW_HEIGHT);
+
+// SOFT LOCK
+window.addEventListener('scroll', () => {
+    if (isKeyboardOpen && Math.abs(window.scrollY) > 20) {
+        window.scrollTo(0, 0);
+    }
+}, { passive: true });
+
+function updateFooterVisibility(keyboardOpen) {
+    // Only hide the footer on iOS to make room for the software keyboard.
+    // On Windows/Desktop, we should keep the footer visible at all times.
+    const isIOS = (window.platform && window.platform.iosPlatform);
+    if (!isIOS) return;
+
+    const footer = document.getElementById('sticky-footer');
+    if (!footer) return;
+    
+    if (keyboardOpen) {
+        footer.style.display = 'none';
+    } else {
+        footer.style.display = 'flex';
+    }
+}
+
+// Track focused input
+document.addEventListener('focusin', (e) => {
+    const el = e.target;
+    if (!el || !['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)) return;
+    
+    console.log("[Focus] \u{1F3AF} focusin on:", el.name || el.id || el.tagName);
+    updateFooterVisibility(true);
+
+    activeElement = el;
+
+    // Special handling for Choices.js: if an input inside choices is focused,
+    // we want to ensure the whole container is considered the active element for centering
+    if (el.classList.contains('choices__input')) {
+        const container = el.closest('.choices');
+        if (container) {
+            activeElement = container;
+            console.log("[Focus] \u{1F4E6} Choices.js detected, centering container.");
+        }
+    }
+
+    if (isKeyboardOpen) {
+        console.log("[Focus] \u26A1 Already open, centering now.");
+        centerActiveElement();
+    }
+});
+
+// Restore footer when focus is lost and keyboard is not open
+document.addEventListener('focusout', (e) => {
+    setTimeout(() => {
+        const currentlyFocused = document.activeElement;
+        const isInputFocused = currentlyFocused && ['INPUT', 'TEXTAREA', 'SELECT'].includes(currentlyFocused.tagName);
+        
+        if (!isInputFocused && !isKeyboardOpen) {
+            console.log("[Focus] \u{1F6AA} focusout and keyboard closed, restoring footer.");
+            updateFooterVisibility(false);
+        }
+    }, 200);
+});
+
+// Detect keyboard open/close
+if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', () => {
+        const isIOS = (window.platform && window.platform.iosPlatform);
+        if (!isIOS) return;
+
+        const viewport = window.visualViewport;
+        const vpH = viewport.height;
+        const isNowOpen = vpH < INITIAL_WINDOW_HEIGHT - 100; 
+
+        if (isNowOpen) {
+            const wasAlreadyOpen = isKeyboardOpen;
+            isKeyboardOpen = true;
+            updateFooterVisibility(true);
+            
+            if (activeElement && !wasAlreadyOpen) {
+                console.log("[Focus] \u{1F3A2} Keyboard sliding. Following...");
+                startFollowingElement();
+            }
+        } else {
+            isKeyboardOpen = false;
+            updateFooterVisibility(false);
+            window.scrollTo(0, 0); 
+        }
+    });
+}
+
+// Manually follow the element for a short duration to ensure it stays centered during animation
+function startFollowingElement() {
+    let start = Date.now();
+    const duration = 400; // Follow for 400ms (typical iOS keyboard duration)
+
+    function step() {
+        centerActiveElement();
+        if (Date.now() - start < duration) {
+            requestAnimationFrame(step);
+        }
+    }
+    requestAnimationFrame(step);
+}
+
+function centerActiveElement() {
+    if (!activeElement) return;
+    const wrapper = document.getElementById('formio-wrapper');
+    if (!wrapper) return;
+
+    const vpH = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    
+    // Calculate absolute offset of element relative to wrapper
+    let offsetTop = 0;
+    let curr = activeElement;
+    while (curr && curr !== wrapper && curr !== null) {
+        offsetTop += curr.offsetTop;
+        curr = curr.offsetParent;
+    }
+
+    // For Choices.js, if the dropdown is open, we might want to adjust centering 
+    // to ensure the dropdown is visible. However, centering the container is usually best.
+    const elementHeight = activeElement.offsetHeight;
+
+    // targetScroll = (distance from top) - (half of available space) + (half of element height)
+    const targetScroll = offsetTop - (vpH / 2) + (elementHeight / 2);
+    
+    // Apply instantly but accurately
+    if (Math.abs(wrapper.scrollTop - targetScroll) > 5) {
+        wrapper.scrollTop = targetScroll;
+    }
+}
+
+// Listen for Choices.js events to re-center when dropdown opens/closes
+document.addEventListener('showDropdown', () => {
+    if (isKeyboardOpen) {
+        console.log("[Focus] \u{1F53D} showDropdown detected, re-centering.");
+        setTimeout(centerActiveElement, 100);
+    }
+}, true);
+
+document.addEventListener('hideDropdown', () => {
+    console.log("[Focus] \u{1F53C} hideDropdown detected, resetting view.");
+    // When dropdown hides, we might want to center the closed select again
+    setTimeout(centerActiveElement, 100);
+}, true);
+})();
+
+// === SCRIPT_SEPARATOR ===
+
 (function(){
 var formObj = null;
 var initialFormData = null;
@@ -66374,6 +66599,8 @@ function FormOnBackNavigation() {
 function initialButtonSetup(privateExternal, permission) {
   const saveBtn = document.getElementById("saveBtn");
   const submitBtn = document.getElementById("submitBtn");
+  const prevBtn = document.getElementById("prevBtn");
+  const nextBtn = document.getElementById("nextBtn");
   const completeOption = document.getElementById("completeOption");
   const saveOption = document.getElementById("saveOption");
   const completeDivider = document.getElementById("completeDivider");
@@ -66479,6 +66706,7 @@ function initialButtonSetup(privateExternal, permission) {
   }
 }
 
+
 function onChangeButtonSetup(
   completionPercentage,
   formData,
@@ -66487,6 +66715,8 @@ function onChangeButtonSetup(
 ) {
   const saveBtn = document.getElementById("saveBtn");
   const submitBtn = document.getElementById("submitBtn");
+  const prevBtn = document.getElementById("prevBtn");
+  const nextBtn = document.getElementById("nextBtn");
   if (!saveBtn || !submitBtn) return;
 
   const isPrivate = privateExternal === true || privateExternal === "true";
@@ -66689,6 +66919,7 @@ async function loadRNform(
     // Determine form configuration based on mode
     let formConfig = {
       noAlerts: true,
+      scroll: false, // DISABLE Formio internal scrolling
       language: window.FORMIO_LANGUAGE || "en",
       i18n: window.FORMIO_I18N,
     };
@@ -66848,6 +67079,11 @@ async function loadRNform(
       .then(() => {
         console.log("[FormIO] \u{1F680} formReady.then() triggered");
 
+        // Handle Navigation and Button Hiding (Wizard-specific logic separated)
+        if (typeof window.initializeWizardLogic === "function") {
+          window.initializeWizardLogic(formObj, privateExternal, permission);
+        }
+
         if (formPreviousData) {
           console.log("[FormIO] \u{1F4E6} Previous form data found:", formPreviousData);
 
@@ -66869,7 +67105,7 @@ async function loadRNform(
         console.log("[FormIO] \u2705 Progress calculation completed");
 
         // Hide FormIO submit button component and wizard buttons in readOnly mode
-        if (mode == "readOnly") {
+        if (mode == "readOnly" || permission == "read") {
           console.log("[FormIO] \u{1F512} ReadOnly mode detected");
 
           const submitComponents = document.querySelectorAll(
@@ -66884,41 +67120,17 @@ async function loadRNform(
             console.log(\`[FormIO] Hidden submit component \${index + 1}\`);
           });
 
-          const wizardNextBtns = document.querySelectorAll(
-            ".btn-wizard-nav-next"
-          );
-          console.log(
-            \`[FormIO] Found \${wizardNextBtns.length} wizard next buttons\`
-          );
-
-          wizardNextBtns.forEach((btn, index) => {
-            btn.style.display = "none";
-            console.log(\`[FormIO] Hidden wizard next button \${index + 1}\`);
-          });
-
-          const wizardSubmitBtns = document.querySelectorAll(
-            ".btn-wizard-nav-submit"
-          );
-          console.log(
-            \`[FormIO] Found \${wizardSubmitBtns.length} wizard submit buttons\`
-          );
-
-          wizardSubmitBtns.forEach((btn, index) => {
-            btn.style.display = "none";
-            console.log(\`[FormIO] Hidden wizard submit button \${index + 1}\`);
-          });
-
-          const wizardPrevBtns = document.querySelectorAll(
-            ".btn-wizard-nav-previous"
-          );
-          console.log(
-            \`[FormIO] Found \${wizardPrevBtns.length} wizard previous buttons\`
-          );
-
-          wizardPrevBtns.forEach((btn, index) => {
-            btn.style.display = "none";
-            console.log(\`[FormIO] Hidden wizard previous button \${index + 1}\`);
-          });
+          // Disable signature components robustly via CSS
+          if (!document.getElementById("readonly-signature-style")) {
+            const style = document.createElement("style");
+            style.id = "readonly-signature-style";
+            style.innerHTML = \`
+              .formio-component-signature { pointer-events: none !important; }
+              .formio-component-signature [ref="clicktoSign"],
+              .formio-component-signature .click-to-sign-box { display: none !important; }
+            \`;
+            document.head.appendChild(style);
+          }
         } else {
           console.log("[FormIO] \u{1F513} Editable mode detected");
         }
@@ -67096,13 +67308,16 @@ function buildMandatoryFieldsCache() {
   return cache;
 }
 
-function executeProgressCalculation(privateExternal, permission) {
+window.executeProgressCalculation = function(privateExternal, permission) {
   if (!formObj) return;
 
   const data = formObj.data || {};
   const dataHash = JSON.stringify(data);
+  const isWizard = formObj && !!formObj.wizard;
 
-  if (dataHash === lastDataHash) return;
+  // For wizards, we must always proceed even if data is same, 
+  // because button visibility depends on the current page.
+  if (!isWizard && dataHash === lastDataHash) return;
   lastDataHash = dataHash;
 
   const mandatoryFields = buildMandatoryFieldsCache();
@@ -67204,6 +67419,11 @@ function executeProgressCalculation(privateExternal, permission) {
     permission
   );
 
+  // After setting up standard button visibility, override with wizard rules if applicable
+  if (typeof window.updateWizardNav === "function") {
+    window.updateWizardNav(formObj);
+  }
+
   // Update progress bar
   const progressBar = document.getElementById("progress-bar");
   if (progressBar) {
@@ -67546,18 +67766,19 @@ window.checkMoreButtonVisibility = function () {
   //    For documentsOption, its display is managed by logic.
   //    For comments/help, they are often just static items toggled.
 
-  const isVisible = (el) => el && el.style.display !== "none";
-
-  // Assuming options.showComments/Help also imply the item SHOULD be visible if logic permits
-  // But logic might hide them. The 'isVisible' check handles dynamic logic.
-  // But for comments/help, they might be hidden initially.
+  const isVisible = (el, optionKey) => {
+    if (!el) return false;
+    // If it's a static item like Help or Comments, check the options as well
+    if (optionKey && options[optionKey] === true) return true;
+    return el.style.display !== "none";
+  };
 
   const hasVisibleItems =
     isVisible(completeOption) ||
     isVisible(saveOption) ||
     isVisible(documentsOption) ||
-    isVisible(commentsItem) ||
-    isVisible(helpItem); // Simplified: check actual DOM state
+    isVisible(commentsItem, "showComments") ||
+    isVisible(helpItem, "showHelp"); // Simplified: check actual DOM state + options
 
   // If ANY item is visible, show the button. Otherwise hide.
   if (hasVisibleItems) {
@@ -67575,6 +67796,28 @@ window.FormOnSave = FormOnSave;
 window.FormOnBack = FormOnBack;
 window.setImageData = setImageData;
 window.FormOnSubmit = FormOnSubmit;
+window.FormOnNext = function () {
+  if (formObj && typeof formObj.nextPage === "function") {
+    formObj.nextPage().then(() => {
+      if (typeof window.updateWizardNav === "function") {
+        window.updateWizardNav(formObj);
+      }
+    });
+  }
+};
+
+window.FormOnPrevious = function () {
+  if (formObj && typeof formObj.prevPage === "function") {
+    formObj.prevPage().then(() => {
+      if (typeof window.updateWizardNav === "function") {
+        window.updateWizardNav(formObj);
+      }
+    });
+  }
+};
+
+window.formOnSubmitFunction = FormOnSubmit;
+
 window.resetFormCache = resetFormCache;
 
 // Notify that loadRNform is ready (for event-based coordination)
@@ -67584,6 +67827,174 @@ document.dispatchEvent(new CustomEvent('LoadRNformReady'));
 
 // === SCRIPT_SEPARATOR ===
 
+(function(){
+/**
+ * Wizard Navigation Logic for Unvired Forms
+ * This file handles all logic specific to Form.io wizard forms,
+ * including navigation button visibility and event handling.
+ */
+
+/**
+ * Updates the visibility of navigation buttons (Next, Previous, Submit)
+ * based on the current wizard page and form type.
+ * 
+ * @param {Object} formObj - The Form.io form instance
+ */
+function updateWizardNav(formObj) {
+  if (!formObj) return;
+
+  // 1. Hide default navigation and buttons (Next, Previous, Cancel, Submit)
+  // This ensures that we only use our own footer buttons
+  const selectorsToHide = [
+    '.formio-component-wizard_nav',
+    '.btn-wizard-nav-next',
+    '.btn-wizard-nav-previous',
+    '.btn-wizard-nav-cancel',
+    '.btn-wizard-nav-submit'
+  ];
+
+  selectorsToHide.forEach(selector => {
+    const elements = formObj.element.querySelectorAll(selector);
+    elements.forEach(el => {
+      el.style.display = "none";
+    });
+  });
+
+  // 2. Hide components from JSON that match navigation actions
+  if (typeof formObj.eachComponent === 'function') {
+    formObj.eachComponent((component) => {
+      if (component.type === 'button') {
+        const action = (component.component.action || '').toLowerCase();
+        const label = (component.component.label || '').toLowerCase();
+
+        if (action === 'next' || action === 'previous' || action === 'cancel' ||
+          label === 'next' || label === 'previous' || label === 'cancel') {
+          // Hide both the component instance and its DOM element
+          component.visible = false;
+          if (component.element) {
+            component.element.style.display = 'none';
+          }
+        }
+      }
+    });
+  }
+
+  // 3. Handle Footer Navigation Toggling (Only for Wizards)
+  if (!formObj.wizard) return;
+
+  const prevBtn = document.getElementById("prevBtn");
+  const nextBtn = document.getElementById("nextBtn");
+  const submitBtn = document.getElementById("submitBtn");
+  const saveBtn = document.getElementById("saveBtn");
+
+  const currentPage = formObj.page || 0;
+  const numPages = (formObj.pages && formObj.pages.length) || 0;
+  const isLastPage = (currentPage >= numPages - 1);
+
+  console.log(\`[WizardLogic] \u{1F9ED} Page: \${currentPage + 1}/\${numPages}, isLastPage: \${isLastPage}\`);
+
+  if (prevBtn) {
+    prevBtn.style.display = currentPage > 0 ? "inline-block" : "none";
+  }
+
+  if (nextBtn) {
+    nextBtn.style.display = currentPage < numPages - 1 ? "inline-block" : "none";
+  }
+
+  // If it's a wizard, we only want the save and submit buttons on the last page.
+  // If it's NOT the last page, we force hide them.
+  // If it IS the last page, we let the normal logic (onChangeButtonSetup) decide.
+  if (!isLastPage) {
+    console.log("[WizardLogic] \u{1F512} Intermediate page: Hiding save/complete actions");
+    if (submitBtn) submitBtn.style.display = "none";
+    if (saveBtn) saveBtn.style.display = "none";
+
+    // Hide dropdown options as well
+    const completeOption = document.getElementById("completeOption");
+    const saveOption = document.getElementById("saveOption");
+    const completeDivider = document.getElementById("completeDivider");
+    const saveDivider = document.getElementById("saveDivider");
+
+    if (completeOption) completeOption.style.display = "none";
+    if (saveOption) saveOption.style.display = "none";
+    if (completeDivider) completeDivider.style.display = "none";
+    if (saveDivider) saveDivider.style.display = "none";
+
+    // Also hide quick action buttons if they exist
+    const quickCompleteBtn = document.getElementById("quickCompleteBtn");
+    const quickSaveBtn = document.getElementById("quickSaveBtn");
+    if (quickCompleteBtn) quickCompleteBtn.style.display = "none";
+    if (quickSaveBtn) quickSaveBtn.style.display = "none";
+
+    // Re-check More button visibility after hiding items
+    if (typeof window.checkMoreButtonVisibility === "function") {
+      window.checkMoreButtonVisibility();
+    }
+  } else {
+    console.log("[WizardLogic] \u{1F513} Last page: Allowing normal button logic to take over");
+    // On the last page, we MUST ensure the More button visibility is re-evaluated
+    // because it might have been hidden on the previous page.
+    if (typeof window.checkMoreButtonVisibility === "function") {
+      window.checkMoreButtonVisibility();
+    }
+  }
+}
+
+/**
+ * Sets up event listeners for wizard-specific events like page changes.
+ * 
+ * @param {Object} formObj - The Form.io form instance
+ * @param {Boolean} privateExternal - Private/External flag
+ * @param {String} permission - User permission level
+ */
+function setupWizardEvents(formObj, privateExternal, permission) {
+  if (!formObj) return;
+
+  if (formObj.wizard) {
+    formObj.on('nextPage', () => {
+      updateWizardNav(formObj);
+      // Trigger progress calculation on page change
+      if (typeof window.executeProgressCalculation === 'function') {
+        window.executeProgressCalculation(privateExternal, permission);
+      }
+    });
+    formObj.on('prevPage', () => {
+      updateWizardNav(formObj);
+      // Trigger progress calculation on page change
+      if (typeof window.executeProgressCalculation === 'function') {
+        window.executeProgressCalculation(privateExternal, permission);
+      }
+    });
+  }
+
+  // Always handle render event to ensure buttons stay hidden
+  formObj.on('render', () => {
+    updateWizardNav(formObj);
+  });
+}
+
+window.updateWizardNav = updateWizardNav;
+
+/**
+ * Main initialization function for wizard logic.
+ * Should be called after the Form.io form is created.
+ */
+window.initializeWizardLogic = function(formObj, privateExternal, permission) {
+  console.log("[WizardLogic] \u{1F9D9} Initializing wizard-specific logic...");
+  setupWizardEvents(formObj, privateExternal, permission);
+
+  // Also listen for change events to update nav (e.g. if pages are conditionally hidden)
+  formObj.on('change', () => {
+    updateWizardNav(formObj);
+  });
+
+  updateWizardNav(formObj);
+};
+
+})();
+
+// === SCRIPT_SEPARATOR ===
+
 (function(){
 async function loadCommentsform(
   template,
@@ -68106,7 +68517,7 @@ window.deleteAppDocument = async function(id) {
 window.getAllDocuments = getAllDocuments;
 window.hasDocuments = hasDocuments;
 function getBuildVersion() {
-  return "1.0.21";
+  return "1.0.23";
 }
 export {
   getBuildVersion,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unvired/turboforms-embed-sdk",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "Reusable vanilla JS form library that works with React, Angular, Ionic, etc.",
   "main": "dist/unvired-forms-sdk.js",
   "types": "dist/index.d.ts",