drill-widgets 2.7.16 → 2.7.18

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: je, defineProperty: Ve, getOwnPropertyDescriptor: We, getOwnPropertyNames: He, getOwnPropertySymbols: Be, getPrototypeOf: Qe } = Object, T = globalThis, ye = T.trustedTypes, Ge = ye ? ye.emptyScript : "", re = T.reactiveElementPolyfillSupport, V = (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 };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), M.litPropertyMetadata ?? (M.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let U = class extends HTMLElement {
+} }, fe = (s, e) => !je(s, e), we = { attribute: !0, type: String, converter: J, reflect: !1, useDefault: !1, hasChanged: fe };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), T.litPropertyMetadata ?? (T.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+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 && Ve(this.prototype, e, r);
     }
   }
   static getPropertyDescriptor(e, t, i) {
-    const { get: r, set: n } = Ve(this.prototype, e) ?? { get() {
+    const { get: r, set: n } = We(this.prototype, e) ?? { get() {
       return this[t];
     }, set(o) {
       this[t] = o;
@@ -100,17 +100,17 @@ 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(V("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"))) {
-      const t = this.properties, i = [...je(t), ...Be(t)];
+    if (this.hasOwnProperty(V("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(V("properties"))) {
+      const t = this.properties, i = [...He(t), ...Be(t)];
       for (const r of i) this.createProperty(r, t[r]);
     }
     const e = this[Symbol.metadata];
@@ -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[V("elementProperties")] = /* @__PURE__ */ new Map(), P[V("finalized")] = /* @__PURE__ */ new Map(), re == null || re({ ReactiveElement: P }), (T.reactiveElementVersions ?? (T.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 W = globalThis, X = W.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, H = () => 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, M = 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"), w = 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);
-    const g = o === T && s[a + 1].startsWith("/>") ? " " : "";
+    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 = M) : c[3] !== void 0 && (o = M) : o === M ? 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 ? M : c[3] === '"' ? Ce : De) : o === Ce || o === De ? o = M : o === ke || o === $e ? o = R : (o = M, r = void 0);
+    const g = o === M && 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) {
@@ -314,15 +314,15 @@ class Q {
     for (; (r = F.nextNode()) !== null && d.length < a; ) {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const u of r.getAttributeNames()) if (u.endsWith(ze)) {
-          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);
+          const h = c[o++], g = r.getAttribute(u).split(E), x = /([.?@])?(.*)/.exec(h);
+          d.push({ type: 1, index: n, name: x[2], strings: g, ctor: x[1] === "." ? Ze : x[1] === "?" ? et : x[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 : "";
-            for (let g = 0; g < h; g++) r.append(u[g], j()), F.nextNode(), d.push({ type: 2, index: ++n });
-            r.append(u[h], j());
+            for (let g = 0; g < h; g++) r.append(u[g], H()), F.nextNode(), d.push({ type: 2, index: ++n });
+            r.append(u[h], H());
           }
         }
       } else if (r.nodeType === 8) if (r.data === Ie) d.push({ type: 2, index: n });
@@ -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 = w, 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 === w || e == null || e === "" ? (this._$AH !== w && this._$AR(), this._$AH = w) : 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 !== w && 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,14 +414,14 @@ 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++;
+    for (const n of e) r === t.length ? t.push(i = new G(this.O(H()), this.O(H()), this, this.options)) : i = t[r], i._$AI(n), r++;
     r < t.length && (this._$AR(i && i._$AB.nextSibling, r), t.length = r);
   }
   _$AR(e = this._$AA.nextSibling, t) {
@@ -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 = w, 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 = w;
   }
   _$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 === w ? e = w : e !== w && (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 === w ? 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 === w ? 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 !== w);
   }
 }
 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) ?? w) === U) return;
+    const i = this._$AH, r = e === w && i !== w || e.capture !== i.capture || e.once !== i.once || e.passive !== i.passive, n = e !== w && (i === w || r);
     r && this.element.removeEventListener(this.name, this, i), n && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
@@ -502,14 +502,14 @@ class it {
     L(this, e);
   }
 }
-const oe = V.litHtmlPolyfillSupport;
-oe == null || oe(Q, G), (V.litHtmlVersions ?? (V.litHtmlVersions = [])).push("3.3.0");
+const oe = W.litHtmlPolyfillSupport;
+oe == null || oe(Q, G), (W.litHtmlVersions ?? (W.litHtmlVersions = [])).push("3.3.0");
 const st = (s, e, t) => {
   const i = (t == null ? void 0 : t.renderBefore) ?? e;
   let r = i._$litPart$;
   if (r === void 0) {
     const n = (t == null ? void 0 : t.renderBefore) ?? null;
-    i._$litPart$ = r = new G(e.insertBefore(j(), n), n, void 0, t ?? {});
+    i._$litPart$ = r = new G(e.insertBefore(H(), n), n, void 0, t ?? {});
   }
   return r._$AI(s), r;
 };
@@ -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,11 +541,11 @@ let N = class extends U {
     super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
   }
   render() {
-    return P;
+    return U;
   }
 };
