drill-widgets 2.7.16 → 2.7.17

package/dist/drill-widgets.es.js

@@ -3,18 +3,18 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const K = globalThis, he = K.ShadowRoot && (K.ShadyCSS === void 0 || K.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, ge = Symbol(), ve = /* @__PURE__ */ new WeakMap();
+const K = globalThis, ge = K.ShadowRoot && (K.ShadyCSS === void 0 || K.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, me = Symbol(), xe = /* @__PURE__ */ new WeakMap();
 let Fe = class {
   constructor(e, t, i) {
-    if (this._$cssResult$ = !0, i !== ge) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, i !== me) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = t;
   }
   get styleSheet() {
     let e = this.o;
     const t = this.t;
-    if (he && e === void 0) {
+    if (ge && e === void 0) {
       const i = t !== void 0 && t.length === 1;
-      i && (e = ve.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && ve.set(t, e));
+      i && (e = xe.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && xe.set(t, e));
     }
     return e;
   }
@@ -22,20 +22,20 @@ let Fe = class {
     return this.cssText;
   }
 };
-const Oe = (s) => new Fe(typeof s == "string" ? s : s + "", void 0, ge), O = (s, ...e) => {
+const Oe = (s) => new Fe(typeof s == "string" ? s : s + "", void 0, me), O = (s, ...e) => {
   const t = s.length === 1 ? s[0] : e.reduce((i, r, n) => i + ((o) => {
     if (o._$cssResult$ === !0) return o.cssText;
     if (typeof o == "number") return o;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + o + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(r) + s[n + 1], s[0]);
-  return new Fe(t, s, ge);
+  return new Fe(t, s, me);
 }, Re = (s, e) => {
-  if (he) s.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  if (ge) s.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
     const i = document.createElement("style"), r = K.litNonce;
     r !== void 0 && i.setAttribute("nonce", r), i.textContent = t.cssText, s.appendChild(i);
   }
-}, xe = he ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((e) => {
+}, _e = ge ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const i of e.cssRules) t += i.cssText;
   return Oe(t);
@@ -45,7 +45,7 @@ const Oe = (s) => new Fe(typeof s == "string" ? s : s + "", void 0, ge), O = (s,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: We, defineProperty: He, getOwnPropertyDescriptor: Ve, getOwnPropertyNames: je, getOwnPropertySymbols: Be, getPrototypeOf: Qe } = Object, M = globalThis, _e = M.trustedTypes, Ge = _e ? _e.emptyScript : "", re = M.reactiveElementPolyfillSupport, H = (s, e) => s, J = { toAttribute(s, e) {
+const { is: Ve, defineProperty: We, getOwnPropertyDescriptor: He, getOwnPropertyNames: je, getOwnPropertySymbols: Be, getPrototypeOf: Qe } = Object, M = globalThis, ye = M.trustedTypes, Ge = ye ? ye.emptyScript : "", re = M.reactiveElementPolyfillSupport, W = (s, e) => s, J = { toAttribute(s, e) {
   switch (e) {
     case Boolean:
       s = s ? Ge : null;
@@ -73,23 +73,23 @@ const { is: We, defineProperty: He, getOwnPropertyDescriptor: Ve, getOwnProperty
       }
   }
   return t;
-} }, me = (s, e) => !We(s, e), ye = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: me };
+} }, fe = (s, e) => !Ve(s, e), we = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: fe };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), M.litPropertyMetadata ?? (M.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let U = class extends HTMLElement {
+let P = class extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(e, t = ye) {
+  static createProperty(e, t = we) {
     if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
       const i = Symbol(), r = this.getPropertyDescriptor(e, i, t);
-      r !== void 0 && He(this.prototype, e, r);
+      r !== void 0 && We(this.prototype, e, r);
     }
   }
   static getPropertyDescriptor(e, t, i) {
-    const { get: r, set: n } = Ve(this.prototype, e) ?? { get() {
+    const { get: r, set: n } = He(this.prototype, e) ?? { get() {
       return this[t];
     }, set(o) {
       this[t] = o;
@@ -100,16 +100,16 @@ let U = class extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
-    return this.elementProperties.get(e) ?? ye;
+    return this.elementProperties.get(e) ?? we;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(H("elementProperties"))) return;
+    if (this.hasOwnProperty(W("elementProperties"))) return;
     const e = Qe(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(H("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(H("properties"))) {
+    if (this.hasOwnProperty(W("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(W("properties"))) {
       const t = this.properties, i = [...je(t), ...Be(t)];
       for (const r of i) this.createProperty(r, t[r]);
     }
@@ -129,8 +129,8 @@ let U = class extends HTMLElement {
     const t = [];
     if (Array.isArray(e)) {
       const i = new Set(e.flat(1 / 0).reverse());
-      for (const r of i) t.unshift(xe(r));
-    } else e !== void 0 && t.push(xe(e));
+      for (const r of i) t.unshift(_e(r));
+    } else e !== void 0 && t.push(_e(e));
     return t;
   }
   static _$Eu(e, t) {
@@ -200,7 +200,7 @@ let U = class extends HTMLElement {
     var r;
     if (e !== void 0) {
       const n = this.constructor, o = this[e];
-      if (i ?? (i = n.getPropertyOptions(e)), !((i.hasChanged ?? me)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(n._$Eu(e, i)))) return;
+      if (i ?? (i = n.getPropertyOptions(e)), !((i.hasChanged ?? fe)(o, t) || i.useDefault && i.reflect && o === ((r = this._$Ej) == null ? void 0 : r.get(e)) && !this.hasAttribute(n._$Eu(e, i)))) return;
       this.C(e, t, i);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
@@ -276,18 +276,18 @@ let U = class extends HTMLElement {
   firstUpdated(e) {
   }
 };
-U.elementStyles = [], U.shadowRootOptions = { mode: "open" }, U[H("elementProperties")] = /* @__PURE__ */ new Map(), U[H("finalized")] = /* @__PURE__ */ new Map(), re == null || re({ ReactiveElement: U }), (M.reactiveElementVersions ?? (M.reactiveElementVersions = [])).push("2.1.0");
+P.elementStyles = [], P.shadowRootOptions = { mode: "open" }, P[W("elementProperties")] = /* @__PURE__ */ new Map(), P[W("finalized")] = /* @__PURE__ */ new Map(), re == null || re({ ReactiveElement: P }), (M.reactiveElementVersions ?? (M.reactiveElementVersions = [])).push("2.1.0");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const V = globalThis, X = V.trustedTypes, we = X ? X.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, ze = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ie = "?" + E, Ye = `<${Ie}>`, I = document, j = () => I.createComment(""), B = (s) => s === null || typeof s != "object" && typeof s != "function", fe = Array.isArray, qe = (s) => fe(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", ne = `[ 	
-\f\r]`, R = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Se = /-->/g, ke = />/g, T = RegExp(`>|${ne}(?:([^\\s"'>=/]+)(${ne}*=${ne}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), $e = /'/g, De = /"/g, Pe = /^(?:script|style|textarea|title)$/i, Ke = (s) => (e, ...t) => ({ _$litType$: s, strings: e, values: t }), l = Ke(1), P = Symbol.for("lit-noChange"), x = Symbol.for("lit-nothing"), Ce = /* @__PURE__ */ new WeakMap(), F = I.createTreeWalker(I, 129);
-function Ue(s, e) {
-  if (!fe(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return we !== void 0 ? we.createHTML(e) : e;
+const H = globalThis, X = H.trustedTypes, Se = X ? X.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, ze = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, Ie = "?" + E, Ye = `<${Ie}>`, I = document, j = () => I.createComment(""), B = (s) => s === null || typeof s != "object" && typeof s != "function", be = Array.isArray, qe = (s) => be(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", ne = `[ 	
+\f\r]`, R = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ke = /-->/g, $e = />/g, T = RegExp(`>|${ne}(?:([^\\s"'>=/]+)(${ne}*=${ne}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), De = /'/g, Ce = /"/g, Ue = /^(?:script|style|textarea|title)$/i, Ke = (s) => (e, ...t) => ({ _$litType$: s, strings: e, values: t }), l = Ke(1), U = Symbol.for("lit-noChange"), _ = Symbol.for("lit-nothing"), Ae = /* @__PURE__ */ new WeakMap(), F = I.createTreeWalker(I, 129);
+function Pe(s, e) {
+  if (!be(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return Se !== void 0 ? Se.createHTML(e) : e;
 }
 const Je = (s, e) => {
   const t = s.length - 1, i = [];
@@ -295,11 +295,11 @@ const Je = (s, e) => {
   for (let a = 0; a < t; a++) {
     const d = s[a];
     let p, c, u = -1, h = 0;
-    for (; h < d.length && (o.lastIndex = h, c = o.exec(d), c !== null); ) h = o.lastIndex, o === R ? c[1] === "!--" ? o = Se : c[1] !== void 0 ? o = ke : c[2] !== void 0 ? (Pe.test(c[2]) && (r = RegExp("</" + c[2], "g")), o = T) : c[3] !== void 0 && (o = T) : o === T ? c[0] === ">" ? (o = r ?? R, u = -1) : c[1] === void 0 ? u = -2 : (u = o.lastIndex - c[2].length, p = c[1], o = c[3] === void 0 ? T : c[3] === '"' ? De : $e) : o === De || o === $e ? o = T : o === Se || o === ke ? o = R : (o = T, r = void 0);
+    for (; h < d.length && (o.lastIndex = h, c = o.exec(d), c !== null); ) h = o.lastIndex, o === R ? c[1] === "!--" ? o = ke : c[1] !== void 0 ? o = $e : c[2] !== void 0 ? (Ue.test(c[2]) && (r = RegExp("</" + c[2], "g")), o = T) : c[3] !== void 0 && (o = T) : o === T ? c[0] === ">" ? (o = r ?? R, u = -1) : c[1] === void 0 ? u = -2 : (u = o.lastIndex - c[2].length, p = c[1], o = c[3] === void 0 ? T : c[3] === '"' ? Ce : De) : o === Ce || o === De ? o = T : o === ke || o === $e ? o = R : (o = T, r = void 0);
     const g = o === T && s[a + 1].startsWith("/>") ? " " : "";
     n += o === R ? d + Ye : u >= 0 ? (i.push(p), d.slice(0, u) + ze + d.slice(u) + E + g) : d + E + (u === -2 ? a : g);
   }
-  return [Ue(s, n + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
+  return [Pe(s, n + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
 };
 class Q {
   constructor({ strings: e, _$litType$: t }, i) {
@@ -317,7 +317,7 @@ class Q {
           const h = c[o++], g = r.getAttribute(u).split(E), v = /([.?@])?(.*)/.exec(h);
           d.push({ type: 1, index: n, name: v[2], strings: g, ctor: v[1] === "." ? Ze : v[1] === "?" ? et : v[1] === "@" ? tt : se }), r.removeAttribute(u);
         } else u.startsWith(E) && (d.push({ type: 6, index: n }), r.removeAttribute(u));
-        if (Pe.test(r.tagName)) {
+        if (Ue.test(r.tagName)) {
           const u = r.textContent.split(E), h = u.length - 1;
           if (h > 0) {
             r.textContent = X ? X.emptyScript : "";
@@ -340,7 +340,7 @@ class Q {
 }
 function L(s, e, t = s, i) {
   var o, a;
-  if (e === P) return e;
+  if (e === U) return e;
   let r = i !== void 0 ? (o = t._$Co) == null ? void 0 : o[i] : t._$Cl;
   const n = B(e) ? void 0 : e._$litDirective$;
   return (r == null ? void 0 : r.constructor) !== n && ((a = r == null ? void 0 : r._$AO) == null || a.call(r, !1), n === void 0 ? r = void 0 : (r = new n(s), r._$AT(s, t, i)), i !== void 0 ? (t._$Co ?? (t._$Co = []))[i] = r : t._$Cl = r), r !== void 0 && (e = L(s, r._$AS(s, e.values), r, i)), e;
@@ -379,7 +379,7 @@ class G {
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
   constructor(e, t, i, r) {
-    this.type = 2, this._$AH = x, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = r, this._$Cv = (r == null ? void 0 : r.isConnected) ?? !0;
+    this.type = 2, this._$AH = _, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = r, this._$Cv = (r == null ? void 0 : r.isConnected) ?? !0;
   }
   get parentNode() {
     let e = this._$AA.parentNode;
@@ -393,7 +393,7 @@ class G {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = L(this, e, t), B(e) ? e === x || e == null || e === "" ? (this._$AH !== x && this._$AR(), this._$AH = x) : e !== this._$AH && e !== P && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : qe(e) ? this.k(e) : this._(e);
+    e = L(this, e, t), B(e) ? e === _ || e == null || e === "" ? (this._$AH !== _ && this._$AR(), this._$AH = _) : e !== this._$AH && e !== U && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : qe(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -402,11 +402,11 @@ class G {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== x && B(this._$AH) ? this._$AA.nextSibling.data = e : this.T(I.createTextNode(e)), this._$AH = e;
+    this._$AH !== _ && B(this._$AH) ? this._$AA.nextSibling.data = e : this.T(I.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var n;
-    const { values: t, _$litType$: i } = e, r = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = Q.createElement(Ue(i.h, i.h[0]), this.options)), i);
+    const { values: t, _$litType$: i } = e, r = typeof i == "number" ? this._$AC(e) : (i.el === void 0 && (i.el = Q.createElement(Pe(i.h, i.h[0]), this.options)), i);
     if (((n = this._$AH) == null ? void 0 : n._$AD) === r) this._$AH.p(t);
     else {
       const o = new Xe(r, this), a = o.u(this.options);
@@ -414,11 +414,11 @@ class G {
     }
   }
   _$AC(e) {
-    let t = Ce.get(e.strings);
-    return t === void 0 && Ce.set(e.strings, t = new Q(e)), t;
+    let t = Ae.get(e.strings);
+    return t === void 0 && Ae.set(e.strings, t = new Q(e)), t;
   }
   k(e) {
-    fe(this._$AH) || (this._$AH = [], this._$AR());
+    be(this._$AH) || (this._$AH = [], this._$AR());
     const t = this._$AH;
     let i, r = 0;
     for (const n of e) r === t.length ? t.push(i = new G(this.O(j()), this.O(j()), this, this.options)) : i = t[r], i._$AI(n), r++;
@@ -444,21 +444,21 @@ class se {
     return this._$AM._$AU;
   }
   constructor(e, t, i, r, n) {
-    this.type = 1, this._$AH = x, this._$AN = void 0, this.element = e, this.name = t, this._$AM = r, this.options = n, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = x;
+    this.type = 1, this._$AH = _, this._$AN = void 0, this.element = e, this.name = t, this._$AM = r, this.options = n, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = _;
   }
   _$AI(e, t = this, i, r) {
     const n = this.strings;
     let o = !1;
-    if (n === void 0) e = L(this, e, t, 0), o = !B(e) || e !== this._$AH && e !== P, o && (this._$AH = e);
+    if (n === void 0) e = L(this, e, t, 0), o = !B(e) || e !== this._$AH && e !== U, o && (this._$AH = e);
     else {
       const a = e;
       let d, p;
-      for (e = n[0], d = 0; d < n.length - 1; d++) p = L(this, a[i + d], t, d), p === P && (p = this._$AH[d]), o || (o = !B(p) || p !== this._$AH[d]), p === x ? e = x : e !== x && (e += (p ?? "") + n[d + 1]), this._$AH[d] = p;
+      for (e = n[0], d = 0; d < n.length - 1; d++) p = L(this, a[i + d], t, d), p === U && (p = this._$AH[d]), o || (o = !B(p) || p !== this._$AH[d]), p === _ ? e = _ : e !== _ && (e += (p ?? "") + n[d + 1]), this._$AH[d] = p;
     }
     o && !r && this.j(e);
   }
   j(e) {
-    e === x ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === _ ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
 class Ze extends se {
@@ -466,7 +466,7 @@ class Ze extends se {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === x ? void 0 : e;
+    this.element[this.name] = e === _ ? void 0 : e;
   }
 }
 class et extends se {
@@ -474,7 +474,7 @@ class et extends se {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== x);
+    this.element.toggleAttribute(this.name, !!e && e !== _);
   }
 }
 class tt extends se {
@@ -482,8 +482,8 @@ class tt extends se {
     super(e, t, i, r, n), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = L(this, e, t, 0) ?? x) === P) return;
-    const i = this._$AH, r = e === x && i !== x || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, n = e !== x && (i === x || r);
+    if ((e = L(this, e, t, 0) ?? _) === U) return;
+    const i = this._$AH, r = e === _ && i !== _ || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, n = e !== _ && (i === _ || r);
     r && this.element.removeEventListener(this.name, this, i), n && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
@@ -502,8 +502,8 @@ class it {
     L(this, e);
   }
 }
-const oe = V.litHtmlPolyfillSupport;
-oe == null || oe(Q, G), (V.litHtmlVersions ?? (V.litHtmlVersions = [])).push("3.3.0");
+const oe = H.litHtmlPolyfillSupport;
+oe == null || oe(Q, G), (H.litHtmlVersions ?? (H.litHtmlVersions = [])).push("3.3.0");
 const st = (s, e, t) => {
   const i = (t == null ? void 0 : t.renderBefore) ?? e;
   let r = i._$litPart$;
@@ -519,7 +519,7 @@ const st = (s, e, t) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const z = globalThis;
-let N = class extends U {
+let N = class extends P {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -541,7 +541,7 @@ let N = class extends U {
     super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
   }
   render() {
-    return P;
+    return U;
   }
 };
 var Te;
@@ -564,7 +564,7 @@ const Ne = (s) => (e, t) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const rt = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged: me }, nt = (s = rt, e, t) => {
+const rt = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged: fe }, nt = (s = rt, e, t) => {
   const { kind: i, metadata: r } = t;
   let n = globalThis.litPropertyMetadata.get(r);
   if (n === void 0 && globalThis.litPropertyMetadata.set(r, n = /* @__PURE__ */ new Map()), i === "setter" && ((s = Object.create(s)).wrapped = !0), n.set(t.name, s), i === "accessor") {
@@ -599,11 +599,11 @@ function C(s) {
 function b(s) {
   return C({ ...s, state: !0, attribute: !1 });
 }
-const w = [];
+const S = [];
 for (let s = 0; s < 256; ++s)
-  w.push((s + 256).toString(16).slice(1));
+  S.push((s + 256).toString(16).slice(1));
 function ot(s, e = 0) {
-  return (w[s[e + 0]] + w[s[e + 1]] + w[s[e + 2]] + w[s[e + 3]] + "-" + w[s[e + 4]] + w[s[e + 5]] + "-" + w[s[e + 6]] + w[s[e + 7]] + "-" + w[s[e + 8]] + w[s[e + 9]] + "-" + w[s[e + 10]] + w[s[e + 11]] + w[s[e + 12]] + w[s[e + 13]] + w[s[e + 14]] + w[s[e + 15]]).toLowerCase();
+  return (S[s[e + 0]] + S[s[e + 1]] + S[s[e + 2]] + S[s[e + 3]] + "-" + S[s[e + 4]] + S[s[e + 5]] + "-" + S[s[e + 6]] + S[s[e + 7]] + "-" + S[s[e + 8]] + S[s[e + 9]] + "-" + S[s[e + 10]] + S[s[e + 11]] + S[s[e + 12]] + S[s[e + 13]] + S[s[e + 14]] + S[s[e + 15]]).toLowerCase();
 }
 let de;
 const at = new Uint8Array(16);
@@ -615,11 +615,11 @@ function dt() {
   }
   return de(at);
 }
-const lt = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Ae = { randomUUID: lt };
+const lt = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Ee = { randomUUID: lt };
 function A(s, e, t) {
   var r;
-  if (Ae.randomUUID && !s)
-    return Ae.randomUUID();
+  if (Ee.randomUUID && !s)
+    return Ee.randomUUID();
   s = s || {};
   const i = s.random ?? ((r = s.rng) == null ? void 0 : r.call(s)) ?? dt();
   if (i.length < 16)
@@ -3337,6 +3337,44 @@ const pt = O`
     width: 100%;
   }
 
+  /* Submission Error Icon */
+  .submission-error-icon {
+    color: #ef4444;
+    margin-bottom: 16px;
+  }
+
+  .submission-error-icon svg {
+    stroke: #ef4444;
+  }
+
+  /* Error badge in sidebar */
+  .runner-step-badge.error {
+    background: #fee2e2;
+    color: #dc2626;
+  }
+
+  /* Retry Button */
+  .retry-button {
+    background: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    padding: 12px 24px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    margin-top: 24px;
+  }
+
+  .retry-button:hover {
+    background: #2563eb;
+  }
+
+  .retry-button:active {
+    background: #1d4ed8;
+  }
+
   /* Clean styling for checkbox lists in print */
   .print-response-value.checkbox-response div {
     margin: 2px 0;
@@ -3847,12 +3885,12 @@ const pt = O`
     }
   }
 `;
-var gt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, S = (s, e, t, i) => {
+var gt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, k = (s, e, t, i) => {
   for (var r = i > 1 ? void 0 : i ? mt(e, t) : e, n = s.length - 1, o; n >= 0; n--)
     (o = s[n]) && (r = (i ? o(e, t, r) : o(r)) || r);
   return i && r && gt(e, t, r), r;
 };
-let _ = class extends N {
+let y = class extends N {
   constructor() {
     super(...arguments), this._templateData = {
       name: "",
@@ -5442,64 +5480,64 @@ Use **bold** and *italic* text.`;
     `;
   }
 };
-_.styles = O`
+y.styles = O`
     ${pt}
     ${ct}
     ${ut}
     ${Le}
     ${ht}
   `;
-S([
+k([
   b()
-], _.prototype, "_templateData", 2);
-S([
+], y.prototype, "_templateData", 2);
+k([
   b()
-], _.prototype, "_showStepModal", 2);
-S([
+], y.prototype, "_showStepModal", 2);
+k([
   b()
-], _.prototype, "_stepFormData", 2);
-S([
+], y.prototype, "_stepFormData", 2);
+k([
   b()
-], _.prototype, "_draggedStepId", 2);
-S([
+], y.prototype, "_draggedStepId", 2);
+k([
   b()
-], _.prototype, "_dragOverStepId", 2);
-S([
+], y.prototype, "_dragOverStepId", 2);
+k([
   b()
-], _.prototype, "_selectedStepId", 2);
-S([
+], y.prototype, "_selectedStepId", 2);
+k([
   b()
-], _.prototype, "_questions", 2);
-S([
+], y.prototype, "_questions", 2);
+k([
   b()
-], _.prototype, "_editingStepId", 2);
-S([
+], y.prototype, "_editingStepId", 2);
+k([
   b()
-], _.prototype, "_stepAssignmentCategory", 2);
-S([
+], y.prototype, "_stepAssignmentCategory", 2);
+k([
   b()
-], _.prototype, "_stepAssignmentType", 2);
-S([
+], y.prototype, "_stepAssignmentType", 2);
+k([
   b()
-], _.prototype, "_stepAssignmentTarget", 2);
-S([
+], y.prototype, "_stepAssignmentTarget", 2);
+k([
   b()
-], _.prototype, "_stepAssignmentFirstName", 2);
-S([
+], y.prototype, "_stepAssignmentFirstName", 2);
+k([
   b()
-], _.prototype, "_stepAssignmentLastName", 2);
-S([
+], y.prototype, "_stepAssignmentLastName", 2);
+k([
   C({ attribute: !1 })
-], _.prototype, "onCancel", 2);
-S([
+], y.prototype, "onCancel", 2);
+k([
   C({ attribute: !1 })
-], _.prototype, "workflow", 2);
-S([
+], y.prototype, "workflow", 2);
+k([
   b()
-], _.prototype, "_openMenuStepId", 2);
-_ = S([
+], y.prototype, "_openMenuStepId", 2);
+y = k([
   Ne("builder-widget")
-], _);
+], y);
 class ft {
   constructor(e, t) {
     this.signaturePads = e, this.savedSignatures = t;
@@ -5664,13 +5702,13 @@ class Z {
     return this.time !== e.time ? this.distanceTo(e) / (this.time - e.time) : 0;
   }
 }
-class be {
+class ve {
   static fromPoints(e, t) {
     const i = this.calculateControlPoints(e[0], e[1], e[2]).c2, r = this.calculateControlPoints(e[1], e[2], e[3]).c1;
-    return new be(e[1], i, r, e[2], t.start, t.end);
+    return new ve(e[1], i, r, e[2], t.start, t.end);
   }
   static calculateControlPoints(e, t, i) {
-    const r = e.x - t.x, n = e.y - t.y, o = t.x - i.x, a = t.y - i.y, d = { x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 }, p = { x: (t.x + i.x) / 2, y: (t.y + i.y) / 2 }, c = Math.sqrt(r * r + n * n), u = Math.sqrt(o * o + a * a), h = d.x - p.x, g = d.y - p.y, v = c + u == 0 ? 0 : u / (c + u), $ = { x: p.x + h * v, y: p.y + g * v }, Y = t.x - $.x, q = t.y - $.y;
+    const r = e.x - t.x, n = e.y - t.y, o = t.x - i.x, a = t.y - i.y, d = { x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 }, p = { x: (t.x + i.x) / 2, y: (t.y + i.y) / 2 }, c = Math.sqrt(r * r + n * n), u = Math.sqrt(o * o + a * a), h = d.x - p.x, g = d.y - p.y, v = c + u == 0 ? 0 : u / (c + u), w = { x: p.x + h * v, y: p.y + g * v }, Y = t.x - w.x, q = t.y - w.y;
     return {
       c1: new Z(d.x + Y, d.y + q),
       c2: new Z(p.x + Y, p.y + q)
@@ -5936,7 +5974,7 @@ class ee extends vt {
     const { _lastPoints: i } = this;
     if (i.push(e), i.length > 2) {
       i.length === 3 && i.unshift(i[0]);
-      const r = this._calculateCurveWidths(i[1], i[2], t), n = be.fromPoints(i, r);
+      const r = this._calculateCurveWidths(i[1], i[2], t), n = ve.fromPoints(i, r);
       return i.shift(), n;
     }
     return null;
@@ -5964,8 +6002,8 @@ class ee extends vt {
       g += 3 * u * a * e.control1.x, g += 3 * c * d * e.control2.x, g += p * e.endPoint.x;
       let v = h * e.startPoint.y;
       v += 3 * u * a * e.control1.y, v += 3 * c * d * e.control2.y, v += p * e.endPoint.y;
-      const $ = Math.min(e.startWidth + p * r, t.maxWidth);
-      this._drawCurveSegment(g, v, $);
+      const w = Math.min(e.startWidth + p * r, t.maxWidth);
+      this._drawCurveSegment(g, v, w);
     }
     i.closePath(), i.fill();
   }
@@ -6000,8 +6038,8 @@ class ee extends vt {
         u.setAttribute("d", h), u.setAttribute("stroke-width", (p.endWidth * 2.25).toFixed(3)), u.setAttribute("stroke", c), u.setAttribute("fill", "none"), u.setAttribute("stroke-linecap", "round"), d.appendChild(u);
       }
     }, (p, { penColor: c, dotSize: u, minWidth: h, maxWidth: g }) => {
-      const v = document.createElement("circle"), $ = u > 0 ? u : (h + g) / 2;
-      v.setAttribute("r", $.toString()), v.setAttribute("cx", p.x.toString()), v.setAttribute("cy", p.y.toString()), v.setAttribute("fill", c), d.appendChild(v);
+      const v = document.createElement("circle"), w = u > 0 ? u : (h + g) / 2;
+      v.setAttribute("r", w.toString()), v.setAttribute("cx", p.x.toString()), v.setAttribute("cy", p.y.toString()), v.setAttribute("fill", c), d.appendChild(v);
     }), d.outerHTML;
   }
 }
@@ -6414,7 +6452,7 @@ te.QUESTION_ELEMENT_TYPES = [
   "file_upload",
   "signature"
 ];
-let pe = te;
+let ce = te;
 const ie = class ie {
   // 5MB in bytes
   constructor(e, t) {
@@ -6508,8 +6546,8 @@ const ie = class ie {
   }
 };
 ie.MAX_FILE_SIZE = 5 * 1024 * 1024;
-let ce = ie;
-class k {
+let ue = ie;
+class $ {
   /**
    * Determines if a form element should be disabled based on context
    * Centralizes the disabled logic for consistency across all input types
@@ -6540,7 +6578,7 @@ class k {
   // Extract file extension and guess type
   static _guessFileTypeFromUrl(e) {
     var n;
-    const i = (n = k._extractFilenameFromUrl(e).split(".").pop()) == null ? void 0 : n.toLowerCase();
+    const i = (n = $._extractFilenameFromUrl(e).split(".").pop()) == null ? void 0 : n.toLowerCase();
     return i ? {
       pdf: "PDF Document",
       doc: "Word Document",
@@ -6781,23 +6819,23 @@ class k {
               <div class="print-response-value file-response">
                 📎 ${r.name}
                 ${r.size ? l` <span class="file-size"
-                      >(${k._formatFileSize(r.size)})</span
+                      >(${$._formatFileSize(r.size)})</span
                     >` : ""}
               </div>
             `;
           if (n) {
-            const a = k._extractFilenameFromUrl(r);
+            const a = $._extractFilenameFromUrl(r);
             return l` <div class="print-response-value file-response">📎 ${a}</div> `;
           } else
             return l` <div class="print-response-value file-response">📎 ${r}</div> `;
         } else {
-          const a = n ? r : "#", d = o ? r.name : n ? k._extractFilenameFromUrl(r) : "View File";
+          const a = n ? r : "#", d = o ? r.name : n ? $._extractFilenameFromUrl(r) : "View File";
           return l`
             <div class="file-upload-view-only">
               <a href="${a}" target="_blank" class="file-link"> 📎 ${d} </a>
               ${o && r.size ? l`
                     <span class="file-size-info"
-                      >(${k._formatFileSize(r.size)})</span
+                      >(${$._formatFileSize(r.size)})</span
                     >
                   ` : ""}
             </div>
@@ -6862,19 +6900,19 @@ class k {
     const i = t.formData[e.id] ?? "", r = t.validationErrors[e.id], n = () => {
       switch (e.type) {
         case "textarea":
-          return k.renderTextArea(e, i, t);
+          return $.renderTextArea(e, i, t);
         case "select":
-          return k.renderSelect(e, i, t);
+          return $.renderSelect(e, i, t);
         case "radio":
-          return k.renderRadio(e, i, t);
+          return $.renderRadio(e, i, t);
         case "checkbox":
-          return k.renderCheckbox(e, i, t);
+          return $.renderCheckbox(e, i, t);
         case "signature":
-          return k.renderSignature(e, i, t);
+          return $.renderSignature(e, i, t);
         case "file_upload":
-          return k.renderFileUpload(e, i, t);
+          return $.renderFileUpload(e, i, t);
         default:
-          return k.renderDefaultInput(e, i, t);
+          return $.renderDefaultInput(e, i, t);
       }
     }, o = e.type === "checkbox" && (!e.options || e.options.length === 0);
     return t.mode === "print" ? l`
@@ -6924,13 +6962,13 @@ class $t {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class ue extends $t {
+class he extends $t {
   constructor(e) {
-    if (super(e), this.it = x, e.type !== St.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
+    if (super(e), this.it = _, e.type !== St.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
   }
   render(e) {
-    if (e === x || e == null) return this._t = void 0, this.it = e;
-    if (e === P) return e;
+    if (e === _ || e == null) return this._t = void 0, this.it = e;
+    if (e === U) return e;
     if (typeof e != "string") throw Error(this.constructor.directiveName + "() called with a non-string value");
     if (e === this.it) return this._t;
     this.it = e;
@@ -6938,8 +6976,8 @@ class ue extends $t {
     return t.raw = t, this._t = { _$litType$: this.constructor.resultType, strings: t, values: [] };
   }
 }
-ue.directiveName = "unsafeHTML", ue.resultType = 1;
-const Ee = kt(ue);
+he.directiveName = "unsafeHTML", he.resultType = 1;
+const Me = kt(he);
 class D {
   static renderMarkdown(e) {
     return e.replace(/^### (.*$)/gim, "<h3>$1</h3>").replace(/^## (.*$)/gim, "<h2>$1</h2>").replace(/^# (.*$)/gim, "<h1>$1</h1>").replace(/\*\*(.*?)\*\*/gim, "<strong>$1</strong>").replace(/\*(.*?)\*/gim, "<em>$1</em>").replace(/`(.*?)`/gim, "<code>$1</code>").replace(/^> (.*$)/gim, "<blockquote>$1</blockquote>").replace(/\n/gim, "<br>");
@@ -6955,7 +6993,7 @@ class D {
     return l`
       <div class="content-element markdown-content">
         <div class="markdown-text">
-          ${Ee(D.renderMarkdown(e.content))}
+          ${Me(D.renderMarkdown(e.content))}
         </div>
       </div>
     `;
@@ -6971,7 +7009,7 @@ class D {
   static renderHtml(e) {
     return l`
       <div class="content-element html-content">
-        <div class="html-content-wrapper">${Ee(e.content)}</div>
+        <div class="html-content-wrapper">${Me(e.content)}</div>
       </div>
     `;
   }
@@ -7041,7 +7079,7 @@ class D {
       ` : i();
   }
 }
-class Me {
+class le {
   static renderMobileStepsForStatus(e) {
     const { steps: t, disabled: i = !1 } = e;
     return l`
@@ -7093,6 +7131,71 @@ class Me {
       </div>
     `;
   }
+  static renderSubmissionErrorView(e) {
+    var r, n, o;
+    const { submissionError: t, onRetry: i } = e;
+    return l`
+      <div class="runner-layout">
+        <!-- Mobile Steps Navigation (visible only on mobile) -->
+        ${this.renderMobileStepsForStatus({
+      steps: (r = e.instance) == null ? void 0 : r.steps,
+      isStepAssignedToUser: e.isStepAssignedToUser,
+      completedSteps: e.completedSteps,
+      disabled: !0
+    })}
+
+        <!-- Sidebar: Steps List (read-only, hidden on mobile) -->
+        <aside class="runner-sidebar">
+          <div class="runner-sidebar-header">Steps</div>
+          <nav aria-label="Workflow steps">
+            <ul class="runner-steps-list">
+              ${(o = (n = e.instance) == null ? void 0 : n.steps) == null ? void 0 : o.map((a) => {
+      const d = e.isStepAssignedToUser(a), p = e.completedSteps.has(a.id);
+      return l`
+                  <li
+                    class="runner-step-item ${p ? "completed" : ""} ${d ? "" : "unassigned"}"
+                    style="opacity: ${d ? "1" : "0.6"}; cursor: not-allowed;"
+                  >
+                    <span class="runner-step-title">${a.title}</span>
+                    <span class="runner-step-badge ${!p && d ? "error" : ""}">
+                      ${p ? "Submitted" : d ? "Failed" : "Other User"}
+                    </span>
+                  </li>
+                `;
+    })}
+            </ul>
+          </nav>
+        </aside>
+
+        <!-- Main Content: Error View -->
+        <main class="runner-main-content">
+          <div class="submission-container">
+            <div class="submission-error-icon">
+              <svg
+                width="64"
+                height="64"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 8v4" />
+                <circle cx="12" cy="16" r="1" fill="currentColor" />
+              </svg>
+            </div>
+            <h2 class="submission-title">Submission Failed</h2>
+            <p class="submission-message">
+              ${t || "Unable to save your response. Please try again."}
+            </p>
+            ${i ? l` <button class="retry-button" @click=${i}>Try Again</button> ` : ""}
+          </div>
+        </main>
+      </div>
+    `;
+  }
   static renderUnifiedSubmissionView(e) {
     var t, i, r;
     return l`
@@ -7155,7 +7258,7 @@ class Me {
     `;
   }
 }
-class W {
+class V {
   /**
    * Determines if a step should show as completed in the badge.
    * If completion screen is showing, all assigned steps are considered completed.
@@ -7249,7 +7352,7 @@ class Dt {
     `;
   }
 }
-class le {
+class pe {
   /**
    * Handles change events for basic text inputs, textareas, selects, numbers, dates
    */
@@ -7287,14 +7390,14 @@ class le {
     n(u), a !== "preview" && o(e, c);
   }
 }
-var Ct = Object.defineProperty, At = Object.getOwnPropertyDescriptor, y = (s, e, t, i) => {
+var Ct = Object.defineProperty, At = Object.getOwnPropertyDescriptor, x = (s, e, t, i) => {
   for (var r = i > 1 ? void 0 : i ? At(e, t) : e, n = s.length - 1, o; n >= 0; n--)
     (o = s[n]) && (r = (i ? o(e, t, r) : o(r)) || r);
   return i && r && Ct(e, t, r), r;
 };
 let f = class extends N {
   constructor() {
-    super(...arguments), this.mode = "default", this.isLoading = !1, this._currentStepIndex = 0, this._formData = {}, this._validationErrors = {}, this._internalCompletedSteps = /* @__PURE__ */ new Set(), this._formRestorationComplete = !1, this._savedSignatures = /* @__PURE__ */ new Set(), this._replacingSignatures = /* @__PURE__ */ new Set(), this._isSubmitted = !1, this._userStepsSubmitted = !1, this._justSaved = !1;
+    super(...arguments), this.mode = "default", this.isLoading = !1, this._currentStepIndex = 0, this._formData = {}, this._validationErrors = {}, this._internalCompletedSteps = /* @__PURE__ */ new Set(), this._formRestorationComplete = !1, this._savedSignatures = /* @__PURE__ */ new Set(), this._replacingSignatures = /* @__PURE__ */ new Set(), this._isSubmitted = !1, this._userStepsSubmitted = !1, this._justSaved = !1, this._submissionError = null;
   }
   willUpdate(s) {
     (s.has("mode") || s.has("currentUser")) && this._updateNavigationService(), (s.has("instance") || s.has("workflow") || s.has("mode")) && (this._initializeState(), this._updateValidationService());
@@ -7307,9 +7410,9 @@ let f = class extends N {
     super.disconnectedCallback(), window.removeEventListener("resize", this._handleResize.bind(this)), (s = this.signatureManager) == null || s.destroy();
   }
   _initializeServices() {
-    this.persistenceManager = new bt(), this.responseTracker = new yt(), this.formStateManager = new pe(), this.signatureManager = new _t(
+    this.persistenceManager = new bt(), this.responseTracker = new yt(), this.formStateManager = new ce(), this.signatureManager = new _t(
       (s) => this._handleSignatureChange(s)
-    ), this.fileUploadManager = new ce(this.formStateManager, this.responseTracker), this._updateNavigationService(), this._updateValidationService();
+    ), this.fileUploadManager = new ue(this.formStateManager, this.responseTracker), this._updateNavigationService(), this._updateValidationService();
   }
   _updateNavigationService() {
     this.navigationService = new wt(this.mode || "default", this.currentUser);
@@ -7431,7 +7534,7 @@ let f = class extends N {
     return !s || this.mode !== "default" ? !0 : this._isStepAssignedToUser(s);
   }
   _renderNotAssignedView() {
-    return Me.renderNotAssignedView();
+    return le.renderNotAssignedView();
   }
   get _currentStep() {
     var s, e, t;
@@ -7448,7 +7551,7 @@ let f = class extends N {
     return this.formStateManager.setValidationErrors(e.errors), this._validationErrors = this.formStateManager.getValidationErrors(), e.isValid;
   }
   _handleInputChange(s, e) {
-    le.handleInputChange(
+    pe.handleInputChange(
       s,
       e,
       this._formData,
@@ -7458,7 +7561,7 @@ let f = class extends N {
     ), this._handleFormDataUpdate(s);
   }
   _handleCheckboxChange(s, e) {
-    le.handleCheckboxChange(
+    pe.handleCheckboxChange(
       s,
       e,
       this._formData,
@@ -7468,7 +7571,7 @@ let f = class extends N {
     ), this._handleFormDataUpdate(s);
   }
   _handleCheckboxGroupChange(s, e, t) {
-    le.handleCheckboxGroupChange(
+    pe.handleCheckboxGroupChange(
       s,
       e,
       t,
@@ -7546,7 +7649,7 @@ let f = class extends N {
     this.responseTracker.trackQuestionResponse(this._currentStep, s, e);
   }
   _renderQuestion(s) {
-    return k.render(s, this._getRenderContext());
+    return $.render(s, this._getRenderContext());
   }
   _renderContentElement(s) {
     return D.render(s, this._getRenderContext());
@@ -7570,7 +7673,7 @@ let f = class extends N {
     return l`
       <div class="print-step">
         <!-- Step Header -->
-        ${W.renderStepHeader({ step: s, mode: "print" })}
+        ${V.renderStepHeader({ step: s, mode: "print" })}
 
         <!-- Step Elements -->
         ${s.elements.map((e) => this._renderStepElement(e))}
@@ -7591,7 +7694,7 @@ let f = class extends N {
       </div>
     `;
   }
-  _nextStep() {
+  async _nextStep() {
     var t, i, r, n;
     if (!this._validateStep()) return;
     const s = this._currentStep;
@@ -7599,17 +7702,17 @@ let f = class extends N {
     const e = this._findNextAssignedStep(this._currentStepIndex);
     if (e !== -1) {
       const o = (t = this._currentStep) == null ? void 0 : t.id;
-      if (this._currentStepIndex = e, o && ((i = this.instance) != null && i.steps)) {
-        const d = this.instance.steps.find((p) => p.id === o);
-        d && (d.status = "completed");
-      }
-      const a = (n = (r = this.instance) == null ? void 0 : r.steps) == null ? void 0 : n[this._currentStepIndex];
-      a && (a.status = "active"), this._updateInstanceData(o, "step_navigation", {
+      if (this._currentStepIndex = e, (await this._updateInstanceData(o, "step_navigation", {
         direction: "next",
         fromStepIndex: this._currentStepIndex - 1,
         toStepIndex: this._currentStepIndex,
         completedStepId: o
-      }), this.mode !== "admin" && this._saveFormDataToHistory(), this._scrollToTop();
+      })).success && o && (i = this.instance) != null && i.steps) {
+        const p = this.instance.steps.find((c) => c.id === o);
+        p && (p.status = "completed");
+      }
+      const d = (n = (r = this.instance) == null ? void 0 : r.steps) == null ? void 0 : n[this._currentStepIndex];
+      d && (d.status = "active"), this.mode !== "admin" && this._saveFormDataToHistory(), this._scrollToTop();
     }
   }
   _findNextAssignedStep(s) {
@@ -7643,47 +7746,49 @@ let f = class extends N {
     );
     console.log("🚦 Navigation result:", t), t.canNavigate ? (this._currentStepIndex = t.newStepIndex, console.log(`✅ Navigated to step ${t.newStepIndex}`), this._scrollToTop()) : console.log("❌ Navigation blocked:", t.reason);
   }
-  _submitUserSteps() {
-    var t;
+  async _submitUserSteps() {
+    var i;
     if (!this._validateStep()) return;
     const s = this._currentStep;
     if (s && this._captureSignaturesFromStep(s), !this.instance) {
       console.error("Cannot submit, instance data is missing.");
       return;
     }
-    const e = (t = this._currentStep) == null ? void 0 : t.id;
-    e && this._internalCompletedSteps.add(e), console.log("User completing their assigned steps:", this.instance.id), console.log("Form data:", this._formData), this._userStepsSubmitted = !0, this._clearSavedFormData("user steps submission"), this._updateInstanceData(e, "user_steps_submission"), this._scrollToTop();
+    const e = (i = this._currentStep) == null ? void 0 : i.id;
+    e && this._internalCompletedSteps.add(e), (await this._updateInstanceData(e, "user_steps_submission")).success && e && this._internalCompletedSteps.add(e), this._userStepsSubmitted = !0, this._clearSavedFormData("user steps submission"), this._scrollToTop();
   }
-  _submit() {
-    var t;
+  async _submit() {
+    var i;
     if (!this._validateStep()) return;
     const s = this._currentStep;
     if (s && this._captureSignaturesFromStep(s), !this.instance) {
       console.error("Cannot submit, instance data is missing.");
       return;
     }
-    const e = (t = this._currentStep) == null ? void 0 : t.id;
-    e && this._internalCompletedSteps.add(e), console.log("Submitting entire workflow:", this.instance.id), console.log("Final form data:", this._formData), this.instance && (this.instance.status = "completed", this.instance.currentStepId = void 0, this.instance.completedSteps = Array.from(this._internalCompletedSteps)), this._isSubmitted = !0, this._clearSavedFormData("full workflow submission"), this._scrollToTop(), this._updateInstanceData(e, "submission");
+    const e = (i = this._currentStep) == null ? void 0 : i.id;
+    console.log("Submitting entire workflow:", this.instance.id), console.log("Final form data:", this._formData), (await this._updateInstanceData(e, "submission")).success && (e && this._internalCompletedSteps.add(e), this.instance && (this.instance.status = "completed", this.instance.currentStepId = void 0, this.instance.completedSteps = Array.from(this._internalCompletedSteps)), this._isSubmitted = !0, this._clearSavedFormData("full workflow submission"), this._scrollToTop());
   }
-  _saveStep() {
-    var t;
+  async _saveStep() {
+    var i;
     if (!this._validateStep()) return;
     const s = this._currentStep;
     if (s && this._captureSignaturesFromStep(s), !this.instance) {
       console.error("Cannot save, instance data is missing.");
       return;
     }
-    const e = (t = this._currentStep) == null ? void 0 : t.id;
-    if (e && (this._internalCompletedSteps.add(e), this.instance.steps)) {
-      const i = this.instance.steps.find((r) => r.id === e);
-      i && (i.status = "completed");
-    }
-    this._updateInstanceData(e, "admin_save", {
+    const e = (i = this._currentStep) == null ? void 0 : i.id;
+    if ((await this._updateInstanceData(e, "admin_save", {
       stepId: e,
       adminMode: !0
-    }), this._justSaved = !0, this.requestUpdate(), setTimeout(() => {
-      this._justSaved = !1, this.requestUpdate();
-    }, 2e3);
+    })).success) {
+      if (e && (this._internalCompletedSteps.add(e), this.instance.steps)) {
+        const r = this.instance.steps.find((n) => n.id === e);
+        r && (r.status = "completed");
+      }
+      this._justSaved = !0, this.requestUpdate(), setTimeout(() => {
+        this._justSaved = !1, this.requestUpdate();
+      }, 2e3);
+    }
   }
   _clearSavedFormData(s) {
     var e;
@@ -7699,12 +7804,12 @@ let f = class extends N {
       e && e.scrollTo({ top: 0, behavior: "smooth" });
     });
   }
-  _updateInstanceData(s, e, t) {
+  async _updateInstanceData(s, e, t) {
     var d, p, c, u, h, g, v;
     s && this._internalCompletedSteps.add(s);
-    let i = (p = (d = this.instance) == null ? void 0 : d.steps) == null ? void 0 : p.find(($) => $.id === s);
+    let i = (p = (d = this.instance) == null ? void 0 : d.steps) == null ? void 0 : p.find((w) => w.id === s);
     if (!i && this._internalCompletedSteps.size > 0) {
-      const $ = Array.from(this._internalCompletedSteps), Y = $[$.length - 1];
+      const w = Array.from(this._internalCompletedSteps), Y = w[w.length - 1];
       i = (u = (c = this.instance) == null ? void 0 : c.steps) == null ? void 0 : u.find((q) => q.id === Y);
     }
     const r = e === "submission", n = ((h = this.instance) == null ? void 0 : h.steps) && this._internalCompletedSteps.size >= this.instance.steps.length, o = r || n ? null : this._currentStep ? {
@@ -7713,23 +7818,25 @@ let f = class extends N {
     } : null, a = {
       instanceId: (g = this.instance) == null ? void 0 : g.id,
       workflowId: (v = this.instance) == null ? void 0 : v.workflowId,
-      completedStepId: s || (i ? i.id : null),
+      completedStepId: s || (i ? i.id : void 0),
       completedStepData: i ? {
         id: i.id,
         title: i.title,
         responses: i.responses || []
-      } : null,
+      } : void 0,
       completedSteps: Array.from(this._internalCompletedSteps),
       currentStep: o,
       mode: this.mode
     };
-    this.dispatchEvent(
-      new CustomEvent("instance-updated", {
-        detail: a,
-        bubbles: !0,
-        composed: !0
-      })
-    );
+    if (this.onInstanceUpdated)
+      try {
+        this._submissionError = null, this.requestUpdate();
+        const w = await this.onInstanceUpdated(a);
+        return w.success ? this._submissionError = null : (this._submissionError = w.error || "Unable to save response. Please try again.", s && this._internalCompletedSteps.delete(s)), this.requestUpdate(), w;
+      } catch (w) {
+        return this._submissionError = w instanceof Error ? w.message : "Unable to save response. Please try again.", s && this._internalCompletedSteps.delete(s), this.requestUpdate(), { success: !1, error: this._submissionError };
+      }
+    return { success: !0 };
   }
   _restoreFormData() {
     var e;
@@ -7893,7 +8000,7 @@ let f = class extends N {
       completedSteps: this._internalCompletedSteps,
       isStepAssignedToUser: this._isStepAssignedToUser.bind(this)
     };
-    return Me.renderUnifiedSubmissionView(s);
+    return le.renderUnifiedSubmissionView(s);
   }
   /**
    * Check if the instance status indicates the workflow is completed
@@ -7928,12 +8035,28 @@ let f = class extends N {
     var s;
     return this.mode !== "default" ? !1 : !!(this._isCurrentStepCompleted() || this._isInstanceCompleted() || ((s = this.instance) == null ? void 0 : s.status) === "active" && this._areUserStepsCompleted());
   }
+  // Render the submission error view
+  _renderSubmissionErrorView() {
+    const s = {
+      instance: this.instance,
+      assignedSteps: this._getAssignedSteps(),
+      completedSteps: this._internalCompletedSteps,
+      isStepAssignedToUser: this._isStepAssignedToUser.bind(this),
+      submissionError: this._submissionError,
+      onRetry: () => {
+        this._submissionError = null, this._isSubmitted = !1, this._userStepsSubmitted = !1, this.requestUpdate();
+      }
+    };
+    return le.renderSubmissionErrorView(s);
+  }
   /**
    * Handles mode-based content routing and basic validation
    * Returns content for special modes or null to continue with normal rendering
    */
   _renderModeBasedContent() {
     var e, t;
+    if (this._submissionError)
+      return this._renderSubmissionErrorView();
     if (this._shouldShowCompletionView())
       return this._renderUnifiedSubmissionView();
     if (this.mode === "print")
@@ -7973,7 +8096,7 @@ let f = class extends N {
     const e = this._isLastAssignedStep(), t = this._isLastStepInWorkflow(), i = this.mode === "preview" ? (r = this.workflow) == null ? void 0 : r.steps : (n = this.instance) == null ? void 0 : n.steps;
     return l`
       <!-- Mobile Steps Navigation (visible only on mobile) -->
-      ${W.renderMobileSteps({
+      ${V.renderMobileSteps({
       steps: i,
       currentStepIndex: this._currentStepIndex,
       mode: this.mode || "default",
@@ -7986,7 +8109,7 @@ let f = class extends N {
     })}
 
       <!-- Sidebar: Steps List (hidden on mobile) -->
-      ${W.renderSidebar({
+      ${V.renderSidebar({
       steps: i,
       currentStepIndex: this._currentStepIndex,
       mode: this.mode || "default",
@@ -8000,8 +8123,8 @@ let f = class extends N {
 
       <!-- Main Content: Step Details and Questions -->
       <main class="runner-main-content">
-        ${this.mode === "print" ? W.renderStepHeader({ step: s, mode: this.mode }) : l`<div class="runner-card">
-              ${W.renderStepHeader({
+        ${this.mode === "print" ? V.renderStepHeader({ step: s, mode: this.mode }) : l`<div class="runner-card">
+              ${V.renderStepHeader({
       step: s,
       mode: this.mode
     })}
@@ -8015,10 +8138,18 @@ let f = class extends N {
       justSaved: this._justSaved,
       isCurrentStepAssigned: this._isCurrentStepAssigned(),
       handlers: {
-        saveStep: this._saveStep.bind(this),
-        nextStep: this._nextStep.bind(this),
-        submitUserSteps: this._submitUserSteps.bind(this),
-        submit: this._submit.bind(this)
+        saveStep: () => {
+          this._saveStep();
+        },
+        nextStep: () => {
+          this._nextStep();
+        },
+        submitUserSteps: () => {
+          this._submitUserSteps();
+        },
+        submit: () => {
+          this._submit();
+        }
       }
     })}
         </form>
@@ -8071,61 +8202,67 @@ f.CONTENT_ELEMENT_TYPES = [
   "divider",
   "markdown"
 ];
-y([
+x([
   C({ type: Object })
 ], f.prototype, "instance", 2);
-y([
+x([
   C({ type: Object })
 ], f.prototype, "workflow", 2);
-y([
+x([
   C({ type: String })
 ], f.prototype, "mode", 2);
-y([
+x([
   C({ type: Boolean })
 ], f.prototype, "isLoading", 2);
-y([
+x([
   C({ type: Object })
 ], f.prototype, "currentUser", 2);
-y([
+x([
   C({ type: Function })
 ], f.prototype, "onSignatureCaptured", 2);
-y([
+x([
   C({ type: Function })
 ], f.prototype, "onFileUploaded", 2);
-y([
+x([
+  C({ type: Function })
+], f.prototype, "onInstanceUpdated", 2);
+x([
   b()
 ], f.prototype, "_currentStepIndex", 2);
-y([
+x([
   b()
 ], f.prototype, "_formData", 2);
-y([
+x([
   b()
 ], f.prototype, "_validationErrors", 2);
-y([
+x([
   b()
 ], f.prototype, "_internalCompletedSteps", 2);
-y([
+x([
   b()
 ], f.prototype, "_formRestorationComplete", 2);
-y([
+x([
   b()
 ], f.prototype, "_savedSignatures", 2);
-y([
+x([
   b()
 ], f.prototype, "_replacingSignatures", 2);
-y([
+x([
   b()
 ], f.prototype, "_savedInstance", 2);
-y([
+x([
   b()
 ], f.prototype, "_isSubmitted", 2);
-y([
+x([
   b()
 ], f.prototype, "_userStepsSubmitted", 2);
-y([
+x([
   b()
 ], f.prototype, "_justSaved", 2);
-f = y([
+x([
+  b()
+], f.prototype, "_submissionError", 2);
+f = x([
   Ne("runner-widget")
 ], f);
 function Jt(s, e = {}) {
@@ -8155,7 +8292,7 @@ function Jt(s, e = {}) {
     </div>
     <hr class="print-question-separator" />
     
-    ${n ? Vt(s, o) : ""}
+    ${n ? Ht(s, o) : ""}
     ${s.steps.map((d) => Et(d)).join(`
 `)}
   </div>
@@ -8187,10 +8324,10 @@ function Mt(s) {
   `;
 }
 function Tt(s, e) {
-  return Wt(s) ? Ft(s, e) : zt(s);
+  return Vt(s) ? Ft(s, e) : zt(s);
 }
 function Ft(s, e) {
-  const t = Ht(s.id, e.responses), i = t == null ? void 0 : t.value, n = s.type === "checkbox" && (!s.options || s.options.length === 0) ? "" : `
+  const t = Wt(s.id, e.responses), i = t == null ? void 0 : t.value, n = s.type === "checkbox" && (!s.options || s.options.length === 0) ? "" : `
     <div class="print-question-title">
       ${m(s.label)}:
     </div>
@@ -8201,9 +8338,9 @@ function Ft(s, e) {
     case "date":
       return n + It(s, i) + o;
     case "textarea":
-      return n + Pt(s, i) + o;
-    case "select":
       return n + Ut(s, i) + o;
+    case "select":
+      return n + Pt(s, i) + o;
     case "radio":
       return n + Nt(s, i) + o;
     case "checkbox":
@@ -8324,14 +8461,14 @@ function It(s, e) {
     </div>
   `;
 }
-function Pt(s, e) {
+function Ut(s, e) {
   return `
     <div class="print-response-value textarea-response">
       ${(e != null ? m(String(e)) : "") || '<span class="print-no-response">No response</span>'}
     </div>
   `;
 }
-function Ut(s, e) {
+function Pt(s, e) {
   const t = e != null ? String(e) : "";
   return `
     <div class="print-response-value select-response">
@@ -8406,7 +8543,7 @@ function Rt(s, e) {
       </div>
     `;
 }
-function Wt(s) {
+function Vt(s) {
   return [
     "text_input",
     "textarea",
@@ -8419,10 +8556,10 @@ function Wt(s) {
     "signature"
   ].includes(s.type);
 }
-function Ht(s, e) {
+function Wt(s, e) {
   return e == null ? void 0 : e.find((t) => t.elementId === s);
 }
-function Vt(s, e) {
+function Ht(s, e) {
   return `
     <div class="runner-card" style="margin-bottom: 40px; border-left: 4px solid #3b82f6;">
       <div style="display: flex; justify-content: between; align-items: center; gap: 20px;">
@@ -9007,14 +9144,7 @@ function Zt(s, e) {
   }
   t.innerHTML = "";
   const i = document.createElement("runner-widget");
-  return e.mode === "preview" ? (i.workflow = e.workflow, i.mode = "preview") : (i.instance = e.instance, i.mode = e.mode || "default"), e.mode && (i.mode = e.mode), e.isLoading !== void 0 && (i.isLoading = e.isLoading), e.onSignatureCaptured && (i.onSignatureCaptured = e.onSignatureCaptured), e.onFileUploaded && (i.onFileUploaded = e.onFileUploaded), e.currentUser && (i.currentUser = e.currentUser), e.onInstanceUpdated && i.addEventListener("instance-updated", (r) => {
-    const n = r;
-    try {
-      e.onInstanceUpdated(n.detail);
-    } catch (o) {
-      console.error("Error executing onInstanceUpdated callback:", o);
-    }
-  }), t.appendChild(i), console.log(`Drill Runner mounted on #${s}`), i;
+  return e.mode === "preview" ? (i.workflow = e.workflow, i.mode = "preview") : (i.instance = e.instance, i.mode = e.mode || "default"), e.mode && (i.mode = e.mode), e.isLoading !== void 0 && (i.isLoading = e.isLoading), e.onSignatureCaptured && (i.onSignatureCaptured = e.onSignatureCaptured), e.onFileUploaded && (i.onFileUploaded = e.onFileUploaded), e.currentUser && (i.currentUser = e.currentUser), e.onInstanceUpdated && (i.onInstanceUpdated = e.onInstanceUpdated), t.appendChild(i), console.log(`Drill Runner mounted on #${s}`), i;
 }
 function ei(s, e) {
   const t = s.getFormData(), i = JSON.parse(JSON.stringify(e));