@verdocs/web-sdk 6.5.0-beta.12 → 6.5.0-beta.14

package/dist/cjs/verdocs-menu-panel_2.cjs.entry.js

@@ -223,31 +223,31 @@ const VerdocsTemplateRoleProperties = class {
         const hasFields = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).some(field => field.role_name === this.roleName);
         // Either all three should be empty, or all three need to be filled
         const isValid = (!this.email && !this.first_name && !this.last_name) || (jsSdk.isValidEmail(this.email) && !!this.first_name && !!this.last_name);
-        return (index.h(index.Host, { key: '482250b62aedab7cebe5d2b6dc22e1fcbfe5e9ec' }, index.h("form", { key: '3c3f53a26278d0cf8fcb5d469c13282ebf689da6', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { key: '8b4af0dbb215738d5cce7cd7964623460fcccfd9' }, index.h("verdocs-text-input", { key: 'e1e15457e05de814982e7c00eaf154382dee6cbd', id: "verdocs-role-name", label: "Role Name (Must be unique)", value: this.name, autocomplete: "off", disabled: hasFields, placeholder: "Role Name...", onInput: (e) => {
+        return (index.h(index.Host, { key: '7d59047d10b7ee91567d2b826df721a1712f77bd' }, index.h("form", { key: 'd8880522a899c41e3c64721b139860748671721e', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("div", { key: '439991a28157232f4156d307d8ba955444021bff' }, index.h("verdocs-text-input", { key: 'e65464c8a65112e18adc421c9845a3977f5d560b', id: "verdocs-role-name", label: "Role Name (Must be unique)", value: this.name, autocomplete: "off", disabled: hasFields, placeholder: "Role Name...", onInput: (e) => {
                 this.name = e.target.value;
                 this.dirty = true;
-            } }), hasFields && index.h("div", { key: '69c8ed86df1b952a2552300f1156e415b1bc7f9b', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), index.h("div", { key: '87e82c49552cffc729bbb6dee6ee30fe976e82f7' }, index.h("div", { key: '5a55ffb179841a7c24ca8380f4384a99b6f44f61', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: 'f0891f1524372ce1f6d9abef473bb4a529a63758', value: this.type, options: [
+            } }), hasFields && index.h("div", { key: '059a3d261dd207f21d75240a7bd63e115c38df55', class: "instructions" }, "This role has fields assigned and can no longer be renamed.")), index.h("div", { key: '5a109a0b1b6eeab8513fc811f82d0ee0e83b90d1' }, index.h("div", { key: '6b1ccac29df7a8585cc053b7104af2f84d08231a', class: "input-label" }, "Type:"), index.h("verdocs-select-input", { key: '4dd94a39ed79163a516f29cdca7dd96be4e822fa', value: this.type, options: [
                 { label: 'Signer', value: 'signer' },
                 { label: 'CC', value: 'cc' },
                 { label: 'Approver', value: 'approver' },
             ], onInput: (e) => {
                 this.type = e.target.value;
                 this.dirty = true;
-            } })), index.h("div", { key: 'cde1f4723675826f02cb361470718e16d27ea6ea' }, index.h("div", { key: '210e45a8584426bb07e96efab6446b33d43b3c38', class: "input-label" }, "Default Contact Info:"), index.h("div", { key: 'a187f09ece0c38af7ebd704c0c094284065efe54', class: "first-last" }, index.h("verdocs-text-input", { key: '3ce10f33409c8b5c24cfae8d5dc4331e46c904f4', id: "verdocs-recipient-first", value: this.first_name, autocomplete: "off", placeholder: "First...", onInput: (e) => {
+            } })), index.h("div", { key: '7581f7dfd10371fcc0fb6b04317931e3098b4107' }, index.h("div", { key: '0573cae6ecb3a57dcb661223bc07ddd58c2aa0db', class: "input-label" }, "Default Contact Info:"), index.h("div", { key: 'eb984652cf774cb80f4bf18957038bec25f3df76', class: "first-last" }, index.h("verdocs-text-input", { key: 'b38c4c1833b9e52c2a4883675dec604509917896', id: "verdocs-recipient-first", value: this.first_name, autocomplete: "off", placeholder: "First...", onInput: (e) => {
                 this.first_name = e.target.value;
                 this.dirty = true;
-            } }), index.h("verdocs-text-input", { key: '03a3d0fea92dde8cad951020985d35d0777ee30d', id: "verdocs-recipient-first", value: this.last_name, autocomplete: "off", placeholder: "Last...", onInput: (e) => {
+            } }), index.h("verdocs-text-input", { key: 'a54ac8d0910a7111c8bed7e9482ed5605c3be02b', id: "verdocs-recipient-first", value: this.last_name, autocomplete: "off", placeholder: "Last...", onInput: (e) => {
                 this.last_name = e.target.value;
                 this.dirty = true;
-            } }))), index.h("div", { key: '33c95e31183dfd6dc9d4c7d1000c1fb7025d8699' }, index.h("verdocs-text-input", { key: '9a30a8a4647abf6bd5b80be1033816e3ad2f20a2', id: "verdocs-recipient-email", value: this.email, autocomplete: "off", placeholder: "Email Address...", onInput: (e) => {
+            } }))), index.h("div", { key: 'cc784404cf389a87b6178726dbce7ba274d74d1c' }, index.h("verdocs-text-input", { key: 'bf4eb21b976a489c1860e003653ccb456248fd76', id: "verdocs-recipient-email", value: this.email, autocomplete: "off", placeholder: "Email Address...", onInput: (e) => {
                 this.email = e.target.value;
                 this.dirty = true;
-            } }), index.h("div", { key: '45947e626491071b750ed21a0b720483cd3d31b3', style: { height: '15px' } }), index.h("div", { key: 'df9f84f68ddcd26306185efbf3559a7c998a7348' }, index.h("verdocs-text-input", { key: 'a7de28a3d33add44a32345cf8ec2261f585cd908', id: "verdocs-recipient-phone", value: this.phone, autocomplete: "off",
+            } }), index.h("div", { key: 'e7af50ddd7c298ad597323f70a92c03980123484', style: { height: '15px' } }), index.h("div", { key: '24214d48b1920e66256128d831162c8691e61b56' }, index.h("verdocs-text-input", { key: '791320db13bf0d6f1e5483f1d699c261e99c5e70', id: "verdocs-recipient-phone", value: this.phone, autocomplete: "off",
             // helpText="The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template."
             placeholder: "Phone Number...", onInput: (e) => {
                 this.phone = e.target.value;
                 this.dirty = true;
-            } }))), index.h("div", { key: 'acd5e9b6a5fd5a43245f37e5e36d12a2c669e3bd', class: "buttons" }, index.h("button", { key: '60cb726d1dd1e7ae1439a092c4f0df1768cafec5', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: '663e6abad86c52c4e4412326dc3dde548c3ddc0c', style: { flex: '1' } }), index.h("verdocs-button", { key: '5ccaa4758c7ae1f615639d947b138b9f649322e5', size: "small", label: "Save", disabled: !this.dirty || !isValid, onClick: e => this.handleSave(e) })))));
+            } }))), index.h("div", { key: '6ed7f3100e8bf765ae6c8f78f06d512c3a3ff0ea', class: "buttons" }, index.h("button", { key: 'd696c3765c7e3cee1b5ede37aeb31f94335bb124', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), index.h("div", { key: '8a90c22fe4e5fcb613e0446b1288f42a5e040769', style: { flex: '1' } }), index.h("verdocs-button", { key: 'ce3d2d905061414aaca6c167a7480f62a8ee37e4', size: "small", label: "Save", disabled: !this.dirty || !isValid, onClick: e => this.handleSave(e) })))));
     }
 };
 VerdocsTemplateRoleProperties.style = verdocsTemplateRolePropertiesCss;

package/dist/cjs/verdocs-ok-dialog.cjs.entry.js

@@ -43,7 +43,7 @@ const VerdocsOkDialog = class {
         }
     }
     render() {
-        return (index.h("verdocs-dialog", { key: '509ff1aca20ea2b4d22df6536412c396f1f7bc27', onExit: e => this.handleDismiss(e) }, index.h("div", { key: '8b072729e157cd36811d5956489f6ec5c17e1d73', slot: "heading", class: "heading" }, index.h("div", { key: '2fdc0665a733791599345daa5a7c7902ce798a74', class: "icon" }, index.h("svg", { key: '80bfc08aa3afed4ae6a07aad57be3bfd3ee5f364', width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: '6f56efa70eaa9eb220add13fc8d8c171a6b1f7b4', "clip-path": "url(#clip0_34208_4881)" }, index.h("path", { key: '34d64f611853970e248df202349c9dcbcd7f2f02', d: "M3.125 0.75C1.88398 0.75 0.875 1.75898 0.875 3V16.5C0.875 17.741 1.88398 18.75 3.125 18.75H12.125C13.366 18.75 14.375 17.741 14.375 16.5V15.8215C14.2801 15.8602 14.1852 15.8918 14.0867 15.9164L11.9738 16.4437C11.8684 16.4684 11.7629 16.4859 11.6574 16.493C11.6258 16.4965 11.5941 16.5 11.5625 16.5H9.3125C9.09805 16.5 8.90469 16.3805 8.80977 16.1906L8.50039 15.5684C8.44062 15.4488 8.32109 15.375 8.19102 15.375C8.06094 15.375 7.93789 15.4488 7.88164 15.5684L7.57227 16.1906C7.47031 16.398 7.24883 16.5211 7.02031 16.5C6.7918 16.4789 6.59492 16.3207 6.53164 16.1027L5.9375 14.1445L5.59297 15.2977C5.37852 16.0113 4.72109 16.5 3.97578 16.5H3.6875C3.37812 16.5 3.125 16.2469 3.125 15.9375C3.125 15.6281 3.37812 15.375 3.6875 15.375H3.97578C4.22539 15.375 4.44336 15.2133 4.51367 14.9742L5.0375 13.234C5.15703 12.8367 5.52266 12.5625 5.9375 12.5625C6.35234 12.5625 6.71797 12.8367 6.8375 13.234L7.24531 14.591C7.50547 14.373 7.83594 14.25 8.1875 14.25C8.74648 14.25 9.25625 14.5664 9.50586 15.0656L9.66055 15.375H9.97344C9.86445 15.0656 9.84336 14.7281 9.92422 14.3977L10.4516 12.2848C10.55 11.8875 10.7539 11.5289 11.0422 11.2406L14.375 7.90781V6.375H9.875C9.25273 6.375 8.75 5.87227 8.75 5.25V0.75H3.125ZM9.875 0.75V5.25H14.375L9.875 0.75ZM20.2039 5.66133C19.6555 5.11289 18.766 5.11289 18.2141 5.66133L17.1805 6.69492L19.6766 9.19102L20.7102 8.15742C21.2586 7.60898 21.2586 6.71953 20.7102 6.16758L20.2039 5.66133ZM11.8402 12.0352C11.6961 12.1793 11.5941 12.3586 11.5449 12.559L11.0176 14.6719C10.9684 14.8652 11.0246 15.0656 11.1652 15.2063C11.3059 15.3469 11.5062 15.4031 11.6996 15.3539L13.8125 14.8266C14.0094 14.7773 14.1922 14.6754 14.3363 14.5312L18.8785 9.98555L16.3824 7.48945L11.8402 12.0352Z", fill: "white" })), index.h("defs", { key: '42d09165c66553cb195fc3b3e48346143c2f67dd' }, index.h("clipPath", { key: '7f37ec221c407292d40deb5f9bcfb97276305edf', id: "clip0_34208_4881" }, index.h("path", { key: 'b489b5cd1922b5140626e21fbdba30b84578fa45', d: "M0.875 0.75H21.125V18.75H0.875V0.75Z", fill: "white" }))))), index.h("div", { key: '1842cabecbbb0528dd6ffae4f585948cda4dda9c', class: "title" }, " ", this.heading)), index.h("div", { key: '28b4843511688745e5d843a350666145f5b9f7ac', slot: "content", class: "content", innerHTML: this.message }), index.h("div", { key: '42c6464b16fae2101db2f225cc9149bf330e401a', class: "footer", slot: "footer" }, index.h("div", { key: '9bda1cece32a65608bbcde0bce170bbc96fdf4c7', class: "buttons" }, this.showCancel && (index.h("button", { key: '859db5011955e9b665c993d44c70907b012497f2', class: "cancel", onClick: () => this.handleCancel() }, "Cancel")), index.h("button", { key: '787afde7b77e2bddaad882f94af6ec87c57d6a5c', class: !this.showCancel ? 'ok single' : 'ok', onClick: () => this.handleOk() }, "OK")))));
+        return (index.h("verdocs-dialog", { key: 'de8abcd6b726b8ec6ecaa04a33dc9811003e715d', onExit: e => this.handleDismiss(e) }, index.h("div", { key: '678e3c710277fc696ec2436d9f6447ccb817b8a3', slot: "heading", class: "heading" }, index.h("div", { key: '6f38d807f8a6f543c2b95b758136600a66dcf451', class: "icon" }, index.h("svg", { key: '2622fdc44c25500e4451f97ed59c343da138c21f', width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { key: 'bc1dbc98f3021213e58db122ad2517459461f61e', "clip-path": "url(#clip0_34208_4881)" }, index.h("path", { key: '3d89e206950e2f13fa8b498870cf693380b7d67a', d: "M3.125 0.75C1.88398 0.75 0.875 1.75898 0.875 3V16.5C0.875 17.741 1.88398 18.75 3.125 18.75H12.125C13.366 18.75 14.375 17.741 14.375 16.5V15.8215C14.2801 15.8602 14.1852 15.8918 14.0867 15.9164L11.9738 16.4437C11.8684 16.4684 11.7629 16.4859 11.6574 16.493C11.6258 16.4965 11.5941 16.5 11.5625 16.5H9.3125C9.09805 16.5 8.90469 16.3805 8.80977 16.1906L8.50039 15.5684C8.44062 15.4488 8.32109 15.375 8.19102 15.375C8.06094 15.375 7.93789 15.4488 7.88164 15.5684L7.57227 16.1906C7.47031 16.398 7.24883 16.5211 7.02031 16.5C6.7918 16.4789 6.59492 16.3207 6.53164 16.1027L5.9375 14.1445L5.59297 15.2977C5.37852 16.0113 4.72109 16.5 3.97578 16.5H3.6875C3.37812 16.5 3.125 16.2469 3.125 15.9375C3.125 15.6281 3.37812 15.375 3.6875 15.375H3.97578C4.22539 15.375 4.44336 15.2133 4.51367 14.9742L5.0375 13.234C5.15703 12.8367 5.52266 12.5625 5.9375 12.5625C6.35234 12.5625 6.71797 12.8367 6.8375 13.234L7.24531 14.591C7.50547 14.373 7.83594 14.25 8.1875 14.25C8.74648 14.25 9.25625 14.5664 9.50586 15.0656L9.66055 15.375H9.97344C9.86445 15.0656 9.84336 14.7281 9.92422 14.3977L10.4516 12.2848C10.55 11.8875 10.7539 11.5289 11.0422 11.2406L14.375 7.90781V6.375H9.875C9.25273 6.375 8.75 5.87227 8.75 5.25V0.75H3.125ZM9.875 0.75V5.25H14.375L9.875 0.75ZM20.2039 5.66133C19.6555 5.11289 18.766 5.11289 18.2141 5.66133L17.1805 6.69492L19.6766 9.19102L20.7102 8.15742C21.2586 7.60898 21.2586 6.71953 20.7102 6.16758L20.2039 5.66133ZM11.8402 12.0352C11.6961 12.1793 11.5941 12.3586 11.5449 12.559L11.0176 14.6719C10.9684 14.8652 11.0246 15.0656 11.1652 15.2063C11.3059 15.3469 11.5062 15.4031 11.6996 15.3539L13.8125 14.8266C14.0094 14.7773 14.1922 14.6754 14.3363 14.5312L18.8785 9.98555L16.3824 7.48945L11.8402 12.0352Z", fill: "white" })), index.h("defs", { key: '7a8d172b5000305ac86c9cdf6ff8b60d0c1c1834' }, index.h("clipPath", { key: 'a8f0d4838c874be0ed5f8a67015ad82c49917c7c', id: "clip0_34208_4881" }, index.h("path", { key: '58fa658eaaebc58cf0ae6513bcf8aa0477ed12f7', d: "M0.875 0.75H21.125V18.75H0.875V0.75Z", fill: "white" }))))), index.h("div", { key: '76c74099a3c7e885367ba3d00e50bf96825b0a3a', class: "title" }, " ", this.heading)), index.h("div", { key: 'd1a302f2501babaaeeac1134e45120616b25ac9a', slot: "content", class: "content", innerHTML: this.message }), index.h("div", { key: '097624d1c5ee68213cf0f115e40ebab458b12a87', class: "footer", slot: "footer" }, index.h("div", { key: '8e4ea8a0d1d30caa642206e5775d30dc706dc5a9', class: "buttons" }, this.showCancel && (index.h("button", { key: 'd93620a55fa824797460ff1d128dbc322cf80ad5', class: "cancel", onClick: () => this.handleCancel() }, "Cancel")), index.h("button", { key: '934be35a85f6b3869fd6d161d907543658c9291c', class: !this.showCancel ? 'ok single' : 'ok', onClick: () => this.handleOk() }, "OK")))));
     }
 };
 VerdocsOkDialog.style = verdocsOkDialogCss;

