@record-evolution/widget-form 1.0.19 → 1.0.22

package/dist/widget-form.d.ts

@@ -26,6 +26,20 @@ export declare class WidgetForm extends LitElement {
     version: string;
     update(changedProperties: Map<string, any>): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    private dialogScrimPatched;
+    /**
+     * md-dialog renders its scrim as a `<div class="scrim">` sibling of the
+     * native `<dialog>` inside its shadow root, with `position: fixed; z-index: 1`,
+     * while disabling the native backdrop (`::backdrop { background: none }`).
+     * The `<dialog>` is promoted to the top layer by `showModal()`, but the scrim
+     * div stays in the normal layer — confined to this widget's stacking context.
+     * As a result it fails to cover sibling dashboard widgets painted in a higher
+     * stacking context. We re-enable the native `::backdrop` (which lives in the
+     * top layer and spans the whole viewport regardless of ancestor transforms /
+     * stacking contexts) and hide the confined internal scrim.
+     */
+    private patchDialogScrim;
     registerTheme(theme?: Theme): void;
     openFormDialog(): void;
     handleFormSubmit(event: Event): void;

package/dist/widget-form.js

@@ -9,7 +9,7 @@ import "@material/web/checkbox/checkbox.js";
 import "@material/web/select/outlined-select.js";
 import "@material/web/select/select-option.js";
 const H = globalThis, W = H.ShadowRoot && (H.ShadyCSS === void 0 || H.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, K = /* @__PURE__ */ Symbol(), Y = /* @__PURE__ */ new WeakMap();
-let dt = class {
+let ut = class {
   constructor(t, s, r) {
     if (this._$cssResult$ = !0, r !== K) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = s;
@@ -27,13 +27,13 @@ let dt = class {
     return this.cssText;
   }
 };
-const yt = (e) => new dt(typeof e == "string" ? e : e + "", void 0, K), vt = (e, ...t) => {
+const yt = (e) => new ut(typeof e == "string" ? e : e + "", void 0, K), vt = (e, ...t) => {
   const s = e.length === 1 ? e[0] : t.reduce(((r, i, n) => r + ((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.");
   })(i) + e[n + 1]), e[0]);
-  return new dt(s, e, K);
+  return new ut(s, e, K);
 }, At = (e, t) => {
   if (W) e.adoptedStyleSheets = t.map(((s) => s instanceof CSSStyleSheet ? s : s.styleSheet));
   else for (const s of t) {
@@ -45,7 +45,7 @@ const yt = (e) => new dt(typeof e == "string" ? e : e + "", void 0, K), vt = (e,
   for (const r of t.cssRules) s += r.cssText;
   return yt(s);
 })(e) : e;
-const { is: xt, defineProperty: wt, getOwnPropertyDescriptor: Et, getOwnPropertyNames: St, getOwnPropertySymbols: Ct, getPrototypeOf: Pt } = Object, R = globalThis, et = R.trustedTypes, kt = et ? et.emptyScript : "", Dt = R.reactiveElementPolyfillSupport, O = (e, t) => e, V = { toAttribute(e, t) {
+const { is: xt, defineProperty: wt, getOwnPropertyDescriptor: St, getOwnPropertyNames: Et, getOwnPropertySymbols: Ct, getPrototypeOf: Pt } = Object, N = globalThis, et = N.trustedTypes, kt = et ? et.emptyScript : "", Dt = N.reactiveElementPolyfillSupport, O = (e, t) => e, R = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
       e = e ? kt : null;
@@ -73,9 +73,9 @@ const { is: xt, defineProperty: wt, getOwnPropertyDescriptor: Et, getOwnProperty
       }
   }
   return s;
-} }, Z = (e, t) => !xt(e, t), st = { attribute: !0, type: String, converter: V, reflect: !1, useDefault: !1, hasChanged: Z };
-Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), R.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-let S = class extends HTMLElement {
+} }, Z = (e, t) => !xt(e, t), st = { attribute: !0, type: String, converter: R, reflect: !1, useDefault: !1, hasChanged: Z };
+Symbol.metadata ??= /* @__PURE__ */ Symbol("metadata"), N.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+let E = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
   }
@@ -89,7 +89,7 @@ let S = class extends HTMLElement {
     }
   }
   static getPropertyDescriptor(t, s, r) {
-    const { get: i, set: n } = Et(this.prototype, t) ?? { get() {
+    const { get: i, set: n } = St(this.prototype, t) ?? { get() {
       return this[s];
     }, set(o) {
       this[s] = o;
@@ -110,7 +110,7 @@ let S = class extends HTMLElement {
   static finalize() {
     if (this.hasOwnProperty(O("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(O("properties"))) {
-      const s = this.properties, r = [...St(s), ...Ct(s)];
+      const s = this.properties, r = [...Et(s), ...Ct(s)];
       for (const i of r) this.createProperty(i, s[i]);
     }
     const t = this[Symbol.metadata];
@@ -172,14 +172,14 @@ let S = class extends HTMLElement {
   _$ET(t, s) {
     const r = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, r);
     if (i !== void 0 && r.reflect === !0) {
-      const n = (r.converter?.toAttribute !== void 0 ? r.converter : V).toAttribute(s, r.type);
+      const n = (r.converter?.toAttribute !== void 0 ? r.converter : R).toAttribute(s, r.type);
       this._$Em = t, n == null ? this.removeAttribute(i) : this.setAttribute(i, n), this._$Em = null;
     }
   }
   _$AK(t, s) {
     const r = this.constructor, i = r._$Eh.get(t);
     if (i !== void 0 && this._$Em !== i) {
-      const n = r.getPropertyOptions(i), o = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : V;
+      const n = r.getPropertyOptions(i), o = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : R;
       this._$Em = i, this[i] = o.fromAttribute(s, n.type) ?? this._$Ej?.get(i) ?? null, this._$Em = null;
     }
   }
@@ -254,10 +254,10 @@ let S = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[O("elementProperties")] = /* @__PURE__ */ new Map(), S[O("finalized")] = /* @__PURE__ */ new Map(), Dt?.({ ReactiveElement: S }), (R.reactiveElementVersions ??= []).push("2.1.0");
-const J = globalThis, N = J.trustedTypes, rt = N ? N.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, pt = "$lit$", y = `lit$${Math.random().toFixed(9).slice(2)}$`, mt = "?" + y, Ot = `<${mt}>`, w = document, U = () => w.createComment(""), M = (e) => e === null || typeof e != "object" && typeof e != "function", Q = Array.isArray, Tt = (e) => Q(e) || typeof e?.[Symbol.iterator] == "function", I = `[ 	
+E.elementStyles = [], E.shadowRootOptions = { mode: "open" }, E[O("elementProperties")] = /* @__PURE__ */ new Map(), E[O("finalized")] = /* @__PURE__ */ new Map(), Dt?.({ ReactiveElement: E }), (N.reactiveElementVersions ??= []).push("2.1.0");
+const J = globalThis, V = J.trustedTypes, rt = V ? V.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, pt = "$lit$", y = `lit$${Math.random().toFixed(9).slice(2)}$`, mt = "?" + y, Ot = `<${mt}>`, w = document, U = () => w.createComment(""), M = (e) => e === null || typeof e != "object" && typeof e != "function", Q = Array.isArray, Tt = (e) => Q(e) || typeof e?.[Symbol.iterator] == "function", I = `[ 	
 \f\r]`, k = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, it = /-->/g, ot = />/g, v = RegExp(`>|${I}(?:([^\\s"'>=/]+)(${I}*=${I}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), nt = /'/g, lt = /"/g, $t = /^(?:script|style|textarea|title)$/i, Ut = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), f = Ut(1), E = /* @__PURE__ */ Symbol.for("lit-noChange"), m = /* @__PURE__ */ Symbol.for("lit-nothing"), at = /* @__PURE__ */ new WeakMap(), x = w.createTreeWalker(w, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), nt = /'/g, lt = /"/g, $t = /^(?:script|style|textarea|title)$/i, Ut = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), f = Ut(1), S = /* @__PURE__ */ Symbol.for("lit-noChange"), p = /* @__PURE__ */ Symbol.for("lit-nothing"), at = /* @__PURE__ */ new WeakMap(), x = w.createTreeWalker(w, 129);
 function ft(e, t) {
   if (!Q(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return rt !== void 0 ? rt.createHTML(t) : t;
@@ -267,10 +267,10 @@ const Mt = (e, t) => {
   let i, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = k;
   for (let h = 0; h < s; h++) {
     const l = e[h];
-    let c, p, a = -1, d = 0;
-    for (; d < l.length && (o.lastIndex = d, p = o.exec(l), p !== null); ) d = o.lastIndex, o === k ? p[1] === "!--" ? o = it : p[1] !== void 0 ? o = ot : p[2] !== void 0 ? ($t.test(p[2]) && (i = RegExp("</" + p[2], "g")), o = v) : p[3] !== void 0 && (o = v) : o === v ? p[0] === ">" ? (o = i ?? k, a = -1) : p[1] === void 0 ? a = -2 : (a = o.lastIndex - p[2].length, c = p[1], o = p[3] === void 0 ? v : p[3] === '"' ? lt : nt) : o === lt || o === nt ? o = v : o === it || o === ot ? o = k : (o = v, i = void 0);
-    const u = o === v && e[h + 1].startsWith("/>") ? " " : "";
-    n += o === k ? l + Ot : a >= 0 ? (r.push(c), l.slice(0, a) + pt + l.slice(a) + y + u) : l + y + (a === -2 ? h : u);
+    let c, m, a = -1, u = 0;
+    for (; u < l.length && (o.lastIndex = u, m = o.exec(l), m !== null); ) u = o.lastIndex, o === k ? m[1] === "!--" ? o = it : m[1] !== void 0 ? o = ot : m[2] !== void 0 ? ($t.test(m[2]) && (i = RegExp("</" + m[2], "g")), o = v) : m[3] !== void 0 && (o = v) : o === v ? m[0] === ">" ? (o = i ?? k, a = -1) : m[1] === void 0 ? a = -2 : (a = o.lastIndex - m[2].length, c = m[1], o = m[3] === void 0 ? v : m[3] === '"' ? lt : nt) : o === lt || o === nt ? o = v : o === it || o === ot ? o = k : (o = v, i = void 0);
+    const d = o === v && e[h + 1].startsWith("/>") ? " " : "";
+    n += o === k ? l + Ot : a >= 0 ? (r.push(c), l.slice(0, a) + pt + l.slice(a) + y + d) : l + y + (a === -2 ? h : d);
   }
   return [ft(e, n + (e[s] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
 };
@@ -279,7 +279,7 @@ class F {
     let i;
     this.parts = [];
     let n = 0, o = 0;
-    const h = t.length - 1, l = this.parts, [c, p] = Mt(t, s);
+    const h = t.length - 1, l = this.parts, [c, m] = Mt(t, s);
     if (this.el = F.createElement(c, r), x.currentNode = this.el.content, s === 2 || s === 3) {
       const a = this.el.content.firstChild;
       a.replaceWith(...a.childNodes);
@@ -287,15 +287,15 @@ class F {
     for (; (i = x.nextNode()) !== null && l.length < h; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const a of i.getAttributeNames()) if (a.endsWith(pt)) {
-          const d = p[o++], u = i.getAttribute(a).split(y), $ = /([.?@])?(.*)/.exec(d);
-          l.push({ type: 1, index: n, name: $[2], strings: u, ctor: $[1] === "." ? Ht : $[1] === "?" ? Vt : $[1] === "@" ? Nt : j }), i.removeAttribute(a);
+          const u = m[o++], d = i.getAttribute(a).split(y), $ = /([.?@])?(.*)/.exec(u);
+          l.push({ type: 1, index: n, name: $[2], strings: d, ctor: $[1] === "." ? Ht : $[1] === "?" ? Rt : $[1] === "@" ? Vt : B }), i.removeAttribute(a);
         } else a.startsWith(y) && (l.push({ type: 6, index: n }), i.removeAttribute(a));
         if ($t.test(i.tagName)) {
-          const a = i.textContent.split(y), d = a.length - 1;
-          if (d > 0) {
-            i.textContent = N ? N.emptyScript : "";
-            for (let u = 0; u < d; u++) i.append(a[u], U()), x.nextNode(), l.push({ type: 2, index: ++n });
-            i.append(a[d], U());
+          const a = i.textContent.split(y), u = a.length - 1;
+          if (u > 0) {
+            i.textContent = V ? V.emptyScript : "";
+            for (let d = 0; d < u; d++) i.append(a[d], U()), x.nextNode(), l.push({ type: 2, index: ++n });
+            i.append(a[u], U());
           }
         }
       } else if (i.nodeType === 8) if (i.data === mt) l.push({ type: 2, index: n });
@@ -312,7 +312,7 @@ class F {
   }
 }
 function C(e, t, s = e, r) {
-  if (t === E) return t;
+  if (t === S) return t;
   let i = r !== void 0 ? s._$Co?.[r] : s._$Cl;
   const n = M(t) ? void 0 : t._$litDirective$;
   return i?.constructor !== n && (i?._$AO?.(!1), n === void 0 ? i = void 0 : (i = new n(e), i._$AT(e, s, r)), r !== void 0 ? (s._$Co ??= [])[r] = i : s._$Cl = i), i !== void 0 && (t = C(e, i._$AS(e, t.values), i, r)), t;
@@ -334,7 +334,7 @@ let Ft = class {
     for (; l !== void 0; ) {
       if (o === l.index) {
         let c;
-        l.type === 2 ? c = new P(n, n.nextSibling, this, t) : l.type === 1 ? c = new l.ctor(n, l.name, l.strings, this, t) : l.type === 6 && (c = new Rt(n, this, t)), this._$AV.push(c), l = r[++h];
+        l.type === 2 ? c = new P(n, n.nextSibling, this, t) : l.type === 1 ? c = new l.ctor(n, l.name, l.strings, this, t) : l.type === 6 && (c = new Nt(n, this, t)), this._$AV.push(c), l = r[++h];
       }
       o !== l?.index && (n = x.nextNode(), o++);
     }
@@ -350,7 +350,7 @@ class P {
     return this._$AM?._$AU ?? this._$Cv;
   }
   constructor(t, s, r, i) {
-    this.type = 2, this._$AH = m, this._$AN = void 0, this._$AA = t, this._$AB = s, this._$AM = r, this.options = i, this._$Cv = i?.isConnected ?? !0;
+    this.type = 2, this._$AH = p, this._$AN = void 0, this._$AA = t, this._$AB = s, this._$AM = r, this.options = i, this._$Cv = i?.isConnected ?? !0;
   }
   get parentNode() {
     let t = this._$AA.parentNode;
@@ -364,7 +364,7 @@ class P {
     return this._$AB;
   }
   _$AI(t, s = this) {
-    t = C(this, t, s), M(t) ? t === m || t == null || t === "" ? (this._$AH !== m && this._$AR(), this._$AH = m) : t !== this._$AH && t !== E && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Tt(t) ? this.k(t) : this._(t);
+    t = C(this, t, s), M(t) ? t === p || t == null || t === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : t !== this._$AH && t !== S && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Tt(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -373,7 +373,7 @@ class P {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== m && M(this._$AH) ? this._$AA.nextSibling.data = t : this.T(w.createTextNode(t)), this._$AH = t;
+    this._$AH !== p && M(this._$AH) ? this._$AA.nextSibling.data = t : this.T(w.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     const { values: s, _$litType$: r } = t, i = typeof r == "number" ? this._$AC(t) : (r.el === void 0 && (r.el = F.createElement(ft(r.h, r.h[0]), this.options)), r);
@@ -404,7 +404,7 @@ class P {
     this._$AM === void 0 && (this._$Cv = t, this._$AP?.(t));
   }
 }
-class j {
+class B {
   get tagName() {
     return this.element.tagName;
   }
@@ -412,53 +412,53 @@ class j {
     return this._$AM._$AU;
   }
   constructor(t, s, r, i, n) {
-    this.type = 1, this._$AH = m, this._$AN = void 0, this.element = t, this.name = s, this._$AM = i, this.options = n, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = m;
+    this.type = 1, this._$AH = p, this._$AN = void 0, this.element = t, this.name = s, this._$AM = i, this.options = n, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = p;
   }
   _$AI(t, s = this, r, i) {
     const n = this.strings;
     let o = !1;
-    if (n === void 0) t = C(this, t, s, 0), o = !M(t) || t !== this._$AH && t !== E, o && (this._$AH = t);
+    if (n === void 0) t = C(this, t, s, 0), o = !M(t) || t !== this._$AH && t !== S, o && (this._$AH = t);
     else {
       const h = t;
       let l, c;
-      for (t = n[0], l = 0; l < n.length - 1; l++) c = C(this, h[r + l], s, l), c === E && (c = this._$AH[l]), o ||= !M(c) || c !== this._$AH[l], c === m ? t = m : t !== m && (t += (c ?? "") + n[l + 1]), this._$AH[l] = c;
+      for (t = n[0], l = 0; l < n.length - 1; l++) c = C(this, h[r + l], s, l), c === S && (c = this._$AH[l]), o ||= !M(c) || c !== this._$AH[l], c === p ? t = p : t !== p && (t += (c ?? "") + n[l + 1]), this._$AH[l] = c;
     }
     o && !i && this.j(t);
   }
   j(t) {
-    t === m ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+    t === p ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class Ht extends j {
+class Ht extends B {
   constructor() {
     super(...arguments), this.type = 3;
   }
   j(t) {
-    this.element[this.name] = t === m ? void 0 : t;
+    this.element[this.name] = t === p ? void 0 : t;
   }
 }
-class Vt extends j {
+class Rt extends B {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(t) {
-    this.element.toggleAttribute(this.name, !!t && t !== m);
+    this.element.toggleAttribute(this.name, !!t && t !== p);
   }
 }
-class Nt extends j {
+class Vt extends B {
   constructor(t, s, r, i, n) {
     super(t, s, r, i, n), this.type = 5;
   }
   _$AI(t, s = this) {
-    if ((t = C(this, t, s, 0) ?? m) === E) return;
-    const r = this._$AH, i = t === m && r !== m || t.capture !== r.capture || t.once !== r.once || t.passive !== r.passive, n = t !== m && (r === m || i);
+    if ((t = C(this, t, s, 0) ?? p) === S) return;
+    const r = this._$AH, i = t === p && r !== p || t.capture !== r.capture || t.once !== r.once || t.passive !== r.passive, n = t !== p && (r === p || i);
     i && this.element.removeEventListener(this.name, this, r), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
   handleEvent(t) {
     typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
   }
 }
-class Rt {
+class Nt {
   constructor(t, s, r) {
     this.element = t, this.type = 6, this._$AN = void 0, this._$AM = s, this.options = r;
   }
@@ -469,8 +469,8 @@ class Rt {
     C(this, t);
   }
 }
-const jt = { I: P }, Bt = J.litHtmlPolyfillSupport;
-Bt?.(F, P), (J.litHtmlVersions ??= []).push("3.3.0");
+const Bt = { I: P }, jt = J.litHtmlPolyfillSupport;
+jt?.(F, P), (J.litHtmlVersions ??= []).push("3.3.0");
 const qt = (e, t, s) => {
   const r = s?.renderBefore ?? t;
   let i = r._$litPart$;
@@ -481,7 +481,7 @@ const qt = (e, t, s) => {
   return i._$AI(e), i;
 };
 const G = globalThis;
-let T = class extends S {
+let T = class extends E {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -500,7 +500,7 @@ let T = class extends S {
     super.disconnectedCallback(), this._$Do?.setConnected(!1);
   }
   render() {
-    return E;
+    return S;
   }
 };
 T._$litElement$ = !0, T.finalized = !0, G.litElementHydrateSupport?.({ LitElement: T });
@@ -524,7 +524,7 @@ let gt = class {
     return this.render(...s);
   }
 };
-const { I: Lt } = jt, ht = () => document.createComment(""), D = (e, t, s) => {
+const { I: Lt } = Bt, ht = () => document.createComment(""), D = (e, t, s) => {
   const r = e._$AA.parentNode, i = t === void 0 ? e._$AB : t._$AA;
   if (s === void 0) {
     const n = r.insertBefore(ht(), i), o = r.insertBefore(ht(), i);
@@ -557,7 +557,7 @@ const ct = (e, t, s) => {
   const r = /* @__PURE__ */ new Map();
   for (let i = t; i <= s; i++) r.set(e[i], i);
   return r;
-}, ut = bt(class extends gt {
+}, dt = bt(class extends gt {
   constructor(e) {
     if (super(e), e.type !== It.CHILD) throw Error("repeat() can only be used in text expressions");
   }
@@ -576,36 +576,36 @@ const ct = (e, t, s) => {
     const i = Kt(e), { values: n, keys: o } = this.dt(t, s, r);
     if (!Array.isArray(i)) return this.ut = o, n;
     const h = this.ut ??= [], l = [];
-    let c, p, a = 0, d = i.length - 1, u = 0, $ = n.length - 1;
-    for (; a <= d && u <= $; ) if (i[a] === null) a++;
-    else if (i[d] === null) d--;
-    else if (h[a] === o[u]) l[u] = A(i[a], n[u]), a++, u++;
-    else if (h[d] === o[$]) l[$] = A(i[d], n[$]), d--, $--;
+    let c, m, a = 0, u = i.length - 1, d = 0, $ = n.length - 1;
+    for (; a <= u && d <= $; ) if (i[a] === null) a++;
+    else if (i[u] === null) u--;
+    else if (h[a] === o[d]) l[d] = A(i[a], n[d]), a++, d++;
+    else if (h[u] === o[$]) l[$] = A(i[u], n[$]), u--, $--;
     else if (h[a] === o[$]) l[$] = A(i[a], n[$]), D(e, l[$ + 1], i[a]), a++, $--;
-    else if (h[d] === o[u]) l[u] = A(i[d], n[u]), D(e, i[a], i[d]), d--, u++;
-    else if (c === void 0 && (c = ct(o, u, $), p = ct(h, a, d)), c.has(h[a])) if (c.has(h[d])) {
-      const g = p.get(o[u]), z = g !== void 0 ? i[g] : null;
+    else if (h[u] === o[d]) l[d] = A(i[u], n[d]), D(e, i[a], i[u]), u--, d++;
+    else if (c === void 0 && (c = ct(o, d, $), m = ct(h, a, u)), c.has(h[a])) if (c.has(h[u])) {
+      const g = m.get(o[d]), z = g !== void 0 ? i[g] : null;
       if (z === null) {
         const X = D(e, i[a]);
-        A(X, n[u]), l[u] = X;
-      } else l[u] = A(z, n[u]), D(e, i[a], z), i[g] = null;
-      u++;
-    } else L(i[d]), d--;
+        A(X, n[d]), l[d] = X;
+      } else l[d] = A(z, n[d]), D(e, i[a], z), i[g] = null;
+      d++;
+    } else L(i[u]), u--;
     else L(i[a]), a++;
-    for (; u <= $; ) {
+    for (; d <= $; ) {
       const g = D(e, l[$ + 1]);
-      A(g, n[u]), l[u++] = g;
+      A(g, n[d]), l[d++] = g;
     }
-    for (; a <= d; ) {
+    for (; a <= u; ) {
       const g = i[a++];
       g !== null && L(g);
     }
-    return this.ut = o, _t(e, l), E;
+    return this.ut = o, _t(e, l), S;
   }
 });
 const Zt = bt(class extends gt {
   constructor() {
-    super(...arguments), this.key = m;
+    super(...arguments), this.key = p;
   }
   render(e, t) {
     return this.key = e, t;
@@ -619,7 +619,7 @@ const Jt = (e) => (t, s) => {
     customElements.define(e, t);
   })) : customElements.define(e, t);
 };
-const Qt = { attribute: !0, type: String, converter: V, reflect: !1, hasChanged: Z }, Gt = (e = Qt, t, s) => {
+const Qt = { attribute: !0, type: String, converter: R, reflect: !1, hasChanged: Z }, Gt = (e = Qt, t, s) => {
   const { kind: r, metadata: i } = s;
   let n = globalThis.litPropertyMetadata.get(i);
   if (n === void 0 && globalThis.litPropertyMetadata.set(i, n = /* @__PURE__ */ new Map()), r === "setter" && ((e = Object.create(e)).wrapped = !0), n.set(s.name, e), r === "accessor") {
@@ -640,14 +640,14 @@ const Qt = { attribute: !0, type: String, converter: V, reflect: !1, hasChanged:
   }
   throw Error("Unsupported decorator location: " + r);
 };
-function B(e) {
+function j(e) {
   return (t, s) => typeof s == "object" ? Gt(e, t, s) : ((r, i, n) => {
     const o = i.hasOwnProperty(n);
     return i.constructor.createProperty(n, r), o ? Object.getOwnPropertyDescriptor(i, n) : void 0;
   })(e, t, s);
 }
 function q(e) {
-  return B({ ...e, state: !0, attribute: !1 });
+  return j({ ...e, state: !0, attribute: !1 });
 }
 const Xt = (e, t, s) => (s.configurable = !0, s.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(e, t, s), s);
 function Yt(e, t) {
@@ -665,7 +665,7 @@ var te = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, _ = (e, t,
 };
 let b = class extends T {
   constructor() {
-    super(...arguments), this.dialogOpen = !1, this.formKey = 0, this.version = "1.0.19";
+    super(...arguments), this.dialogOpen = !1, this.formKey = 0, this.version = "1.0.22", this.dialogScrimPatched = !1;
   }
   update(e) {
     e.has("theme") && this.registerTheme(this.theme), super.update(e);
@@ -673,6 +673,35 @@ let b = class extends T {
   firstUpdated(e) {
     this.registerTheme(this.theme);
   }
+  updated(e) {
+    this.patchDialogScrim();
+  }
+  /**
+   * md-dialog renders its scrim as a `<div class="scrim">` sibling of the
+   * native `<dialog>` inside its shadow root, with `position: fixed; z-index: 1`,
+   * while disabling the native backdrop (`::backdrop { background: none }`).
+   * The `<dialog>` is promoted to the top layer by `showModal()`, but the scrim
+   * div stays in the normal layer — confined to this widget's stacking context.
+   * As a result it fails to cover sibling dashboard widgets painted in a higher
+   * stacking context. We re-enable the native `::backdrop` (which lives in the
+   * top layer and spans the whole viewport regardless of ancestor transforms /
+   * stacking contexts) and hide the confined internal scrim.
+   */
+  patchDialogScrim() {
+    if (this.dialogScrimPatched) return;
+    const e = this.dialog?.shadowRoot;
+    if (!e) return;
+    const t = new CSSStyleSheet();
+    t.replaceSync(`
+            dialog::backdrop {
+                background: var(--md-sys-color-scrim, #000);
+                opacity: 0.32;
+            }
+            .scrim {
+                display: none !important;
+            }
+        `), e.adoptedStyleSheets = [...e.adoptedStyleSheets, t], this.dialogScrimPatched = !0;
+  }
   registerTheme(e) {
     const t = getComputedStyle(this).getPropertyValue("--re-text-color").trim(), s = getComputedStyle(this).getPropertyValue("--re-tile-background-color").trim();
     this.themeBgColor = s || this.theme?.theme_object?.backgroundColor, this.themeTitleColor = t || this.theme?.theme_object?.title?.textStyle?.color;
@@ -690,8 +719,8 @@ let b = class extends T {
       else if (o.type === "checkbox")
         c = i.has(l) ? "on" : "off";
       else {
-        const p = i.get(l);
-        c = p === null || p === "" ? o.defaultValue ?? "" : p;
+        const m = i.get(l);
+        c = m === null || m === "" ? o.defaultValue ?? "" : m;
       }
       return {
         swarm_app_databackend_key: o.targetColumn?.swarm_app_databackend_key,
@@ -808,7 +837,7 @@ let b = class extends T {
                     supporting-text=${e.description ?? ""}
                     ?required=${e.required && !e.defaultValue && !e.preFilledValue}
                 >
-                    ${ut(
+                    ${dt(
       e.values ?? [],
       (s) => s.value,
       (s) => f`
@@ -867,6 +896,10 @@ let b = class extends T {
                     --md-sys-color-on-surface-variant: ${e};
                     --md-sys-color-outline: ${e};
                     --md-sys-color-surface-container: ${s};
+                    /* Dialog/widget surface honors the theme alpha (may be transparent),
+                       while the select dropdown panel always uses the alpha-stripped
+                       color so it stays fully opaque. */
+                    --md-dialog-container-color: ${t};
                     --md-menu-container-color: ${s};
                     --md-menu-item-selected-container-color: ${s};
                     --md-menu-item-selected-label-text-color: ${e};
@@ -877,16 +910,23 @@ let b = class extends T {
                 ${this.inputData?.formButton ? f`
                           <md-fab
                               aria-label="Add"
-                              style="margin-left: 16px; --md-fab-container-color: ${this.theme?.theme_object?.color?.[0] ?? "#9064f7"}"
+                              .size=${this.inputData.formButtonStyle?.size || "medium"}
+                              style="margin: 8px; --md-fab-container-color: ${(this.inputData.formButtonStyle?.bgColor || this.theme?.theme_object?.color?.[0]) ?? "#9064f7"}; --md-fab-icon-color: ${(this.inputData.formButtonStyle?.color || this.theme?.theme_object?.color?.[1]) ?? "#fff"}"
                               @click=${this.openFormDialog}
                           >
                               <md-icon slot="icon">add</md-icon>
                           </md-fab>
-                      ` : m}
-                <header>
-                    <h3 class="paging" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>
-                    <p class="paging" ?active=${this.inputData?.subTitle}>${this.inputData?.subTitle}</p>
-                </header>
+                      ` : p}
+                ${this.inputData?.formButton ? p : f`
+                          <header>
+                              <h3 class="paging" ?active=${this.inputData?.title}>
+                                  ${this.inputData?.title}
+                              </h3>
+                              <p class="paging" ?active=${this.inputData?.subTitle}>
+                                  ${this.inputData?.subTitle}
+                              </p>
+                          </header>
+                      `}
             </div>
             ${this.inputData?.formButton ? f`
                       <md-dialog
@@ -911,7 +951,7 @@ let b = class extends T {
                                         value="delete"
                                         type="submit"
                                         >Delete</md-filled-button
-                                    >` : m}
+                                    >` : p}
                               <md-outlined-button @click=${this.resetForm}>Reset</md-outlined-button>
                               <md-outlined-button @click=${this.cancelEdit}>Cancel</md-outlined-button>
                               <md-filled-button form="form" value="submit" type="submit" autofocus
@@ -929,7 +969,7 @@ let b = class extends T {
                                         value="delete"
                                         type="submit"
                                         >Delete</md-filled-button
-                                    >` : m}
+                                    >` : p}
                               <md-outlined-button @click=${this.resetForm}>Reset</md-outlined-button>
                               <md-filled-button form="form" value="submit" type="submit" autofocus
                                   >Submit</md-filled-button
@@ -950,11 +990,11 @@ let b = class extends T {
                     class="form-content"
                     @submit=${this.handleFormSubmit}
                 >
-                    ${ut(
+                    ${dt(
         this.inputData?.formFields ?? [],
         (e, t) => t,
         (e, t) => {
-          if (e.hiddenField) return m;
+          if (e.hiddenField) return p;
           switch (e.type) {
             case "textfield":
               return this.renderTextField(e, t);
@@ -986,16 +1026,6 @@ b.styles = vt`
             margin: auto;
         }
 
-        .edit-fab {
-            --md-fab-icon-color: white;
-            --md-fab-container-color: #007bff;
-            --md-fab-label-text-color: white;
-            position: absolute;
-            bottom: 24px;
-            right: 24px;
-            z-index: 10;
-        }
-
         .paging:not([active]) {
             display: none !important;
         }
@@ -1059,7 +1089,12 @@ b.styles = vt`
 
         /* The dialog classes */
         .form {
-            min-width: 80%;
+            /* Fields are stacked in a single column, so a wide dialog just
+               stretches them unreadably. Cap at a comfortable form width but
+               shrink to fit narrow viewports. Height stays content-driven
+               (Material's fit-content), capped at 80% of the viewport. */
+            width: min(90vw, 480px);
+            max-height: 80vh;
         }
 
         .form [slot='header'] {
@@ -1123,13 +1158,13 @@ b.styles = vt`
         }
     `;
 _([
-  B({ type: Object })
+  j({ type: Object })
 ], b.prototype, "inputData", 2);
 _([
-  B({ type: Object })
+  j({ type: Object })
 ], b.prototype, "theme", 2);
 _([
-  B({ type: String })
+  j({ type: String })
 ], b.prototype, "route", 2);
 _([
   q()
@@ -1147,7 +1182,7 @@ _([
   q()
 ], b.prototype, "formKey", 2);
 b = _([
-  Jt("widget-form-1.0.19")
+  Jt("widget-form-1.0.22")
 ], b);
 export {
   b as WidgetForm