-var Te;
-N._$litElement$ = !0, N.finalized = !0, (Te = z.litElementHydrateSupport) == null || Te.call(z, { LitElement: N });
+var Me;
+N._$litElement$ = !0, N.finalized = !0, (Me = z.litElementHydrateSupport) == null || Me.call(z, { LitElement: N });
 const ae = z.litElementPolyfillSupport;
 ae == null || ae({ LitElement: N });
 (z.litElementVersions ?? (z.litElementVersions = [])).push("4.2.0");
@@ -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") {
@@ -585,7 +585,7 @@ const rt = { attribute: !0, type: String, converter: J, reflect: !1, hasChanged:
   }
   throw Error("Unsupported decorator location: " + i);
 };
-function C(s) {
+function $(s) {
   return (e, t) => typeof t == "object" ? nt(s, e, t) : ((i, r, n) => {
     const o = r.hasOwnProperty(n);
     return r.constructor.createProperty(n, i), o ? Object.getOwnPropertyDescriptor(r, n) : void 0;
@@ -597,13 +597,13 @@ function C(s) {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 function b(s) {
-  return C({ ...s, state: !0, attribute: !1 });
+  return $({ ...s, state: !0, attribute: !1 });
 }
-const w = [];
+const k = [];
 for (let s = 0; s < 256; ++s)
-  w.push((s + 256).toString(16).slice(1));
+  k.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 (k[s[e + 0]] + k[s[e + 1]] + k[s[e + 2]] + k[s[e + 3]] + "-" + k[s[e + 4]] + k[s[e + 5]] + "-" + k[s[e + 6]] + k[s[e + 7]] + "-" + k[s[e + 8]] + k[s[e + 9]] + "-" + k[s[e + 10]] + k[s[e + 11]] + k[s[e + 12]] + k[s[e + 13]] + k[s[e + 14]] + k[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)
@@ -880,7 +880,8 @@ const pt = O`
   }
 
   .form-group input,
-  .form-group textarea {
+  .form-group textarea,
+  .form-group select {
     padding: 12px;
     border: 1px solid var(--input-border);
     border-radius: var(--input-radius);
@@ -890,12 +891,22 @@ const pt = O`
     color: inherit;
   }
 
+  .form-group select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    padding-right: 40px;
+  }
+
   .form-group input:focus,
-  .form-group textarea:focus {
+  .form-group textarea:focus,
+  .form-group select:focus {
     outline: none;
     border-color: var(--input-border-focus);
     box-shadow: 0 0 0 3px var(--input-focus-ring);
-    background: var(--input-bg);
+    background-color: var(--input-bg);
   }
 
   .form-group input::placeholder,
@@ -3337,6 +3348,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,14 +3896,14 @@ const pt = O`
     }
   }
 `;
-var gt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, S = (s, e, t, i) => {
+var gt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, _ = (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 v = class extends N {
   constructor() {
-    super(...arguments), this._templateData = {
+    super(...arguments), this.labelForDrill = "Drill", this.labelForGroup = "Group", this.subjectTypes = [], this.groups = [], this._templateData = {
       name: "",
       description: "",
       steps: []
@@ -3918,7 +3967,8 @@ let _ = class extends N {
         id: this._templateData.id || A(),
         name: this._templateData.name,
         description: this._templateData.description || "",
-        steps: this._templateData.steps || []
+        steps: this._templateData.steps || [],
+        subjectType: this._templateData.subjectType
       };
       console.log("💾 Builder Widget: Save button clicked"), console.log("📄 Workflow Template:", JSON.stringify(i, null, 2)), this.workflow ? (console.log("Calling onWorkflowUpdated callback"), (e = this.onWorkflowUpdated) == null || e.call(this, i)) : (console.log("Calling onWorkflowCreated callback"), (t = this.onWorkflowCreated) == null || t.call(this, i));
     } else
@@ -4079,6 +4129,12 @@ let _ = class extends N {
       steps: n
     }, console.log("📝 Template updated with new step order"), this._draggedStepId = null, this._dragOverStepId = null;
   }
+  _handleSubjectTypeChange(s) {
+    this._templateData = {
+      ...this._templateData,
+      subjectType: s.target.value
+    };
+  }
   _addQuestion(s = "text_input") {
     var i, r;
     if (!this._templateData.steps || this._templateData.steps.length === 0 || !this._selectedStepId) {
@@ -4780,7 +4836,7 @@ Use **bold** and *italic* text.`;
       case "role":
         switch (s.type) {
           case "instance_role_assignee_select":
-            return s.targetId ? `Assigned to: ${s.targetId} role` : "Assigned to: Role";
+            return s.targetId ? `Assigned to: ${s.targetName} role` : "Assigned to: Role";
           default:
             return "Assigned to: Role";
         }
@@ -4793,7 +4849,7 @@ Use **bold** and *italic* text.`;
     const s = this._getSelectedStep();
     return l`
       <div class="header">
-        <div class="header-inputs">
+        <div class="header-inputs flex items-center">
           <div class="form-group">
             <label for="template-title">Title</label>
             <input
@@ -4814,6 +4870,14 @@ Use **bold** and *italic* text.`;
               @input=${this._handleDescriptionChange}
             />
           </div>
+          ${this.subjectTypes.length > 0 ? l`<div class="form-group">
+                <label for="subject-type-select">Subject Type</label>
+                <select id="subject-type-select" @change=${this._handleSubjectTypeChange}>
+                  ${this.subjectTypes.map(
+      (t) => l`<option value=${t.name}>${t.name}</option>`
+    )}
+                </select>
+              </div>` : l``}
         </div>
         <div class="header-actions">
           <button class="save-button" @click=${this._handleSave}>Save template</button>
@@ -4878,9 +4942,10 @@ Use **bold** and *italic* text.`;
                         >
                           <div class="assignment-card-radio"></div>
                           <div class="assignment-card-content">
-                            <div class="assignment-card-title">Groups</div>
+                            <div class="assignment-card-title">${this.labelForGroup}</div>
                             <div class="assignment-card-description">
-                              Assignment is based on individuals within a certain group.
+                              Assignment is based on individuals within a certain
+                              ${this.labelForGroup}.
                             </div>
                           </div>
                         </div>
@@ -4899,9 +4964,12 @@ Use **bold** and *italic* text.`;
     }}
                                 />
                                 <div class="assignment-radio-label">
-                                  <div class="assignment-radio-title">Drill subject</div>
+                                  <div class="assignment-radio-title">
+                                    ${this.labelForDrill} subject
+                                  </div>
                                   <div class="assignment-radio-description">
-                                    The step will be assigned to the subject of this drill.
+                                    The step will be assigned to the subject of this
+                                    ${this.labelForDrill}.
                                   </div>
                                 </div>
                               </label>
@@ -4918,9 +4986,12 @@ Use **bold** and *italic* text.`;
                                 />
 
                                 <div class="assignment-radio-label">
-                                  <div class="assignment-radio-title">Drill creator</div>
+                                  <div class="assignment-radio-title">
+                                    ${this.labelForDrill} creator
+                                  </div>
                                   <div class="assignment-radio-description">
-                                    The step will be assigned to the creator of this drill.
+                                    The step will be assigned to the creator of this
+                                    ${this.labelForDrill}.
                                   </div>
                                 </div>
                               </label>
@@ -4937,11 +5008,11 @@ Use **bold** and *italic* text.`;
                                 />
                                 <div class="assignment-radio-label">
                                   <div class="assignment-radio-title">
-                                    Assign at start of the Drill
+                                    Assign at start of the ${this.labelForDrill}
                                   </div>
                                   <div class="assignment-radio-description">
-                                    At the start of this Drill, the initiator will be able to choose
-                                    an individual recipient.
+                                    At the start of this ${this.labelForDrill}, the initiator will
+                                    be able to choose an individual recipient.
                                   </div>
                                 </div>
                               </label>
@@ -5000,35 +5071,28 @@ Use **bold** and *italic* text.`;
                                   />
                                 ` : ""}
                           ` : l`
-                            <div class="assignment-radio-group">
-                              <label class="assignment-radio-option">
-                                <input
-                                  type="radio"
-                                  name="assignment-type"
-                                  value="instance_role_assignee_select"
-                                  checked
-                                />
-                                <div class="assignment-radio-label">
-                                  <div class="assignment-radio-title">Select a group</div>
-                                  <div class="assignment-radio-description">
-                                    Members of the selected group will be eligible for assignment.
-                                  </div>
-                                </div>
-                              </label>
-                            </div>
+                            <label for="group-select">Select a ${this.labelForGroup}</label>
 
                             <select
                               class="assignment-select"
                               .value=${this._stepAssignmentTarget}
                               @change=${(t) => {
+      var n, o;
       const i = t.target;
       this._stepAssignmentTarget = i.value;
+      const r = (n = this._templateData.steps) == null ? void 0 : n.findIndex(
+        (a) => a.id === this._editingStepId
+      );
+      r !== void 0 && r > -1 && (this._templateData.steps[r].assignment.targetName = (o = this.groups.find((a) => a.id === i.value)) == null ? void 0 : o.name, this._templateData.steps[r].assignment.targetId = i.value, this.requestUpdate());
     }}
                             >
-                              <option value="">Select group</option>
-                              <option value="manager">Manager</option>
-                              <option value="hr">HR</option>
-                              <option value="admin">Admin</option>
+                              <!-- Groups -->
+                              <option value="" disabled selected>
+                                Select a ${this.labelForGroup}
+                              </option>
+                              ${this.groups.map(
+      (t) => l` <option value=${t.id}>${t.name}</option> `
+    )}
                             </select>
                           `}
                     </div>
@@ -5442,64 +5506,76 @@ Use **bold** and *italic* text.`;
     `;
   }
 };
-_.styles = O`
+v.styles = O`
     ${pt}
     ${ct}
     ${ut}
     ${Le}
     ${ht}
   `;
-S([
+_([
+  $({ attribute: !1 })
+], v.prototype, "labelForDrill", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "labelForGroup", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "subjectTypes", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "groups", 2);
+_([
   b()
-], _.prototype, "_templateData", 2);
-S([
+], v.prototype, "_templateData", 2);
+_([
   b()
-], _.prototype, "_showStepModal", 2);
-S([
+], v.prototype, "_showStepModal", 2);
+_([
   b()
-], _.prototype, "_stepFormData", 2);
-S([
+], v.prototype, "_stepFormData", 2);
+_([
   b()
-], _.prototype, "_draggedStepId", 2);
-S([
+], v.prototype, "_draggedStepId", 2);
+_([
   b()
-], _.prototype, "_dragOverStepId", 2);
-S([
+], v.prototype, "_dragOverStepId", 2);
+_([
   b()
-], _.prototype, "_selectedStepId", 2);
-S([
+], v.prototype, "_selectedStepId", 2);
+_([
   b()
-], _.prototype, "_questions", 2);
-S([
+], v.prototype, "_questions", 2);
+_([
   b()
-], _.prototype, "_editingStepId", 2);
-S([
+], v.prototype, "_editingStepId", 2);
+_([
   b()
-], _.prototype, "_stepAssignmentCategory", 2);
-S([
+], v.prototype, "_stepAssignmentCategory", 2);
+_([
   b()
-], _.prototype, "_stepAssignmentType", 2);
-S([
+], v.prototype, "_stepAssignmentType", 2);
+_([
   b()
-], _.prototype, "_stepAssignmentTarget", 2);
-S([
+], v.prototype, "_stepAssignmentTarget", 2);
+_([
   b()
-], _.prototype, "_stepAssignmentFirstName", 2);
-S([
+], v.prototype, "_stepAssignmentFirstName", 2);
+_([
   b()
-], _.prototype, "_stepAssignmentLastName", 2);
-S([
-  C({ attribute: !1 })
-], _.prototype, "onCancel", 2);
-S([
-  C({ attribute: !1 })
-], _.prototype, "workflow", 2);
-S([
+], v.prototype, "_stepAssignmentLastName", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "onCancel", 2);
+_([
+  $({ attribute: !1 })
+], v.prototype, "workflow", 2);
+_([
   b()
-], _.prototype, "_openMenuStepId", 2);
-_ = S([
+], v.prototype, "_openMenuStepId", 2);
+v = _([
   Ne("builder-widget")
-], _);
+], v);
 class ft {
   constructor(e, t) {
     this.signaturePads = e, this.savedSignatures = t;
@@ -5664,13 +5740,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, x = c + u == 0 ? 0 : u / (c + u), S = { x: p.x + h * x, y: p.y + g * x }, Y = t.x - S.x, q = t.y - S.y;
     return {
       c1: new Z(d.x + Y, d.y + q),
       c2: new Z(p.x + Y, p.y + q)
@@ -5936,7 +6012,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;
@@ -5962,10 +6038,10 @@ class ee extends vt {
       const a = o / n, d = a * a, p = d * a, c = 1 - a, u = c * c, h = u * c;
       let g = h * e.startPoint.x;
       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, $);
+      let x = h * e.startPoint.y;
+      x += 3 * u * a * e.control1.y, x += 3 * c * d * e.control2.y, x += p * e.endPoint.y;
+      const S = Math.min(e.startWidth + p * r, t.maxWidth);
+      this._drawCurveSegment(g, x, S);
     }
     i.closePath(), i.fill();
   }
@@ -6000,8 +6076,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 x = document.createElement("circle"), S = u > 0 ? u : (h + g) / 2;
+      x.setAttribute("r", S.toString()), x.setAttribute("cx", p.x.toString()), x.setAttribute("cy", p.y.toString()), x.setAttribute("fill", c), d.appendChild(x);
     }), d.outerHTML;
   }
 }
@@ -6414,7 +6490,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 +6584,8 @@ const ie = class ie {
   }
 };
 ie.MAX_FILE_SIZE = 5 * 1024 * 1024;
-let ce = ie;
-class k {
+let ue = ie;
+class D {
   /**
    * Determines if a form element should be disabled based on context
    * Centralizes the disabled logic for consistency across all input types
@@ -6540,7 +6616,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 = D._extractFilenameFromUrl(e).split(".").pop()) == null ? void 0 : n.toLowerCase();
     return i ? {
       pdf: "PDF Document",
       doc: "Word Document",
@@ -6781,23 +6857,23 @@ class k {
               <div class="print-response-value file-response">
                 📎 ${r.name}
                 ${r.size ? l` <span class="file-size"
-                      >(${k._formatFileSize(r.size)})</span
+                      >(${D._formatFileSize(r.size)})</span
                     >` : ""}
               </div>
             `;
           if (n) {
-            const a = k._extractFilenameFromUrl(r);
+            const a = D._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 ? D._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
+                      >(${D._formatFileSize(r.size)})</span
                     >
                   ` : ""}
             </div>
@@ -6862,19 +6938,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 D.renderTextArea(e, i, t);
         case "select":
-          return k.renderSelect(e, i, t);
+          return D.renderSelect(e, i, t);
         case "radio":
-          return k.renderRadio(e, i, t);
+          return D.renderRadio(e, i, t);
         case "checkbox":
-          return k.renderCheckbox(e, i, t);
+          return D.renderCheckbox(e, i, t);
         case "signature":
-          return k.renderSignature(e, i, t);
+          return D.renderSignature(e, i, t);
         case "file_upload":
-          return k.renderFileUpload(e, i, t);
+          return D.renderFileUpload(e, i, t);
         default:
-          return k.renderDefaultInput(e, i, t);
+          return D.renderDefaultInput(e, i, t);
       }
     }, o = e.type === "checkbox" && (!e.options || e.options.length === 0);
     return t.mode === "print" ? l`
@@ -6924,13 +7000,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 = w, 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 === w || 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,9 +7014,9 @@ 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);
-class D {
+he.directiveName = "unsafeHTML", he.resultType = 1;
+const Te = kt(he);
+class C {
   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 +7031,7 @@ class D {
     return l`
       <div class="content-element markdown-content">
         <div class="markdown-text">
-          ${Ee(D.renderMarkdown(e.content))}
+          ${Te(C.renderMarkdown(e.content))}
         </div>
       </div>
     `;
@@ -6971,7 +7047,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">${Te(e.content)}</div>
       </div>
     `;
   }
@@ -7016,21 +7092,21 @@ class D {
     const i = () => {
       switch (e.type) {
         case "text":
-          return D.renderText(e);
+          return C.renderText(e);
         case "markdown":
-          return D.renderMarkdownElement(e);
+          return C.renderMarkdownElement(e);
         case "divider":
-          return D.renderDivider(e);
+          return C.renderDivider(e);
         case "html":
-          return D.renderHtml(e);
+          return C.renderHtml(e);
         case "image":
-          return D.renderImage(e);
+          return C.renderImage(e);
         case "video":
-          return D.renderVideo(e);
+          return C.renderVideo(e);
         case "file":
-          return D.renderFile(e);
+          return C.renderFile(e);
         default:
-          return D.renderUnknown(e);
+          return C.renderUnknown(e);
       }
     };
     return (t == null ? void 0 : t.mode) === "print" ? l`
@@ -7041,7 +7117,7 @@ class D {
       ` : i();
   }
 }
-class Me {
+class le {
   static renderMobileStepsForStatus(e) {
     const { steps: t, disabled: i = !1 } = e;
     return l`
@@ -7093,6 +7169,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 +7296,7 @@ class Me {
     `;
   }
 }
-class W {
+class j {
   /**
    * Determines if a step should show as completed in the badge.
    * If completion screen is showing, all assigned steps are considered completed.
@@ -7249,7 +7390,7 @@ class Dt {
     `;
   }
 }
-class le {
+class pe {
   /**
    * Handles change events for basic text inputs, textareas, selects, numbers, dates
    */
@@ -7294,7 +7435,7 @@ var Ct = Object.defineProperty, At = Object.getOwnPropertyDescriptor, y = (s, e,
 };
 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 +7448,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 +7572,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 +7589,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 +7599,7 @@ let f = class extends N {
     ), this._handleFormDataUpdate(s);
   }
   _handleCheckboxChange(s, e) {
-    le.handleCheckboxChange(
+    pe.handleCheckboxChange(
       s,
       e,
       this._formData,
@@ -7468,7 +7609,7 @@ let f = class extends N {
     ), this._handleFormDataUpdate(s);
   }
   _handleCheckboxGroupChange(s, e, t) {
-    le.handleCheckboxGroupChange(
+    pe.handleCheckboxGroupChange(
       s,
       e,
       t,
@@ -7546,10 +7687,10 @@ let f = class extends N {
     this.responseTracker.trackQuestionResponse(this._currentStep, s, e);
   }
   _renderQuestion(s) {
-    return k.render(s, this._getRenderContext());
+    return D.render(s, this._getRenderContext());
   }
   _renderContentElement(s) {
-    return D.render(s, this._getRenderContext());
+    return C.render(s, this._getRenderContext());
   }
   _isQuestionElement(s) {
     return f.QUESTION_ELEMENT_TYPES.includes(s.type);
@@ -7570,7 +7711,7 @@ let f = class extends N {
     return l`
       <div class="print-step">
         <!-- Step Header -->
-        ${W.renderStepHeader({ step: s, mode: "print" })}
+        ${j.renderStepHeader({ step: s, mode: "print" })}
 
         <!-- Step Elements -->
         ${s.elements.map((e) => this._renderStepElement(e))}
@@ -7591,7 +7732,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 +7740,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 +7784,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 +7842,12 @@ let f = class extends N {
       e && e.scrollTo({ top: 0, behavior: "smooth" });
     });
   }
-  _updateInstanceData(s, e, t) {
-    var d, p, c, u, h, g, v;
+  async _updateInstanceData(s, e, t) {
+    var d, p, c, u, h, g, x;
     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((S) => S.id === s);
     if (!i && this._internalCompletedSteps.size > 0) {
-      const $ = Array.from(this._internalCompletedSteps), Y = $[$.length - 1];
+      const S = Array.from(this._internalCompletedSteps), Y = S[S.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 ? {
@@ -7712,24 +7855,26 @@ let f = class extends N {
       title: this._currentStep.title
     } : 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),
+      workflowId: (x = this.instance) == null ? void 0 : x.workflowId,
+      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 S = await this.onInstanceUpdated(a);
+        return S.success ? this._submissionError = null : (this._submissionError = S.error || "Unable to save response. Please try again.", s && this._internalCompletedSteps.delete(s)), this.requestUpdate(), S;
+      } catch (S) {
+        return this._submissionError = S instanceof Error ? S.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 +8038,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 +8073,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 +8134,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({
+      ${j.renderMobileSteps({
       steps: i,
       currentStepIndex: this._currentStepIndex,
       mode: this.mode || "default",
@@ -7986,7 +8147,7 @@ let f = class extends N {
     })}
 
       <!-- Sidebar: Steps List (hidden on mobile) -->
-      ${W.renderSidebar({
+      ${j.renderSidebar({
       steps: i,
       currentStepIndex: this._currentStepIndex,
       mode: this.mode || "default",
@@ -8000,8 +8161,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" ? j.renderStepHeader({ step: s, mode: this.mode }) : l`<div class="runner-card">
+              ${j.renderStepHeader({
       step: s,
       mode: this.mode
     })}
@@ -8015,10 +8176,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>
@@ -8072,26 +8241,29 @@ f.CONTENT_ELEMENT_TYPES = [
   "markdown"
 ];
 y([
-  C({ type: Object })
+  $({ type: Object })
 ], f.prototype, "instance", 2);
 y([
-  C({ type: Object })
+  $({ type: Object })
 ], f.prototype, "workflow", 2);
 y([
-  C({ type: String })
+  $({ type: String })
 ], f.prototype, "mode", 2);
 y([
-  C({ type: Boolean })
+  $({ type: Boolean })
 ], f.prototype, "isLoading", 2);
 y([
-  C({ type: Object })
+  $({ type: Object })
 ], f.prototype, "currentUser", 2);
 y([
-  C({ type: Function })
+  $({ type: Function })
 ], f.prototype, "onSignatureCaptured", 2);
 y([
-  C({ type: Function })
+  $({ type: Function })
 ], f.prototype, "onFileUploaded", 2);
+y([
+  $({ type: Function })
+], f.prototype, "onInstanceUpdated", 2);
 y([
   b()
 ], f.prototype, "_currentStepIndex", 2);
@@ -8125,6 +8297,9 @@ y([
 y([
   b()
 ], f.prototype, "_justSaved", 2);
+y([
+  b()
+], f.prototype, "_submissionError", 2);
 f = y([
   Ne("runner-widget")
 ], f);
@@ -8155,7 +8330,7 @@ function Jt(s, e = {}) {
     </div>
     <hr class="print-question-separator" />
     
-    ${n ? Vt(s, o) : ""}
+    ${n ? Wt(s, o) : ""}
     ${s.steps.map((d) => Et(d)).join(`
 `)}
   </div>
@@ -8169,15 +8344,15 @@ function Et(s) {
   return `
     <div class="print-step">
       <!-- Step Header -->
-      ${Mt(s)}
+      ${Tt(s)}
       
       <!-- Step Elements -->
-      ${s.elements.map((e) => Tt(e, s)).join(`
+      ${s.elements.map((e) => Mt(e, s)).join(`
 `)}
     </div>
   `;
 }
-function Mt(s) {
+function Tt(s) {
   return `
     <div class="step-print-header">
       <div class="print-step-title">${m(s.title)}</div>
@@ -8186,11 +8361,11 @@ function Mt(s) {
     </div>
   `;
 }
-function Tt(s, e) {
-  return Wt(s) ? Ft(s, e) : zt(s);
+function Mt(s, e) {
+  return jt(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 = Vt(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 +8376,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 +8499,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">
@@ -8371,7 +8546,7 @@ function Ot(s, e) {
     return `
       <div class="print-response-value file-response">
         📎 ${m(e.name)}
-        ${e.size ? ` <span class="file-size">(${jt(e.size)})</span>` : ""}
+        ${e.size ? ` <span class="file-size">(${Ht(e.size)})</span>` : ""}
       </div>
     `;
   if (t) {
@@ -8406,7 +8581,7 @@ function Rt(s, e) {
       </div>
     `;
 }
-function Wt(s) {
+function jt(s) {
   return [
     "text_input",
     "textarea",
@@ -8419,10 +8594,10 @@ function Wt(s) {
     "signature"
   ].includes(s.type);
 }
-function Ht(s, e) {
+function Vt(s, e) {
   return e == null ? void 0 : e.find((t) => t.elementId === s);
 }
-function Vt(s, e) {
+function Wt(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;">
@@ -8454,7 +8629,7 @@ function m(s) {
     "'": "&#39;"
   })[i]);
 }
-function jt(s) {
+function Ht(s) {
   if (s === 0) return "0 Bytes";
   const e = 1024, t = ["Bytes", "KB", "MB", "GB"], i = Math.floor(Math.log(s) / Math.log(e));
   return parseFloat((s / Math.pow(e, i)).toFixed(2)) + " " + t[i];
@@ -8979,6 +9154,7 @@ function Gt() {
   `;
 }
 function Xt(s, e = {}) {
+  var r;
   if (!customElements.get("builder-widget"))
     return console.error("Error: <builder-widget> is not defined. Make sure it was imported."), null;
   const t = document.getElementById(s);
@@ -8986,7 +9162,7 @@ function Xt(s, e = {}) {
     return console.error(`Error: Target element with ID '${s}' not found.`), null;
   t.innerHTML = "";
   const i = document.createElement("builder-widget");
-  return e.workflow && (i.workflow = e.workflow), e.onWorkflowCreated && (i.onWorkflowCreated = e.onWorkflowCreated), e.onWorkflowDeleted && (i.onWorkflowDeleted = e.onWorkflowDeleted), e.onWorkflowUpdated && (i.onWorkflowUpdated = e.onWorkflowUpdated), t.appendChild(i), console.log(`Drill Builder mounted on #${s}`), i;
+  return e.workflow && (i.workflow = e.workflow, e.subjectTypes && e.subjectTypes.length > 0 && ((r = e.subjectTypes[0]) != null && r.name) && (console.log("Setting default subject type to:", e.subjectTypes[0].name), i.workflow.subjectType = e.subjectTypes[0].name)), e.onWorkflowCreated && (i.onWorkflowCreated = e.onWorkflowCreated), e.onWorkflowDeleted && (i.onWorkflowDeleted = e.onWorkflowDeleted), e.onWorkflowUpdated && (i.onWorkflowUpdated = e.onWorkflowUpdated), i.labelForDrill = e.labelForDrill || "Drill", i.labelForGroup = e.labelForGroup || "Group", i.subjectTypes = e.subjectTypes || [], i.groups = e.groups || [], t.appendChild(i), console.log(`Drill Builder mounted on #${s}`), i;
 }
 function Zt(s, e) {
   if (!customElements.get("runner-widget"))
@@ -9007,14 +9183,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));