package/dist/cjs/verdocs-preview_7.cjs.entry.js

@@ -7,7 +7,7 @@ var errors = require('./errors-D1XRvnet.js');
 var Datastore = require('./Datastore-B-sxWSPD.js');
 var Environment = require('./Environment-3vWt0C1Q.js');
 var Toast = require('./Toast-CFBM1R4z.js');
-var Icons = require('./Icons-DTZAw6hQ.js');
+var Icons = require('./Icons-Dr02rZHd.js');
 var index$2 = require('./index-CeUF44L9.js');
 var interact_min = require('./interact.min-BAnZvLwr.js');
 require('./Types-RUyU-svM.js');

package/dist/cjs/verdocs-quick-functions.cjs.entry.js

@@ -24,7 +24,7 @@ const VerdocsQuickFunctions = class {
         this.createDocument.emit();
     }
     render() {
-        return (index.h("div", { key: 'bf490444c127f1f497817b73ed863e816758b834', class: "container" }, index.h("p", { key: '1085ee695426f2c9ae52b14b914d099baf97b361', class: "title" }, "Quick Create"), index.h("button", { key: 'ce0e9b13f66409253cfd8912c91cabd918000967', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: '257e4cf20c3358f3c49e48d59e8d1bcd5a8e8997', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
+        return (index.h("div", { key: '5d3c97738276db1ddf9828f3e2261791e751b14d', class: "container" }, index.h("p", { key: 'b6474f0097d65bc95a32c26e19449656d89095f5', class: "title" }, "Quick Create"), index.h("button", { key: '6a7e10dee4770650eaaab21f13aaa904b52af68e', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: 'ceeba0cca86c37ee8e6bc1945d9ed1d238e3f8b7', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
     }
 };
 VerdocsQuickFunctions.style = verdocsQuickFunctionsCss;

package/dist/cjs/verdocs-search-tabs.cjs.entry.js

@@ -10,7 +10,7 @@ const VerdocsSearchTabs = class {
         this.selected = 'all';
     }
     render() {
-        return index.h("div", { key: '0b0ec87a485b3e7d8746e00f497f9ca636c4f3e2' }, "\u00A0");
+        return index.h("div", { key: 'f6609bcd02d44b1fdf45ec8a3f5590ce050b0b3d' }, "\u00A0");
     }
 };
 VerdocsSearchTabs.style = verdocsSearchTabsCss;

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -3,14 +3,19 @@
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
 var utils = require('./utils-LPO6l9nR.js');
+var Icons = require('./Icons-Dr02rZHd.js');
 var Toast = require('./Toast-CFBM1R4z.js');
 var errors = require('./errors-D1XRvnet.js');
 var Datastore = require('./Datastore-B-sxWSPD.js');
 require('./index-CeUF44L9.js');
 require('./Types-RUyU-svM.js');
 
-const verdocsSignCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;min-height:700px;position:relative;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f5f5f5;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif)}verdocs-sign verdocs-button>button.standard{background:#2a63f6}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding:15px;padding-right:140px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign>.document .document-separator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px;padding:12px 20px;width:100%;max-width:1028px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#33364b;color:white;border-radius:6px;font-size:16px;font-weight:500;margin-top:20px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}verdocs-sign>.document .document-separator svg{-ms-flex-negative:0;flex-shrink:0}verdocs-sign>.document .document-separator:first-child{margin-top:0}verdocs-sign .signed-document-container{width:64%;margin-left:260px}@media (max-width: 600px){verdocs-sign .signed-document-container{width:100%;margin-left:0}verdocs-sign>.document{padding-right:15px}verdocs-sign .verdocs-flag-instance{display:none !important}}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}verdocs-sign .fatal-error{position:absolute;z-index:100;top:0;left:0;right:0;bottom:0;background-color:#4a4a4a;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .fatal-error .placeholder{position:absolute;opacity:0.1;z-index:-1;top:0;left:0;right:0;bottom:0;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);margin-top:15px}verdocs-sign .fatal-error .message{max-width:360px;width:50%;font-size:16px;background:white;-webkit-box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235);box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235)}verdocs-sign .fatal-error .header{color:white;font-size:18px;font-weight:500;padding:5px 10px;margin:0 0 10px 0;background:#4c56cb}verdocs-sign .fatal-error p{margin:1rem;font-size:14px;font-weight:400;padding:0 10px}@media print{verdocs-sign .header{display:none}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 46px;flex:0 0 46px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-sign-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 12px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;padding:0 10px 0 0;text-overflow:ellipsis}.spinner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}";
+const verdocsSignCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;min-height:700px;position:relative;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f5f5f5;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif)}verdocs-sign verdocs-button>button.standard{background:#2a63f6}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding:15px;padding-right:140px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign>.document .document-separator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px;padding:12px 20px;width:100%;max-width:1028px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#33364b;color:white;border-radius:6px;font-size:16px;font-weight:500;margin-top:20px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}verdocs-sign>.document .document-separator svg{-ms-flex-negative:0;flex-shrink:0}verdocs-sign>.document .document-separator:first-child{margin-top:0}verdocs-sign .signed-document-container{width:64%;margin-left:260px}@media (max-width: 600px){verdocs-sign .signed-document-container{width:100%;margin-left:0}verdocs-sign>.document{padding-right:15px}verdocs-sign .verdocs-flag-instance{display:none !important}}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}verdocs-sign .fatal-error{position:absolute;z-index:100;top:0;left:0;right:0;bottom:0;background-color:#4a4a4a;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .fatal-error .placeholder{position:absolute;opacity:0.1;z-index:-1;top:0;left:0;right:0;bottom:0;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);margin-top:15px}verdocs-sign .fatal-error .message{max-width:360px;width:50%;font-size:16px;background:white;-webkit-box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235);box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235)}verdocs-sign .fatal-error .header{color:white;font-size:18px;font-weight:500;padding:5px 10px;margin:0 0 10px 0;background:#4c56cb}verdocs-sign .fatal-error p{margin:1rem;font-size:14px;font-weight:400;padding:0 10px}@media print{verdocs-sign .header{display:none}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 46px;flex:0 0 46px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-sign-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 12px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;padding:0 10px 0 0;text-overflow:ellipsis}.spinner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}.controls-toolbar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:54px;padding:0 12px 0 24px;background-color:#ffffff;border-bottom:1px solid #e0e0e0;-webkit-box-shadow:none;box-shadow:none;font-family:\"Inter\", sans-serif;color:#424242;z-index:1000}.controls-toolbar .left-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .left-controls .title{font-weight:500;font-size:16px;color:#242424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls-toolbar .center-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:10px;font-size:14px}.controls-toolbar .center-controls .label{color:#000000;font-weight:300}.controls-toolbar .center-controls .select-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .center-controls .select-wrapper verdocs-select-input{margin:0}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-label{display:none}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element{background:transparent;border:1px solid #e0e0e0;height:32px;padding:2px 8px;min-width:60px;text-align:center;font-family:inherit;color:#424242}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element:focus{border-color:#2a63f6}.controls-toolbar .center-controls .count{color:#000000;font-weight:300}.controls-toolbar .right-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.controls-toolbar .right-controls .icon-button{width:32px;height:32px;display:-ms-flexbox;display:flex;color:#424242;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:background-color 0.2s;transition:background-color 0.2s}.controls-toolbar .right-controls .icon-button:hover{background-color:#f5f5f5}.controls-toolbar .right-controls .icon-button svg{display:block;width:20px;height:20px}";
 
+const ToolbarMinusIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 8C11.2761 8 11.5 8.22386 11.5 8.5C11.5 8.77614 11.2761 9 11 9H6C5.72386 9 5.5 8.77614 5.5 8.5C5.5 8.22386 5.72386 8 6 8H11ZM14 8.5C14 5.46243 11.5376 3 8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C9.83879 14 11.0659 13.5217 12.0196 12.7266L16.1464 16.8536L16.2157 16.9114C16.4106 17.0464 16.68 17.0271 16.8536 16.8536C17.0488 16.6583 17.0488 16.3417 16.8536 16.1464L12.7266 12.0196C13.5217 11.0659 14 9.83879 14 8.5ZM4 8.5C4 6.01472 6.01472 4 8.5 4C10.9853 4 13 6.01472 13 8.5C13 10.9853 10.9853 13 8.5 13C6.01472 13 4 10.9853 4 8.5Z" fill="#424242" /></svg>`;
+const ToolbarPlusIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 8.5C11.5 8.22386 11.2761 8 11 8H9V6C9 5.72386 8.77614 5.5 8.5 5.5C8.22386 5.5 8 5.72386 8 6V8H6C5.72386 8 5.5 8.22386 5.5 8.5C5.5 8.77614 5.72386 9 6 9H8V11C8 11.2761 8.22386 11.5 8.5 11.5C8.77614 11.5 9 11.2761 9 11V9H11C11.2761 9 11.5 8.77614 11.5 8.5ZM8.5 3C11.5376 3 14 5.46243 14 8.5C14 9.83879 13.5217 11.0659 12.7266 12.0196L16.8536 16.1464C17.0488 16.3417 17.0488 16.6583 16.8536 16.8536C16.68 17.0271 16.4106 17.0464 16.2157 16.9114L16.1464 16.8536L12.0196 12.7266C11.0659 13.5217 9.83879 14 8.5 14C5.46243 14 3 11.5376 3 8.5C3 5.46243 5.46243 3 8.5 3ZM8.5 4C6.01472 4 4 6.01472 4 8.5C4 10.9853 6.01472 13 8.5 13C10.9853 13 13 10.9853 13 8.5C13 6.01472 10.9853 4 8.5 4Z" fill="#424242" /></svg>`;
+const ToolbarDownloadIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 16.9988C15.7761 16.9988 16 17.2226 16 17.4988C16 17.7442 15.8231 17.9484 15.5899 17.9907L15.5 17.9988H4.5C4.22386 17.9988 4 17.7749 4 17.4988C4 17.2533 4.17688 17.0492 4.41012 17.0068L4.5 16.9988H15.5ZM10.0001 2.00098C10.2456 2.00098 10.4497 2.17798 10.492 2.41124L10.5 2.50112L10.496 14.295L14.1414 10.6466C14.3148 10.4729 14.5842 10.4534 14.7792 10.5882L14.8485 10.646C15.0222 10.8194 15.0418 11.0888 14.907 11.2838L14.8492 11.3531L10.3574 15.8531C10.285 15.9257 10.1957 15.9714 10.1021 15.9901L9.99608 15.9999C9.83511 15.9999 9.69192 15.9237 9.60051 15.8056L5.14386 11.3537C4.94846 11.1586 4.94823 10.842 5.14336 10.6466C5.3168 10.4729 5.58621 10.4534 5.78117 10.5883L5.85046 10.6461L9.496 14.287L9.5 2.50083C9.50008 2.22469 9.724 2.00098 10.0001 2.00098Z" fill="#424242"/></svg>`;
+const ToolbarPrintIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4.5C5 3.67157 5.67157 3 6.5 3H13.5C14.3284 3 15 3.67157 15 4.5V5H15.5C16.8807 5 18 6.11929 18 7.5V12.5C18 13.3284 17.3284 14 16.5 14H15V15.5C15 16.3284 14.3284 17 13.5 17H6.5C5.67157 17 5 16.3284 5 15.5V14H3.5C2.67157 14 2 13.3284 2 12.5V7.5C2 6.11929 3.11929 5 4.5 5H5V4.5ZM6 5H14V4.5C14 4.22386 13.7761 4 13.5 4H6.5C6.22386 4 6 4.22386 6 4.5V5ZM5 13V11.5C5 10.6716 5.67157 10 6.5 10H13.5C14.3284 10 15 10.6716 15 11.5V13H16.5C16.7761 13 17 12.7761 17 12.5V7.5C17 6.67157 16.3284 6 15.5 6H4.5C3.67157 6 3 6.67157 3 7.5V12.5C3 12.7761 3.22386 13 3.5 13H5ZM6.5 11C6.22386 11 6 11.2239 6 11.5V15.5C6 15.7761 6.22386 16 6.5 16H13.5C13.7761 16 14 15.7761 14 15.5V11.5C14 11.2239 13.7761 11 13.5 11H6.5Z" fill="#424242"/></svg>`;
 /**
  * Helper to generate a human-readable label for a field.
  */
@@ -66,6 +71,10 @@ const VerdocsSign = class {
          * be externally controlled, use CSS display options to hide/show it instead.
          */
         this.headerTargetId = null;
+        /**
+         * The style of the toolbar to display.
+         */
+        this.toolbarStyle = 'controls';
         this.recipient = null;
         this.hasSignature = false;
         this.nextButtonLabel = 'Start';
@@ -74,6 +83,7 @@ const VerdocsSign = class {
         this.fatalErrorMessage = '';
         this.focusedField = '';
         this.disclosures = jsSdk.DEFAULT_DISCLOSURES;
+        this.fieldUpdateCounter = 0;
         this.submitting = false;
         this.submitted = false;
         this.isDone = false;
@@ -88,8 +98,10 @@ const VerdocsSign = class {
         this.documentsSingularPlural = 'document';
         this.authStep = null;
         this.authMethodStates = {};
+        this.pageNumber = 1;
         this.kbaQuestions = null;
         this.showSpinner = false;
+        // @State() fieldUpdateCounter = 0;
         this.declining = false;
         this.delegating = false;
         this.delegated = false;
@@ -205,6 +217,21 @@ const VerdocsSign = class {
             this.submitting = false;
         });
     }
+    handlePageSelect(e) {
+        const pageNumber = parseInt(e.target.value);
+        if (!isNaN(pageNumber)) {
+            this.pageNumber = pageNumber;
+            // We manually scroll the container to the top of the page element.
+            // This avoids issues where the page might be nested or scrollIntoView behaves unexpectedly.
+            const container = this.el.querySelector('.signed-document-container');
+            const pageEl = this.el.querySelector(`#page-${pageNumber}`);
+            if (container && pageEl) {
+                // 20px buffer for visual spacing
+                const top = pageEl.offsetTop - 20;
+                container.scrollTo({ top, behavior: 'smooth' });
+            }
+        }
+    }
     async handleOptionSelected(e) {
         var _a, _b, _c;
         switch (e.detail.id) {
@@ -245,6 +272,7 @@ const VerdocsSign = class {
                 // TODO: Keeping this while attachments still rely on it
                 oldField.settings = updateResult.settings;
                 utils.updateDocumentFieldValue(oldField);
+                this.fieldUpdateCounter++;
                 this.checkRecipientFields();
             }
         });
@@ -405,22 +433,6 @@ const VerdocsSign = class {
                 //  NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which
                 //  the new node is to be inserted is not a child of this node.
                 window.location.reload();
-                // this.recipient.status = 'submitted';
-                // this.showDone = true;
-                // console.log('[SIGN] Reloading envelope');
-                // getEnvelope(this.endpoint, this.envelopeId)
-                //   .then(envelope => {
-                //     this.envelope = envelope;
-                //     // The show-done dialog does this
-                //     // this.isDone = true;
-                //     this.submitting = false;
-                //   })
-                //   .catch(e => {
-                //     // this.isDone = true;
-                //     console.log('[SIGN] Error reloading envelope', e);
-                //     VerdocsToast('Unable to save changes, please try again later', {style: 'error'});
-                //     this.submitting = false;
-                //   });
             }
             catch (e) {
                 console.log('[SIGN] Error submitting', e);
@@ -460,21 +472,11 @@ const VerdocsSign = class {
         const emptyFields = this.getSortedFillableFields().filter(field => field.required && !jsSdk.isFieldFilled(field, this.getRecipientFields()));
         jsSdk.sortFields(emptyFields);
         console.log('[SIGN] Pending fields', emptyFields.map(f => `${f.name} (${f.type}) req=${f.required}`));
-        // If everything required is filled, try optional fields?
-        // The previous logic only looked for required fields for "Next".
-        // If we want "Fill or Skip", we should probably look for ANY unfilled field if we want to guide them to optionals too.
-        // BUT the requirement said: "just want to show a single flag for whatever the next field is the recipient needs to fill out."
-        // "Needs to fill out" strongly implies required.
-        // However, goal #4 says: "If it is optional, it should say 'Fill or Skip'".
-        // This implies we DO want to catch optional fields too.
         if (emptyFields.length === 0) {
             const allUnfilled = this.getSortedFillableFields().filter(field => !jsSdk.isFieldFilled(field, this.getRecipientFields()));
             jsSdk.sortFields(allUnfilled);
             if (allUnfilled.length > 0) {
                 // If we are here, there are no required fields left, but there are optional ones.
-                // We need to decide if "Next" should jump to them.
-                // Assuming yes based on "Fill or Skip".
-                // Let's use the same logic but with the optional list.
                 return this.getNextFieldFromList(allUnfilled);
             }
             return null;
@@ -530,9 +532,8 @@ const VerdocsSign = class {
             let label = 'FILL';
             let showSkip = false;
             if (!nextField.required) {
-                label = 'FILL or SKIP';
+                label = 'FILL';
                 showSkip = true; // Use the X to skip? Or just text? "Fill or Skip" implies maybe just text.
-                // But the previous implementation set `showSkip = true` if not required.
             }
             utils.renderDocumentFlag(pageInfo, nextField.y, nextField.height || utils.defaultHeight(nextField.type), {
                 variant,
@@ -550,99 +551,6 @@ const VerdocsSign = class {
                 },
             });
         }
-        // LEGACY FLAG LOGIC - Commented out for now
-        /*
-        // Get fields for this page
-        const myFields = this.getRecipientFields().filter(f => f.document_id === pageInfo.documentId && f.page === pageNumber);
-        // Sort priority:
-        // 1. Vertical: Top to Bottom (Descending Y)
-        // 2. Horizontal: Left to Right (Ascending X) - for stability
-        myFields.sort((a, b) => {
-          if (Math.abs(b.y - a.y) > 1) {
-            return b.y - a.y;
-          }
-          return a.x - b.x;
-        });
-    
-        // console.log('[SIGN] Sorted fields for page', pageNumber, myFields.map(f => `${f.name}:${f.y}`));
-    
-        const flagGroups: IEnvelopeField[][] = [];
-        const FLAG_HEIGHT = 24;
-    
-        myFields.forEach(field => {
-          if (flagGroups.length === 0) {
-            flagGroups.push([field]);
-            return;
-          }
-    
-          const lastGroup = flagGroups[flagGroups.length - 1];
-          const lastField = lastGroup[lastGroup.length - 1];
-    
-          // Compute rendered centers (pixels)
-          // Note: We need rescale logic here. Since we don't have the import, we'll replicate the simple math: val * scale
-          // assuming standard coordinate scaling.
-          const getCenterY = (f: IEnvelopeField) => f.y * pageInfo.yScale + ((f.height || defaultHeight(f.type)) * pageInfo.yScale) / 2;
-    
-          const lastCenter = getCenterY(lastField);
-          const currCenter = getCenterY(field);
-          const dist = Math.abs(lastCenter - currCenter);
-    
-          // console.log(`[SIGN] Check overlap ${lastField.name} vs ${field.name}: dist=${dist} vs ${FLAG_HEIGHT}`, {lastCenter, currCenter});
-    
-          // If centers are closer than Flag Height, they overlap visually.
-          if (dist < FLAG_HEIGHT) {
-            lastGroup.push(field);
-          } else {
-            flagGroups.push([field]);
-          }
-        });
-    
-        // console.log('[SIGN] Flag groups', flagGroups.map(g => g.map(f => f.name).join(',')));
-    
-        flagGroups.forEach(group => {
-          // Priority: First Unfilled Required > First Unfilled Optional > First Next
-          let winner = group.find(f => f.required && !isFieldFilled(f, this.getRecipientFields()));
-          if (!winner) {
-            winner = group.find(f => !f.required && !isFieldFilled(f, this.getRecipientFields()));
-          }
-          if (!winner) {
-            // Fallback to first (Top-most) if all filled
-            winner = group[0];
-          }
-    
-          if (winner) {
-            const isFilled = isFieldFilled(winner, this.getRecipientFields());
-    
-            let variant: 'fill' | 'next' = 'fill';
-            let label = 'FILL';
-            let showSkip = false;
-    
-            if (isFilled) {
-              variant = 'next';
-              label = 'NEXT';
-            } else {
-              if (!winner.required) {
-                showSkip = true;
-              }
-            }
-    
-            renderDocumentFlag(pageInfo, winner.y, winner.height || defaultHeight(winner.type), {
-              variant,
-              label,
-              showSkip,
-              onSkip: () => {
-                this.handleNext();
-              },
-              onClick: () => {
-                const id = getFieldId(winner);
-                const el = document.getElementById(id) as any;
-                el?.scrollIntoView({behavior: 'smooth', block: 'center'});
-                el?.focusField?.();
-              },
-            });
-          }
-        });
-        */
     }
     attachFieldAttributes(pageInfo, field, el) {
         // We can get called multiple times as rendering completes and it's hard to avoid that
@@ -703,8 +611,9 @@ const VerdocsSign = class {
             }
         });
         el.addEventListener('focusout', e => {
-            // These field types trigger focusout as they're used, even without a value change
-            if (field.type !== 'dropdown' && field.type !== 'attachment') {
+            // These field types trigger focusout as they're used, even without a value change.
+            // Signature/Initial fields handle their own changes via fieldChange/adopt events, so we ignore focusout to prevent double-saves.
+            if (field.type !== 'dropdown' && field.type !== 'attachment' && field.type !== 'signature' && field.type !== 'initial') {
                 this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
             }
         });
@@ -904,10 +813,35 @@ const VerdocsSign = class {
         invalidFields.length > 0
             ? console.log('[SIGN] Invalid fields remaining', invalidFields.map(field => field.name))
             : console.log('[SIGN] All field valid');
-        return (index.h(index.Host, null, index.h("div", { id: "verdocs-sign-header" }, index.h("div", { class: "inner" }, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, this.envelope.name), index.h("div", { style: { flex: '1' } }), !this.finishLater && index.h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), (() => {
+        const totalPages = this.envelope.documents.reduce((acc, doc) => acc + doc.pages, 0);
+        const pageOptions = jsSdk.integerSequence(1, totalPages).map(p => ({ label: p.toString(), value: p.toString() }));
+        let globalPageCounter = 0;
+        return (index.h(index.Host, null, this.toolbarStyle === 'menu' && (index.h("div", { id: "verdocs-sign-header" }, index.h("div", { class: "inner" }, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, this.envelope.name), index.h("div", { style: { flex: '1' } }), !this.finishLater && index.h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (index.h("div", { class: "controls-toolbar" }, index.h("div", { class: "left-controls" }, index.h("div", { class: "title" }, this.envelope.name)), index.h("div", { class: "center-controls" }, index.h("span", { class: "label" }, "Page"), index.h("div", { class: "select-wrapper" }, index.h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), index.h("span", { class: "count" }, "of ", totalPages)), index.h("div", { class: "right-controls" }, index.h("div", { class: "icon-button minus", innerHTML: ToolbarMinusIcon }), index.h("div", { class: "icon-button plus", innerHTML: ToolbarPlusIcon }), index.h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), index.h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), (() => {
+            // Dependencies: focusedField, fieldUpdateCounter (to force re-calc)
+            // console.log('[SIGN] Render progress', this.focusedField, this.fieldUpdateCounter);
+            // Calculate detailed progress
+            const allFields = this.getSortedFillableFields();
+            const recipientFields = this.getRecipientFields();
+            const requiredFields = allFields.filter(f => f.required);
+            const requiredRemaining = requiredFields.filter(f => !jsSdk.isFieldFilled(f, recipientFields)).length;
+            const optionalFields = allFields.filter(f => !f.required);
+            const optionalRemaining = optionalFields.filter(f => !jsSdk.isFieldFilled(f, recipientFields)).length;
+            const progress = {
+                required: {
+                    remaining: requiredRemaining,
+                    total: requiredFields.length,
+                },
+                optional: {
+                    remaining: optionalRemaining,
+                    total: optionalFields.length,
+                },
+            };
             const focusedFieldObj = this.getSortedFillableFields().find(f => f.name === this.focusedField);
             const currentIndex = this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1;
             const totalFields = this.getSortedFillableFields().length;
+            const remainingFields = this.getSortedFillableFields()
+                .filter(f => f.required && !jsSdk.isFieldFilled(f, this.getRecipientFields()))
+                .map(f => ({ name: f.name, type: f.type, required: f.required }));
             let mode = 'start';
             if (this.nextSubmits) {
                 mode = 'completed';
@@ -915,15 +849,16 @@ const VerdocsSign = class {
             else if (this.signatureId || this.initialId) {
                 mode = 'signing';
             }
-            return (index.h("verdocs-signing-progress", { mode: mode, current: Math.max(1, currentIndex), total: totalFields, fieldLabel: getFieldLabel(focusedFieldObj), fieldCompleted: focusedFieldObj ? !!jsSdk.isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
+            return (index.h("verdocs-signing-progress", { mode: mode, current: Math.max(1, currentIndex), total: totalFields, remainingFields: remainingFields, progress: progress, fieldLabel: getFieldLabel(focusedFieldObj), fieldCompleted: focusedFieldObj ? !!jsSdk.isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
                     this.adoptingSignature = true;
                     // this.handleNext();
                 }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
         })(), index.h("div", { class: "document signed-document-container" }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = jsSdk.integerSequence(1, envelopeDocument.pages);
-            return (index.h(index.Fragment, null, this.envelope.documents.length > 1 && (index.h("div", { class: "document-separator" }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20 2H8C6.9 2 6 2.9 6 4V16C6 17.1 6.9 18 8 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H8V4H20V16ZM4 6H2V20C2 21.1 2.9 22 4 22H18V20H4V6ZM16 12V9C16 8.45 15.55 8 15 8H10V14H15C15.55 14 16 13.55 16 13V12ZM14.5 9.5L14.5001 12.5H11.5V9.5H14.5Z", fill: "currentColor" })), index.h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
+            return (index.h(index.Fragment, null, this.envelope.documents.length > 1 && (index.h("div", { class: "document-separator" }, index.h("div", { innerHTML: Icons.DocumentPageIcon }), index.h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;
                 const pageSize = ((_a = envelopeDocument.page_sizes) === null || _a === void 0 ? void 0 : _a[pageNumber]) || { width: 612, height: 792 };
+                globalPageCounter++;
                 // In signing mode we show the original template page with all the recipient fields so we can show source formatting and
                 // where everything went. This is also a visual indicator when optional fields weren't filled in by previous actors, or
                 // future signers still need to act. Once we're "done" we flip to showing the envelope's documents which have the final
@@ -931,7 +866,7 @@ const VerdocsSign = class {
                 // TODO: Confirm that a pure page-number match is good enough to find the matching template page. We need to make sure
                 //  we either don't reset our page numbers for additional attachments, or add match-on identifiers to work around that.
                 // console.log('tp', templatePage, page);
-                return (index.h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: pageSize.width, virtualHeight: pageSize.height, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", layers: [
+                return (index.h("verdocs-envelope-document-page", { id: `page-${globalPageCounter}`, envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: pageSize.width, virtualHeight: pageSize.height, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", layers: [
                         { name: 'page', type: 'canvas' },
                         { name: 'controls', type: 'div' },
                     ] }));
@@ -959,7 +894,7 @@ const VerdocsSign = class {
                 // If we have a focused field, we should auto-apply the new signature/initials to it
                 if (this.focusedField) {
                     const field = this.getRecipientFields().find(f => f.name === this.focusedField);
-                    if (field && !jsSdk.isFieldFilled(field, this.getRecipientFields())) {
+                    if (field) {
                         console.log('[SIGN] Auto-applying adopted signature to focused field', field.name);
                         if (field.type === 'signature') {
                             const updateResult = await jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.signatureId, false);
@@ -981,6 +916,7 @@ const VerdocsSign = class {
                 });
             }, onDecline: () => (this.declining = true), onFinishLater: () => (this.showFinishLater = true) }))));
     }
+    get el() { return index.getElement(this); }
 };
 VerdocsSign.style = verdocsSignCss;