@iyulab/u-widgets 0.7.1 → 0.8.0

package/dist/u-widgets.js

@@ -40,51 +40,51 @@ const xe = /* @__PURE__ */ new Set([
   "chart.treemap"
 ]), _e = /* @__PURE__ */ new Set(["metric", "gauge", "progress", "header", "code", "rating", "video"]);
 function Y(e, t = 0) {
-  const a = [], r = [];
+  const i = [], r = [];
   if (t > le)
     return { valid: !1, errors: ["compose children exceed maximum nesting depth (" + le + ")"], warnings: r };
   if (e == null || typeof e != "object")
     return { valid: !1, errors: ["Spec must be a non-null object"], warnings: r };
-  const i = e;
-  if (typeof i.widget != "string" || i.widget.length === 0)
-    return a.push('Required field "widget" must be a non-empty string'), { valid: !1, errors: a, warnings: r };
-  const s = i.widget;
-  if (t === 0 && i.type !== void 0 && i.type !== "u-widget" && a.push('"type" must be "u-widget" if specified'), i.fields !== void 0 && i.formdown !== void 0 && a.push('"fields" and "formdown" are mutually exclusive'), i.data !== void 0 && ($e.has(s) && !Array.isArray(i.data) && a.push(`"${s}" expects "data" to be an array, got ${typeof i.data}`), _e.has(s) && (Array.isArray(i.data) || typeof i.data != "object") && a.push(`"${s}" expects "data" to be an object, got ${Array.isArray(i.data) ? "array" : typeof i.data}`)), s === "compose") {
-    if (!Array.isArray(i.children))
-      a.push('"compose" widget requires a "children" array');
+  const a = e;
+  if (typeof a.widget != "string" || a.widget.length === 0)
+    return i.push('Required field "widget" must be a non-empty string'), { valid: !1, errors: i, warnings: r };
+  const s = a.widget;
+  if (t === 0 && a.type !== void 0 && a.type !== "u-widget" && i.push('"type" must be "u-widget" if specified'), a.fields !== void 0 && a.formdown !== void 0 && i.push('"fields" and "formdown" are mutually exclusive'), a.data !== void 0 && ($e.has(s) && !Array.isArray(a.data) && i.push(`"${s}" expects "data" to be an array, got ${typeof a.data}`), _e.has(s) && (Array.isArray(a.data) || typeof a.data != "object") && i.push(`"${s}" expects "data" to be an object, got ${Array.isArray(a.data) ? "array" : typeof a.data}`)), s === "compose") {
+    if (!Array.isArray(a.children))
+      i.push('"compose" widget requires a "children" array');
     else
-      for (let n = 0; n < i.children.length; n++) {
-        const d = i.children[n];
+      for (let n = 0; n < a.children.length; n++) {
+        const d = a.children[n];
         if (d == null || typeof d != "object" || typeof d.widget != "string")
-          a.push(`children[${n}] must be an object with a "widget" field`);
+          i.push(`children[${n}] must be an object with a "widget" field`);
         else {
           const c = Y(d, t + 1);
-          c.valid || a.push(...c.errors.map((p) => `children[${n}]: ${p}`)), r.push(...c.warnings.map((p) => `children[${n}]: ${p}`));
+          c.valid || i.push(...c.errors.map((p) => `children[${n}]: ${p}`)), r.push(...c.warnings.map((p) => `children[${n}]: ${p}`));
         }
       }
-    if (i.layout !== void 0) {
+    if (a.layout !== void 0) {
       const n = ["stack", "row", "grid"];
-      n.includes(i.layout) || a.push(`"layout" must be one of: ${n.join(", ")}`);
+      n.includes(a.layout) || i.push(`"layout" must be one of: ${n.join(", ")}`);
     }
   }
-  if (Array.isArray(i.fields))
-    for (let n = 0; n < i.fields.length; n++) {
-      const d = i.fields[n];
-      d == null || typeof d != "object" || typeof d.field != "string" ? a.push(`fields[${n}] must have a "field" string property`) : d.type != null && !xe.has(d.type) && r.push(`fields[${n}].type "${d.type}" is not a recognized field type`);
+  if (Array.isArray(a.fields))
+    for (let n = 0; n < a.fields.length; n++) {
+      const d = a.fields[n];
+      d == null || typeof d != "object" || typeof d.field != "string" ? i.push(`fields[${n}] must have a "field" string property`) : d.type != null && !xe.has(d.type) && r.push(`fields[${n}].type "${d.type}" is not a recognized field type`);
     }
-  if (typeof i.formdown == "string" && i.formdown.length > 0 && !i.fields)
+  if (typeof a.formdown == "string" && a.formdown.length > 0 && !a.fields)
     try {
-      be()(i.formdown);
+      be()(a.formdown);
     } catch {
       r.push("formdown string could not be parsed — check syntax");
     }
-  if (Array.isArray(i.actions))
-    for (let n = 0; n < i.actions.length; n++) {
-      const d = i.actions[n];
-      (d == null || typeof d != "object" || typeof d.label != "string" || typeof d.action != "string") && a.push(`actions[${n}] must have "label" and "action" string properties`);
+  if (Array.isArray(a.actions))
+    for (let n = 0; n < a.actions.length; n++) {
+      const d = a.actions[n];
+      (d == null || typeof d != "object" || typeof d.label != "string" || typeof d.action != "string") && i.push(`actions[${n}] must have "label" and "action" string properties`);
     }
-  if (i.mapping && typeof i.mapping == "object" && i.data) {
-    const n = i.mapping, d = ke(i.data);
+  if (a.mapping && typeof a.mapping == "object" && a.data) {
+    const n = a.mapping, d = ke(a.data);
     if (d)
       for (const c of ["x", "y", "label", "value", "color", "size", "axis", "primary", "secondary", "icon", "avatar", "trailing"]) {
         const p = n[c];
@@ -93,7 +93,7 @@ function Y(e, t = 0) {
             typeof g == "string" && !d.has(g) && r.push(`mapping.${c} references "${g}" which is not found in data keys [${[...d].join(", ")}]`);
       }
   }
-  return { valid: a.length === 0, errors: a, warnings: r };
+  return { valid: i.length === 0, errors: i, warnings: r };
 }
 function ke(e) {
   if (Array.isArray(e) && e.length > 0 && e[0] && typeof e[0] == "object")
@@ -124,20 +124,20 @@ const ce = ["B", "KB", "MB", "GB", "TB"], ze = /* @__PURE__ */ new Set([
   "XOF",
   "XPF"
 ]);
-function he(e, t, a) {
+function he(e, t, i) {
   if (e == null) return "";
-  const [r, i] = t?.split(":") ?? [];
+  const [r, a] = t?.split(":") ?? [];
   switch (r) {
     case "number":
-      return Se(e, a);
+      return Se(e, i);
     case "currency":
-      return Ae(e, i, a);
+      return Ae(e, a, i);
     case "percent":
-      return Ce(e, a);
+      return Ce(e, i);
     case "date":
-      return De(e, a);
+      return De(e, i);
     case "datetime":
-      return je(e, a);
+      return je(e, i);
     case "bytes":
       return Oe(e);
     default:
@@ -145,54 +145,54 @@ function he(e, t, a) {
   }
 }
 function Se(e, t) {
-  const a = Number(e);
-  return isNaN(a) ? String(e) : new Intl.NumberFormat(t).format(a);
+  const i = Number(e);
+  return isNaN(i) ? String(e) : new Intl.NumberFormat(t).format(i);
 }
-function Ae(e, t, a) {
+function Ae(e, t, i) {
   const r = Number(e);
   if (isNaN(r)) return String(e);
-  const i = t || "USD";
+  const a = t || "USD";
   try {
-    const s = ze.has(i.toUpperCase());
-    return new Intl.NumberFormat(a, {
+    const s = ze.has(a.toUpperCase());
+    return new Intl.NumberFormat(i, {
       style: "currency",
-      currency: i,
+      currency: a,
       ...s && {
         minimumFractionDigits: 0,
         maximumFractionDigits: 0
       }
     }).format(r);
   } catch {
-    return new Intl.NumberFormat(a, {
+    return new Intl.NumberFormat(i, {
       style: "currency",
       currency: "USD"
     }).format(r);
   }
 }
 function Ce(e, t) {
-  const a = Number(e);
-  if (isNaN(a)) return String(e);
+  const i = Number(e);
+  if (isNaN(i)) return String(e);
   if (t)
     try {
       return new Intl.NumberFormat(t, {
         style: "percent",
         maximumFractionDigits: 2
-      }).format(a / 100);
+      }).format(i / 100);
     } catch {
     }
-  return a + "%";
+  return i + "%";
 }
 function De(e, t) {
   if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}/.test(e)) {
     if (t)
       try {
-        const a = new Date(e);
-        if (!isNaN(a.getTime()))
+        const i = new Date(e);
+        if (!isNaN(i.getTime()))
           return new Intl.DateTimeFormat(t, {
             year: "numeric",
             month: "2-digit",
             day: "2-digit"
-          }).format(a);
+          }).format(i);
       } catch {
       }
     return e.slice(0, 10);
@@ -203,15 +203,15 @@ function je(e, t) {
   if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}/.test(e)) {
     if (t)
       try {
-        const a = new Date(e);
-        if (!isNaN(a.getTime()))
+        const i = new Date(e);
+        if (!isNaN(i.getTime()))
           return new Intl.DateTimeFormat(t, {
             year: "numeric",
             month: "2-digit",
             day: "2-digit",
             hour: "2-digit",
             minute: "2-digit"
-          }).format(a);
+          }).format(i);
       } catch {
       }
     return e.slice(0, 16).replace("T", " ");
@@ -221,11 +221,11 @@ function je(e, t) {
 function Oe(e) {
   const t = Number(e);
   if (isNaN(t)) return String(e);
-  const a = t < 0 ? "-" : "";
-  let r = Math.abs(t), i = 0;
-  for (; r >= 1024 && i < ce.length - 1; )
-    r /= 1024, i++;
-  return a + (i === 0 ? r : r.toFixed(1)) + " " + ce[i];
+  const i = t < 0 ? "-" : "";
+  let r = Math.abs(t), a = 0;
+  for (; r >= 1024 && a < ce.length - 1; )
+    r /= 1024, a++;
+  return i + (a === 0 ? r : r.toFixed(1)) + " " + ce[a];
 }
 const Ee = [
   "chart.bar",
@@ -266,37 +266,37 @@ const Ee = [
 function Pe(e) {
   if (!e) return;
   const t = e.toLowerCase();
-  let a, r = 1 / 0;
+  let i, r = 1 / 0;
   for (const s of Ee) {
     const n = Le(t, s);
-    n < r && (r = n, a = s);
+    n < r && (r = n, i = s);
   }
-  const i = Math.min(3, Math.floor(t.length / 2));
-  if (r <= i && r > 0)
-    return a;
+  const a = Math.min(3, Math.floor(t.length / 2));
+  if (r <= a && r > 0)
+    return i;
 }
 function Le(e, t) {
-  const a = e.length, r = t.length;
-  if (a === 0) return r;
-  if (r === 0) return a;
-  const i = new Array(r + 1);
-  for (let s = 0; s <= r; s++) i[s] = s;
-  for (let s = 1; s <= a; s++) {
+  const i = e.length, r = t.length;
+  if (i === 0) return r;
+  if (r === 0) return i;
+  const a = new Array(r + 1);
+  for (let s = 0; s <= r; s++) a[s] = s;
+  for (let s = 1; s <= i; s++) {
     let n = s - 1;
-    i[0] = s;
+    a[0] = s;
     for (let d = 1; d <= r; d++) {
       const c = e[s - 1] === t[d - 1] ? 0 : 1, p = Math.min(
-        i[d] + 1,
+        a[d] + 1,
         // deletion
-        i[d - 1] + 1,
+        a[d - 1] + 1,
         // insertion
         n + c
         // substitution
       );
-      n = i[d], i[d] = p;
+      n = a[d], a[d] = p;
     }
   }
-  return i[r];
+  return a[r];
 }
 const K = {
   // UI chrome
@@ -326,13 +326,13 @@ function me(e) {
   if (!e) return K;
   const t = e.toLowerCase();
   if (L.has(t)) return L.get(t);
-  const a = t.split("-")[0];
-  return a !== t && L.has(a) ? L.get(a) : K;
+  const i = t.split("-")[0];
+  return i !== t && L.has(i) ? L.get(i) : K;
 }
 function A(e, t) {
   return e.replace(
     /\{(\w+)\}/g,
-    (a, r) => t[r] != null ? String(t[r]) : `{${r}}`
+    (i, r) => t[r] != null ? String(t[r]) : `{${r}}`
   );
 }
 function Ot() {
@@ -351,15 +351,15 @@ function Ie(e) {
   if (typeof document < "u" && document.documentElement?.lang)
     return document.documentElement.lang;
 }
-var Ne = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, Z = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? Fe(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && Ne(t, a, i), i;
+var Ne = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, Z = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Fe(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && Ne(t, i, a), a;
 };
 function de(e, t) {
-  const a = e.value, r = e.format;
+  const i = e.value, r = e.format;
   return {
-    value: r ? he(a, r, t) : a ?? 0,
+    value: r ? he(i, r, t) : i ?? 0,
     label: e.label,
     unit: e.unit,
     prefix: e.prefix,
@@ -385,14 +385,14 @@ let I = class extends y {
     const t = this.spec.data;
     return Array.isArray(t) ? o`
       <div class="stat-group" part="stat-group">
-        ${t.map((a) => this.renderMetric(de(a, e)))}
+        ${t.map((i) => this.renderMetric(de(i, e)))}
       </div>
     ` : l;
   }
   renderMetric(e) {
-    const t = e.trend === "up" ? "↑" : e.trend === "down" ? "↓" : e.trend === "flat" ? "→" : "", a = e.label ? `${e.label}: ${e.prefix ?? ""}${e.value}${e.unit ?? ""}${e.suffix ?? ""}` : void 0;
+    const t = e.trend === "up" ? "↑" : e.trend === "down" ? "↓" : e.trend === "flat" ? "→" : "", i = e.label ? `${e.label}: ${e.prefix ?? ""}${e.value}${e.unit ?? ""}${e.suffix ?? ""}` : void 0;
     return o`
-      <div class="metric" part="metric" aria-label=${a ?? l} data-variant=${e.variant ?? l}>
+      <div class="metric" part="metric" aria-label=${i ?? l} data-variant=${e.variant ?? l}>
         ${e.icon ? o`<div class="metric-icon" part="icon">${e.icon}</div>` : l}
         ${e.label ? o`<div class="metric-label" part="label">${e.label}</div>` : l}
         <div class="metric-value" part="value">
@@ -522,15 +522,16 @@ Z([
 I = Z([
   x("uw-metric")
 ], I);
-var Me = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, Q = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? Te(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && Me(t, a, i), i;
+var Me = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, Q = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Te(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && Me(t, i, a), a;
 };
 const Ue = {
   min: 0,
   max: 100,
   unit: "",
+  subtitle: "",
   thresholds: []
 }, Re = {
   green: "#16a34a",
@@ -543,9 +544,9 @@ const Ue = {
 function pe(e) {
   return Re[e] ?? e;
 }
-function ue(e, t, a, r, i) {
-  const s = (r - 90) * Math.PI / 180, n = (i - 90) * Math.PI / 180, d = e + a * Math.cos(s), c = t + a * Math.sin(s), p = e + a * Math.cos(n), g = t + a * Math.sin(n), m = i - r > 180 ? 1 : 0;
-  return `M ${d} ${c} A ${a} ${a} 0 ${m} 1 ${p} ${g}`;
+function ue(e, t, i, r, a) {
+  const s = (r - 90) * Math.PI / 180, n = (a - 90) * Math.PI / 180, d = e + i * Math.cos(s), c = t + i * Math.sin(s), p = e + i * Math.cos(n), g = t + i * Math.sin(n), m = a - r > 180 ? 1 : 0;
+  return `M ${d} ${c} A ${i} ${i} 0 ${m} 1 ${p} ${g}`;
 }
 let N = class extends y {
   constructor() {
@@ -562,38 +563,47 @@ let N = class extends y {
     const e = this.spec.data;
     return Number(e.value ?? 0);
   }
+  getActiveLabel(e, t) {
+    if (t.subtitle) return t.subtitle;
+    if (!t.thresholds?.length) return "";
+    const i = [...t.thresholds].sort((a, s) => a.to - s.to);
+    for (const a of i)
+      if (e <= a.to && a.label) return a.label;
+    return i[i.length - 1].label ?? "";
+  }
   renderGauge() {
-    const e = this.getOptions(), t = this.getValue(), a = e.max - e.min, r = a > 0 ? Math.max(0, Math.min(1, (t - e.min) / a)) : 0, i = this.getThresholdColor(t, e), s = 100, n = 100, d = 80, c = 150, p = 240, g = c + p * r, m = ue(s, n, d, c, c + p), u = r > 0 ? ue(s, n, d, c, g) : null, h = typeof this.spec.title == "string" ? this.spec.title : "Gauge", v = `${t}${e.unit}`;
+    const e = this.getOptions(), t = this.getValue(), i = e.max - e.min, r = i > 0 ? Math.max(0, Math.min(1, (t - e.min) / i)) : 0, a = this.getThresholdColor(t, e), s = this.getActiveLabel(t, e), n = 100, d = 100, c = 80, p = 150, g = 240, m = p + g * r, u = ue(n, d, c, p, p + g), h = r > 0 ? ue(n, d, c, p, m) : null, v = typeof this.spec.title == "string" ? this.spec.title : "Gauge", $ = s ? `${t}${e.unit} ${s}` : `${t}${e.unit}`;
     return o`
       <div class="gauge-container" part="gauge"
         role="meter"
         aria-valuenow=${t}
         aria-valuemin=${e.min}
         aria-valuemax=${e.max}
-        aria-label=${h}
-        aria-valuetext=${v}
+        aria-label=${v}
+        aria-valuetext=${$}
       >
         <div class="gauge-wrapper">
           <div class="gauge-center">
             <div class="gauge-value" part="value">${t}</div>
             ${e.unit ? o`<div class="gauge-unit" part="unit">${e.unit}</div>` : l}
+            ${s ? o`<div class="gauge-subtitle" part="subtitle" style="color:${a}">${s}</div>` : l}
           </div>
           <svg class="gauge-svg" viewBox="0 0 200 195" role="presentation" aria-hidden="true">
-            <path class="gauge-track" d="${m}" fill="none" stroke-width="12" stroke-linecap="round"></path>
-            <path class="gauge-fill" d="${u ?? "M0 0"}" fill="none" stroke="${u ? i : "none"}" stroke-width="12" stroke-linecap="round"></path>
+            <path class="gauge-track" d="${u}" fill="none" stroke-width="12" stroke-linecap="round"></path>
+            <path class="gauge-fill" d="${h ?? "M0 0"}" fill="none" stroke="${h ? a : "none"}" stroke-width="12" stroke-linecap="round"></path>
           </svg>
         </div>
       </div>
     `;
   }
   renderProgress() {
-    const e = this.spec.data, t = Number(e.value ?? 0), a = Number(e.max ?? this.spec.options?.max ?? 100), r = a > 0 ? Math.max(0, Math.min(100, t / a * 100)) : 0, i = this.getOptions(), s = this.getThresholdColor(t, i), n = this.formatLabel(t, r), d = typeof this.spec.title == "string" ? this.spec.title : "Progress";
+    const e = this.spec.data, t = Number(e.value ?? 0), i = Number(e.max ?? this.spec.options?.max ?? 100), r = i > 0 ? Math.max(0, Math.min(100, t / i * 100)) : 0, a = this.getOptions(), s = this.getThresholdColor(t, a), n = this.formatLabel(t, r), d = typeof this.spec.title == "string" ? this.spec.title : "Progress";
     return o`
       <div class="progress-container" part="progress"
         role="progressbar"
         aria-valuenow=${t}
         aria-valuemin=${0}
-        aria-valuemax=${a}
+        aria-valuemax=${i}
         aria-label=${d}
       >
         <div class="progress-bar-track">
@@ -611,15 +621,15 @@ let N = class extends y {
     `;
   }
   formatLabel(e, t) {
-    const a = this.spec.options;
-    return a?.label ? String(a.label).replace("{value}", String(e)).replace("{percent}", String(Math.round(t))) : String(e);
+    const i = this.spec.options;
+    return i?.label ? String(i.label).replace("{value}", String(e)).replace("{percent}", String(Math.round(t))) : String(e);
   }
   getThresholdColor(e, t) {
     if (!t.thresholds?.length) return "var(--u-widget-primary, #4f46e5)";
-    const a = [...t.thresholds].sort((r, i) => r.to - i.to);
-    for (const r of a)
+    const i = [...t.thresholds].sort((r, a) => r.to - a.to);
+    for (const r of i)
       if (e <= r.to) return pe(r.color);
-    return pe(a[a.length - 1].color);
+    return pe(i[i.length - 1].color);
   }
 };
 N.styles = [b, w`
@@ -659,6 +669,7 @@ N.styles = [b, w`
       left: 50%;
       transform: translate(-50%, -50%);
       text-align: center;
+      width: 65%;
     }
 
     .gauge-value {
@@ -673,6 +684,17 @@ N.styles = [b, w`
       color: var(--u-widget-text-secondary, #64748b);
     }
 
+    .gauge-subtitle {
+      font-size: 0.6875rem;
+      font-weight: 600;
+      line-height: 1.2;
+      margin-top: 2px;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     /* ── progress bar ── */
     .progress-container {
       display: flex;
@@ -710,6 +732,10 @@ N.styles = [b, w`
         font-size: 0.625rem;
       }
 
+      .gauge-subtitle {
+        font-size: 0.5625rem;
+      }
+
       .progress-info {
         font-size: 0.75rem;
       }
@@ -728,23 +754,23 @@ Q([
 N = Q([
   x("uw-gauge")
 ], N);
-var qe = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, C = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? Be(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && qe(t, a, i), i;
+var qe = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, C = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Be(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && qe(t, i, a), a;
 };
 let _ = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null, this._sortField = null, this._sortDir = null, this._page = 0, this._searchQuery = "", this._focusedIdx = 0, this._onTableKeydown = (e) => {
-      const a = e.target.closest("tr");
-      if (!a) return;
-      const r = a.parentElement;
+      const i = e.target.closest("tr");
+      if (!i) return;
+      const r = i.parentElement;
       if (!r) return;
-      const i = Array.from(r.querySelectorAll("tr")), s = i.indexOf(a);
+      const a = Array.from(r.querySelectorAll("tr")), s = a.indexOf(i);
       let n = -1;
       switch (e.key) {
         case "ArrowDown":
-          n = Math.min(s + 1, i.length - 1);
+          n = Math.min(s + 1, a.length - 1);
           break;
         case "ArrowUp":
           n = Math.max(s - 1, 0);
@@ -753,7 +779,7 @@ let _ = class extends y {
           n = 0;
           break;
         case "End":
-          n = i.length - 1;
+          n = a.length - 1;
           break;
         default:
           return;
@@ -762,15 +788,15 @@ let _ = class extends y {
         this.shadowRoot?.querySelectorAll("tbody tr")?.[n]?.focus();
       }));
     }, this._onListKeydown = (e) => {
-      const a = e.target.closest(".list-item");
-      if (!a) return;
-      const r = a.parentElement;
+      const i = e.target.closest(".list-item");
+      if (!i) return;
+      const r = i.parentElement;
       if (!r) return;
-      const i = Array.from(r.querySelectorAll(".list-item")), s = i.indexOf(a);
+      const a = Array.from(r.querySelectorAll(".list-item")), s = a.indexOf(i);
       let n = -1;
       switch (e.key) {
         case "ArrowDown":
-          n = Math.min(s + 1, i.length - 1);
+          n = Math.min(s + 1, a.length - 1);
           break;
         case "ArrowUp":
           n = Math.max(s - 1, 0);
@@ -779,7 +805,7 @@ let _ = class extends y {
           n = 0;
           break;
         case "End":
-          n = i.length - 1;
+          n = a.length - 1;
           break;
         default:
           return;
@@ -802,28 +828,28 @@ let _ = class extends y {
     return me(typeof e == "string" ? e : void 0);
   }
   renderTable() {
-    const e = this.spec.data, t = this.getColumns(e), a = this._locale, r = this.spec.options?.sortable !== !1, i = !!this.spec.options?.searchable, s = !!this.spec.options?.compact, n = Number(this.spec.options?.pageSize) || 0, d = this._searchQuery ? this.filterData(e, t) : e, c = this._sortField && this._sortDir ? this.sortData(d) : d, p = n > 0 ? Math.max(1, Math.ceil(c.length / n)) : 1, g = Math.min(this._page, p - 1), m = n > 0 ? c.slice(g * n, (g + 1) * n) : c, u = i ? o`
+    const e = this.spec.data, t = this.getColumns(e), i = this._locale, r = this.spec.options?.sortable !== !1, a = !!this.spec.options?.searchable, s = !!this.spec.options?.compact, n = Number(this.spec.options?.pageSize) || 0, d = this._searchQuery ? this.filterData(e, t) : e, c = this._sortField && this._sortDir ? this.sortData(d) : d, p = n > 0 ? Math.max(1, Math.ceil(c.length / n)) : 1, g = Math.min(this._page, p - 1), m = n > 0 ? c.slice(g * n, (g + 1) * n) : c, u = a ? o`
       <div class="search-box" part="search">
         <input
           class="search-input"
           type="text"
-          placeholder=${a.searchPlaceholder}
-          aria-label=${a.searchTable}
+          placeholder=${i.searchPlaceholder}
+          aria-label=${i.searchTable}
           .value=${this._searchQuery}
           @input=${this._onSearch}
         />
       </div>
     ` : l, h = n > 0 && p > 1 ? o`
-      <nav class="pagination" part="pagination" aria-label=${a.tablePagination}>
-        <button aria-label=${a.previousPage} ?disabled=${g === 0} @click=${() => this._onPageChange(g - 1)}>${a.prev}</button>
+      <nav class="pagination" part="pagination" aria-label=${i.tablePagination}>
+        <button aria-label=${i.previousPage} ?disabled=${g === 0} @click=${() => this._onPageChange(g - 1)}>${i.prev}</button>
         <span aria-live="polite">${g + 1} / ${p}</span>
-        <button aria-label=${a.nextPage} ?disabled=${g >= p - 1} @click=${() => this._onPageChange(g + 1)}>${a.next}</button>
+        <button aria-label=${i.nextPage} ?disabled=${g >= p - 1} @click=${() => this._onPageChange(g + 1)}>${i.next}</button>
       </nav>
     ` : l;
     return o`<div class="table-container${s ? " compact" : ""}">
       ${u}
       <div class="table-wrapper" part="table">
-        <table aria-label=${this.spec.title ?? a.dataTable}>
+        <table aria-label=${this.spec.title ?? i.dataTable}>
           <thead>
             <tr>
               ${t.map(
@@ -872,18 +898,18 @@ let _ = class extends y {
     });
   }
   filterData(e, t) {
-    const a = this._searchQuery.toLowerCase(), r = t.map((i) => i.field);
+    const i = this._searchQuery.toLowerCase(), r = t.map((a) => a.field);
     return e.filter(
-      (i) => r.some((s) => String(i[s] ?? "").toLowerCase().includes(a))
+      (a) => r.some((s) => String(a[s] ?? "").toLowerCase().includes(i))
     );
   }
   _onSort(e) {
     this._sortField === e ? this._sortDir === "asc" ? this._sortDir = "desc" : (this._sortField = null, this._sortDir = null) : (this._sortField = e, this._sortDir = "asc");
   }
   sortData(e) {
-    const t = this._sortField, a = this._sortDir;
-    return [...e].sort((r, i) => {
-      const s = r[t], n = i[t];
+    const t = this._sortField, i = this._sortDir;
+    return [...e].sort((r, a) => {
+      const s = r[t], n = a[t];
       if (s == null && n == null) return 0;
       if (s == null) return 1;
       if (n == null) return -1;
@@ -894,13 +920,13 @@ let _ = class extends y {
         const c = Number(s), p = Number(n);
         d = String(s) !== "" && String(n) !== "" && !isNaN(c) && !isNaN(p) ? c - p : String(s).localeCompare(String(n));
       }
-      return a === "asc" ? d : -d;
+      return i === "asc" ? d : -d;
     });
   }
   renderList() {
-    const e = this.spec.data, t = this.spec.mapping, a = !!this.spec.options?.compact, r = t?.primary ?? this.inferPrimaryKey(e), i = t?.secondary, s = t?.icon, n = t?.avatar, d = t?.trailing, c = t?.badge;
+    const e = this.spec.data, t = this.spec.mapping, i = !!this.spec.options?.compact, r = t?.primary ?? this.inferPrimaryKey(e), a = t?.secondary, s = t?.icon, n = t?.avatar, d = t?.trailing, c = t?.badge;
     return o`
-      <div class="list-container${a ? " compact" : ""}" part="list" @keydown=${this._onListKeydown}>
+      <div class="list-container${i ? " compact" : ""}" part="list" @keydown=${this._onListKeydown}>
         ${e.map(
       (p, g) => o`
             <div class="list-item" part="list-item"
@@ -913,7 +939,7 @@ let _ = class extends y {
               ${n && p[n] ? o`<img class="list-avatar" src=${String(p[n])} alt="" part="avatar" />` : s ? o`<div class="list-icon" part="icon">${this.getIconLetter(p[s])}</div>` : l}
               <div class="list-content">
                 <div class="list-primary" part="primary">${p[r] ?? ""}</div>
-                ${i ? o`<div class="list-secondary" part="secondary">${p[i] ?? ""}</div>` : l}
+                ${a ? o`<div class="list-secondary" part="secondary">${p[a] ?? ""}</div>` : l}
               </div>
               ${c && p[c] != null ? o`<span class="list-badge" part="badge">${p[c]}</span>` : l}
               ${d && p[d] != null ? o`<div class="list-trailing" part="trailing">${p[d]}</div>` : l}
@@ -925,7 +951,7 @@ let _ = class extends y {
   }
   _onRowClick(e, t) {
     if (!this.spec) return;
-    const a = {
+    const i = {
       type: "select",
       widget: this.spec.widget,
       id: this.spec.id,
@@ -933,7 +959,7 @@ let _ = class extends y {
     };
     this.dispatchEvent(
       new CustomEvent("u-widget-internal", {
-        detail: a,
+        detail: i,
         bubbles: !0,
         composed: !0
       })
@@ -944,8 +970,8 @@ let _ = class extends y {
   }
   inferPrimaryKey(e) {
     if (e.length === 0) return "";
-    const t = Object.keys(e[0]), a = ["name", "title", "label", "id", "key"];
-    for (const s of a)
+    const t = Object.keys(e[0]), i = ["name", "title", "label", "id", "key"];
+    for (const s of i)
       if (t.includes(s)) return s;
     const r = e[0];
     return t.find((s) => typeof r[s] == "string") ?? t[0] ?? "";
@@ -1287,16 +1313,16 @@ C([
 _ = C([
   x("uw-table")
 ], _);
-var We = Object.defineProperty, He = Object.getOwnPropertyDescriptor, H = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? He(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && We(t, a, i), i;
+var We = Object.defineProperty, He = Object.getOwnPropertyDescriptor, H = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? He(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && We(t, i, a), a;
 };
 let D = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null, this._formData = {}, this._errors = {}, this._onFormSubmit = (e) => {
       e.preventDefault();
-      const t = (this.spec?.actions ?? []).find((a) => a.action === "submit");
+      const t = (this.spec?.actions ?? []).find((i) => i.action === "submit");
       t ? this._onAction(t) : this._validate() && this._emitEvent({
         type: "submit",
         widget: this.spec.widget,
@@ -1305,7 +1331,7 @@ let D = class extends y {
       });
     }, this._onConfirmKeydown = (e) => {
       if (e.key === "Escape") {
-        const t = (this.spec?.actions ?? []).find((a) => a.action === "cancel");
+        const t = (this.spec?.actions ?? []).find((i) => i.action === "cancel");
         t && this._onAction(t);
       }
     };
@@ -1320,7 +1346,7 @@ let D = class extends y {
     const e = this.spec.fields ?? [], t = this.spec.actions ?? [];
     return o`
       <form class="form-container" part="form" @submit=${this._onFormSubmit}>
-        ${e.map((a) => this.renderField(a))}
+        ${e.map((i) => this.renderField(i))}
         ${t.length > 0 ? this.renderActions(t) : l}
       </form>
     `;
@@ -1335,31 +1361,31 @@ let D = class extends y {
     `;
   }
   renderField(e) {
-    const t = this._formData[e.field], a = e.type ?? "text", r = this._errors[e.field], i = `err-${e.field}`;
+    const t = this._formData[e.field], i = e.type ?? "text", r = this._errors[e.field], a = `err-${e.field}`;
     return o`
       <div class="field" part="field">
         ${e.label ? o`<label class="field-label" for=${`input-${e.field}`} part="label"
               >${e.label}${e.required ? o`<span class="required">*</span>` : l}</label
             >` : l}
-        ${this.renderInput(e, a, t, r ? i : void 0)}
-        ${r ? o`<div class="field-error" id=${i} role="alert" part="field-error">${r}</div>` : l}
+        ${this.renderInput(e, i, t, r ? a : void 0)}
+        ${r ? o`<div class="field-error" id=${a} role="alert" part="field-error">${r}</div>` : l}
       </div>
     `;
   }
-  renderInput(e, t, a, r) {
-    const i = !!this._errors[e.field];
+  renderInput(e, t, i, r) {
+    const a = !!this._errors[e.field];
     switch (t) {
       case "textarea":
         return o`<textarea
           id=${`input-${e.field}`}
-          class=${i ? "invalid" : ""}
-          .value=${String(a ?? "")}
+          class=${a ? "invalid" : ""}
+          .value=${String(i ?? "")}
           placeholder=${e.placeholder ?? ""}
           rows=${e.rows ?? 3}
           ?required=${e.required}
           minlength=${e.minLength ?? ""}
           maxlength=${e.maxLength ?? ""}
-          aria-invalid=${i ? "true" : "false"}
+          aria-invalid=${a ? "true" : "false"}
           aria-describedby=${r ?? l}
           ?aria-required=${e.required}
           @input=${(s) => this._onChange(e.field, s.target.value)}
@@ -1368,10 +1394,10 @@ let D = class extends y {
       case "select":
         return o`<select
           id=${`input-${e.field}`}
-          class=${i ? "invalid" : ""}
-          .value=${String(a ?? "")}
+          class=${a ? "invalid" : ""}
+          .value=${String(i ?? "")}
           ?required=${e.required}
-          aria-invalid=${i ? "true" : "false"}
+          aria-invalid=${a ? "true" : "false"}
           aria-describedby=${r ?? l}
           @change=${(s) => this._onChange(e.field, s.target.value)}
           part="input"
@@ -1382,16 +1408,16 @@ let D = class extends y {
         )}
         </select>`;
       case "multiselect":
-        return o`<div class="multiselect-group" part="multiselect-group" role="group" aria-label=${e.label ?? e.field} aria-invalid=${i ? "true" : "false"} aria-describedby=${r ?? l}>
+        return o`<div class="multiselect-group" part="multiselect-group" role="group" aria-label=${e.label ?? e.field} aria-invalid=${a ? "true" : "false"} aria-describedby=${r ?? l}>
           ${(e.options ?? []).map(
           (s) => o`
               <label>
                 <input
                   type="checkbox"
                   value=${s}
-                  ?checked=${Array.isArray(a) && a.includes(s)}
+                  ?checked=${Array.isArray(i) && i.includes(s)}
                   @change=${(n) => {
-            const d = n.target.checked, c = Array.isArray(a) ? [...a] : [];
+            const d = n.target.checked, c = Array.isArray(i) ? [...i] : [];
             this._onChange(
               e.field,
               d ? [...c, s] : c.filter((p) => p !== s)
@@ -1407,14 +1433,14 @@ let D = class extends y {
         return o`<div class="toggle-wrapper">
           <div
             class="toggle-track"
-            data-on=${!!a}
+            data-on=${!!i}
             role="switch"
-            aria-checked=${!!a}
+            aria-checked=${!!i}
             aria-label=${e.label ?? e.field}
             tabindex="0"
-            @click=${() => this._onChange(e.field, !a)}
+            @click=${() => this._onChange(e.field, !i)}
             @keydown=${(s) => {
-          (s.key === " " || s.key === "Enter") && (s.preventDefault(), this._onChange(e.field, !a));
+          (s.key === " " || s.key === "Enter") && (s.preventDefault(), this._onChange(e.field, !i));
         }}
             part="toggle"
           >
@@ -1422,7 +1448,7 @@ let D = class extends y {
           </div>
         </div>`;
       case "radio":
-        return o`<div class="radio-group" part="radio-group" role="radiogroup" aria-label=${e.label ?? e.field} aria-invalid=${i ? "true" : "false"} aria-describedby=${r ?? l}>
+        return o`<div class="radio-group" part="radio-group" role="radiogroup" aria-label=${e.label ?? e.field} aria-invalid=${a ? "true" : "false"} aria-describedby=${r ?? l}>
           ${(e.options ?? []).map(
           (s) => o`
               <label>
@@ -1430,7 +1456,7 @@ let D = class extends y {
                   type="radio"
                   name=${e.field}
                   value=${s}
-                  ?checked=${a === s}
+                  ?checked=${i === s}
                   @change=${() => this._onChange(e.field, s)}
                 />
                 ${s}
@@ -1439,16 +1465,16 @@ let D = class extends y {
         )}
         </div>`;
       case "checkbox":
-        return o`<div class="checkbox-group" part="checkbox-group" role="group" aria-label=${e.label ?? e.field} aria-invalid=${i ? "true" : "false"} aria-describedby=${r ?? l}>
+        return o`<div class="checkbox-group" part="checkbox-group" role="group" aria-label=${e.label ?? e.field} aria-invalid=${a ? "true" : "false"} aria-describedby=${r ?? l}>
           ${(e.options ?? []).map(
           (s) => o`
               <label>
                 <input
                   type="checkbox"
                   value=${s}
-                  ?checked=${Array.isArray(a) && a.includes(s)}
+                  ?checked=${Array.isArray(i) && i.includes(s)}
                   @change=${(n) => {
-            const d = n.target.checked, c = Array.isArray(a) ? [...a] : [];
+            const d = n.target.checked, c = Array.isArray(i) ? [...i] : [];
             this._onChange(
               e.field,
               d ? [...c, s] : c.filter((p) => p !== s)
@@ -1464,11 +1490,11 @@ let D = class extends y {
         return o`<input
           type=${t === "datetime" ? "datetime-local" : t}
           id=${`input-${e.field}`}
-          class=${i ? "invalid" : ""}
-          .value=${String(a ?? "")}
+          class=${a ? "invalid" : ""}
+          .value=${String(i ?? "")}
           placeholder=${e.placeholder ?? ""}
           ?required=${e.required}
-          aria-invalid=${i ? "true" : "false"}
+          aria-invalid=${a ? "true" : "false"}
           aria-describedby=${r ?? l}
           ?aria-required=${e.required}
           min=${e.min ?? ""}
@@ -1494,8 +1520,8 @@ let D = class extends y {
               type=${t.action === "submit" ? "submit" : "button"}
               data-style=${t.style ?? "default"}
               ?disabled=${t.disabled}
-              @click=${(a) => {
-        t.action === "submit" && a.preventDefault(), this._onAction(t);
+              @click=${(i) => {
+        t.action === "submit" && i.preventDefault(), this._onAction(t);
       }}
               part="action-btn"
             >
@@ -1508,8 +1534,8 @@ let D = class extends y {
   }
   _onChange(e, t) {
     if (this._formData = { ...this._formData, [e]: t }, this._errors[e]) {
-      const a = { ...this._errors };
-      delete a[e], this._errors = a;
+      const i = { ...this._errors };
+      delete i[e], this._errors = i;
     }
     this._emitEvent({
       type: "change",
@@ -1523,29 +1549,29 @@ let D = class extends y {
     return me(typeof e == "string" ? e : void 0);
   }
   _validate() {
-    const e = this.spec?.fields ?? [], t = {}, a = this._locale;
+    const e = this.spec?.fields ?? [], t = {}, i = this._locale;
     for (const r of e) {
-      const i = this._formData[r.field], s = r.label ?? r.field;
-      if (r.required && (i == null || i === "" || Array.isArray(i) && i.length === 0)) {
-        t[r.field] = r.message ?? A(a.required, { label: s });
+      const a = this._formData[r.field], s = r.label ?? r.field;
+      if (r.required && (a == null || a === "" || Array.isArray(a) && a.length === 0)) {
+        t[r.field] = r.message ?? A(i.required, { label: s });
         continue;
       }
-      if (!(i == null || i === "")) {
-        if (r.maxLength != null && typeof i == "string" && i.length > r.maxLength && (t[r.field] = r.message ?? A(a.maxLength, { label: s, max: r.maxLength })), r.min != null && typeof i == "number" && i < Number(r.min) && (t[r.field] = r.message ?? A(a.minValue, { label: s, min: r.min })), r.max != null && typeof i == "number" && i > Number(r.max) && (t[r.field] = r.message ?? A(a.maxValue, { label: s, max: r.max })), r.minLength != null && typeof i == "string" && i.length < r.minLength) {
-          t[r.field] = r.message ?? A(a.minLength, { label: s, min: r.minLength });
+      if (!(a == null || a === "")) {
+        if (r.maxLength != null && typeof a == "string" && a.length > r.maxLength && (t[r.field] = r.message ?? A(i.maxLength, { label: s, max: r.maxLength })), r.min != null && typeof a == "number" && a < Number(r.min) && (t[r.field] = r.message ?? A(i.minValue, { label: s, min: r.min })), r.max != null && typeof a == "number" && a > Number(r.max) && (t[r.field] = r.message ?? A(i.maxValue, { label: s, max: r.max })), r.minLength != null && typeof a == "string" && a.length < r.minLength) {
+          t[r.field] = r.message ?? A(i.minLength, { label: s, min: r.minLength });
           continue;
         }
-        if (r.type === "email" && typeof i == "string" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(i)) {
-          t[r.field] = r.message ?? A(a.invalidEmail, { label: s });
+        if (r.type === "email" && typeof a == "string" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a)) {
+          t[r.field] = r.message ?? A(i.invalidEmail, { label: s });
           continue;
         }
-        if (r.type === "url" && typeof i == "string" && !/^https?:\/\/.+/.test(i)) {
-          t[r.field] = r.message ?? A(a.invalidUrl, { label: s });
+        if (r.type === "url" && typeof a == "string" && !/^https?:\/\/.+/.test(a)) {
+          t[r.field] = r.message ?? A(i.invalidUrl, { label: s });
           continue;
         }
-        if (r.pattern && typeof i == "string")
+        if (r.pattern && typeof a == "string")
           try {
-            new RegExp(r.pattern).test(i) || (t[r.field] = r.message ?? A(a.invalidPattern, { label: s }));
+            new RegExp(r.pattern).test(a) || (t[r.field] = r.message ?? A(i.invalidPattern, { label: s }));
           } catch {
           }
       }
@@ -1817,10 +1843,10 @@ H([
 D = H([
   x("uw-form")
 ], D);
-var Ke = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, ee = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ve(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && Ke(t, a, i), i;
+var Ke = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, ee = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Ve(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && Ke(t, i, a), a;
 };
 let F = class extends y {
   constructor() {
@@ -1828,27 +1854,27 @@ let F = class extends y {
   }
   render() {
     if (!this.spec) return l;
-    const e = this.spec.layout ?? "stack", t = this.spec.columns ?? 2, a = this.spec.children ?? [], r = this.spec.title, i = a.map((n) => this._child(n)), s = r ? "region" : void 0;
+    const e = this.spec.layout ?? "stack", t = this.spec.columns ?? 2, i = this.spec.children ?? [], r = this.spec.title, a = i.map((n) => this._child(n)), s = r ? "region" : void 0;
     if (e === "row")
-      return o`<div class="compose-container" part="compose" role=${s ?? l} aria-label=${r ?? l}>${r ? o`<div class="compose-title" part="title">${r}</div>` : l}<div class="layout-row" part="layout">${i}</div></div>`;
+      return o`<div class="compose-container" part="compose" role=${s ?? l} aria-label=${r ?? l}>${r ? o`<div class="compose-title" part="title">${r}</div>` : l}<div class="layout-row" part="layout">${a}</div></div>`;
     if (e === "grid") {
       const n = this._gridColumns(t);
-      return o`<div class="compose-container" part="compose" role=${s ?? l} aria-label=${r ?? l}>${r ? o`<div class="compose-title" part="title">${r}</div>` : l}<div class="layout-grid" part="layout" style="grid-template-columns: ${n}">${i}</div></div>`;
+      return o`<div class="compose-container" part="compose" role=${s ?? l} aria-label=${r ?? l}>${r ? o`<div class="compose-title" part="title">${r}</div>` : l}<div class="layout-grid" part="layout" style="grid-template-columns: ${n}">${a}</div></div>`;
     }
-    return o`<div class="compose-container" part="compose" role=${s ?? l} aria-label=${r ?? l}>${r ? o`<div class="compose-title" part="title">${r}</div>` : l}<div class="layout-stack" part="layout">${i}</div></div>`;
+    return o`<div class="compose-container" part="compose" role=${s ?? l} aria-label=${r ?? l}>${r ? o`<div class="compose-title" part="title">${r}</div>` : l}<div class="layout-stack" part="layout">${a}</div></div>`;
   }
   /** Compute grid-template-columns from options.widths or fallback to equal columns. */
   _gridColumns(e) {
-    const a = (this.spec?.options ?? {}).widths;
-    return !Array.isArray(a) || a.length === 0 ? `repeat(${e}, 1fr)` : a.map((r) => {
+    const i = (this.spec?.options ?? {}).widths;
+    return !Array.isArray(i) || i.length === 0 ? `repeat(${e}, 1fr)` : i.map((r) => {
       if (r === "auto") return "auto";
       if (r === "stretch") return "1fr";
-      const i = Number(r);
-      return Number.isFinite(i) && i > 0 ? `${i}fr` : "1fr";
+      const a = Number(r);
+      return Number.isFinite(a) && a > 0 ? `${a}fr` : "1fr";
     }).join(" ");
   }
   _child(e) {
-    const t = this.theme, a = e.span ? Math.max(1, Math.floor(Number(e.span) || 1)) : 0, r = a > 1 ? `grid-column: span ${a}` : "", s = !!(this.spec?.options ?? {}).card, n = o`<u-widget .spec=${e} theme=${t ?? l}></u-widget>`;
+    const t = this.theme, i = e.span ? Math.max(1, Math.floor(Number(e.span) || 1)) : 0, r = i > 1 ? `grid-column: span ${i}` : "", s = !!(this.spec?.options ?? {}).card, n = o`<u-widget .spec=${e} theme=${t ?? l}></u-widget>`;
     if (e.collapsed) {
       const c = e.title || "Details";
       return o`
@@ -1972,10 +1998,10 @@ ee([
 F = ee([
   x("uw-compose")
 ], F);
-var Ge = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, te = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? Xe(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && Ge(t, a, i), i;
+var Ge = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, te = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Xe(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && Ge(t, i, a), a;
 };
 let M = class extends y {
   constructor() {
@@ -2003,16 +2029,16 @@ let M = class extends y {
   renderImage() {
     const e = this.spec.data;
     if (!e) return l;
-    const t = String(e.src ?? ""), a = String(e.alt ?? ""), r = e.caption, i = this.sanitizeUrl(t);
-    return i ? o`<div class="image-container" part="image">
-      <img src=${i} alt=${a} loading="lazy" />
+    const t = String(e.src ?? ""), i = String(e.alt ?? ""), r = e.caption, a = this.sanitizeUrl(t);
+    return a ? o`<div class="image-container" part="image">
+      <img src=${a} alt=${i} loading="lazy" />
       ${r ? o`<div class="image-caption" part="caption">${r}</div>` : l}
     </div>` : l;
   }
   renderCallout() {
     const e = this.spec.data;
     if (!e) return l;
-    const t = String(e.message ?? ""), a = String(e.level ?? "info"), r = e.title, s = ["info", "warning", "error", "success"].includes(a) ? a : "info", n = s === "warning" || s === "error";
+    const t = String(e.message ?? ""), i = String(e.level ?? "info"), r = e.title, s = ["info", "warning", "error", "success"].includes(i) ? i : "info", n = s === "warning" || s === "error";
     return o`<div class="callout callout-${s}" part="callout" role=${n ? "alert" : "note"} aria-live=${n ? "assertive" : "polite"}>
       ${r ? o`<div class="callout-title" part="callout-title">${r}</div>` : l}
       <div part="callout-message">${t}</div>
@@ -2024,17 +2050,17 @@ let M = class extends y {
    */
   parseMarkdown(e) {
     let t = this.escapeHtml(e);
-    return t = t.replace(/^#### (.+)$/gm, "<h4>$1</h4>"), t = t.replace(/^### (.+)$/gm, "<h3>$1</h3>"), t = t.replace(/^## (.+)$/gm, "<h2>$1</h2>"), t = t.replace(/^# (.+)$/gm, "<h1>$1</h1>"), t = t.replace(/^---$/gm, "<hr>"), t = t.replace(/```[\s\S]*?```/g, (a) => `<pre><code>${a.slice(3, -3).replace(/^\w*\n/, "")}</code></pre>`), t = t.replace(
+    return t = t.replace(/^#### (.+)$/gm, "<h4>$1</h4>"), t = t.replace(/^### (.+)$/gm, "<h3>$1</h3>"), t = t.replace(/^## (.+)$/gm, "<h2>$1</h2>"), t = t.replace(/^# (.+)$/gm, "<h1>$1</h1>"), t = t.replace(/^---$/gm, "<hr>"), t = t.replace(/```[\s\S]*?```/g, (i) => `<pre><code>${i.slice(3, -3).replace(/^\w*\n/, "")}</code></pre>`), t = t.replace(
       /^(\|.+\|)\n(\|[\s:|-]+\|)\n((?:\|.+\|\n?)+)/gm,
-      (a, r, i, s) => {
-        const n = (u) => u.split("|").slice(1, -1).map((h) => h.trim()), d = n(r), c = n(i).map((u) => u.startsWith(":") && u.endsWith(":") ? "center" : u.endsWith(":") ? "right" : "left"), p = s.trim().split(`
+      (i, r, a, s) => {
+        const n = (u) => u.split("|").slice(1, -1).map((h) => h.trim()), d = n(r), c = n(a).map((u) => u.startsWith(":") && u.endsWith(":") ? "center" : u.endsWith(":") ? "right" : "left"), p = s.trim().split(`
 `).map(n), g = d.map((u, h) => `<th scope="col" style="text-align:${c[h] ?? "left"}">${u}</th>`).join(""), m = p.map((u) => "<tr>" + u.map((h, v) => `<td style="text-align:${c[v] ?? "left"}">${h}</td>`).join("") + "</tr>").join("");
         return `<table><thead><tr>${g}</tr></thead><tbody>${m}</tbody></table>`;
       }
     ), t = t.replace(/`([^`]+)`/g, "<code>$1</code>"), t = t.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>"), t = t.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), t = t.replace(/\*(.+?)\*/g, "<em>$1</em>"), t = t.replace(
       /\[([^\]]+)\]\(([^)]+)\)/g,
-      (a, r, i) => `<a href="${this.sanitizeUrl(i)}" target="_blank" rel="noopener">${r}</a>`
-    ), t = t.replace(/^&gt; (.+)$/gm, "<blockquote>$1</blockquote>"), t = t.replace(/^\d+\. (.+)$/gm, "<li data-ol>$1</li>"), t = t.replace(/(<li data-ol>.*<\/li>\n?)+/g, (a) => `<ol>${a.replace(/ data-ol/g, "")}</ol>`), t = t.replace(/^- (.+)$/gm, "<li>$1</li>"), t = t.replace(/(<li>.*<\/li>\n?)+/g, "<ul>$&</ul>"), t = t.replace(/\n\n+/g, "</p><p>"), !t.startsWith("<h") && !t.startsWith("<ul") && !t.startsWith("<ol") && !t.startsWith("<pre") && !t.startsWith("<blockquote") && !t.startsWith("<hr") && (t = `<p>${t}</p>`), t = t.replace(/<pre>[\s\S]*?<\/pre>/g, (a) => a.replace(/\n/g, "\0NL\0")), t = t.replace(/\n/g, "<br>"), t = t.replace(/\x00NL\x00/g, `
+      (i, r, a) => `<a href="${this.sanitizeUrl(a)}" target="_blank" rel="noopener">${r}</a>`
+    ), t = t.replace(/^&gt; (.+)$/gm, "<blockquote>$1</blockquote>"), t = t.replace(/^\d+\. (.+)$/gm, "<li data-ol>$1</li>"), t = t.replace(/(<li data-ol>.*<\/li>\n?)+/g, (i) => `<ol>${i.replace(/ data-ol/g, "")}</ol>`), t = t.replace(/^- (.+)$/gm, "<li>$1</li>"), t = t.replace(/(<li>.*<\/li>\n?)+/g, "<ul>$&</ul>"), t = t.replace(/\n\n+/g, "</p><p>"), !t.startsWith("<h") && !t.startsWith("<ul") && !t.startsWith("<ol") && !t.startsWith("<pre") && !t.startsWith("<blockquote") && !t.startsWith("<hr") && (t = `<p>${t}</p>`), t = t.replace(/<pre>[\s\S]*?<\/pre>/g, (i) => i.replace(/\n/g, "\0NL\0")), t = t.replace(/\n/g, "<br>"), t = t.replace(/\x00NL\x00/g, `
 `), t;
   }
   sanitizeUrl(e) {
@@ -2231,10 +2257,10 @@ te([
 M = te([
   x("uw-content")
 ], M);
-var Je = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, re = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ye(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && Je(t, a, i), i;
+var Je = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, re = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Ye(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && Je(t, i, a), a;
 };
 let T = class extends y {
   constructor() {
@@ -2244,11 +2270,11 @@ let T = class extends y {
     if (!this.spec) return l;
     const e = this._extractPairs();
     if (e.length === 0) return l;
-    const t = this.spec.options ?? {}, a = String(t.layout ?? "vertical"), r = Number(t.columns ?? 2), i = a === "grid" ? `grid-template-columns: repeat(${r}, 1fr)` : "";
+    const t = this.spec.options ?? {}, i = String(t.layout ?? "vertical"), r = Number(t.columns ?? 2), a = i === "grid" ? `grid-template-columns: repeat(${r}, 1fr)` : "";
     return o`
       <div
-        class=${`kv-${a === "grid" ? "grid" : a === "horizontal" ? "horizontal" : "vertical"}`}
-        style=${i}
+        class=${`kv-${i === "grid" ? "grid" : i === "horizontal" ? "horizontal" : "vertical"}`}
+        style=${a}
         part="kv"
         role="list"
         aria-label=${this.spec.title ?? "Key-value pairs"}
@@ -2370,10 +2396,10 @@ re([
 T = re([
   x("uw-kv")
 ], T);
-var Ze = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, G = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? Qe(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && Ze(t, a, i), i;
+var Ze = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, G = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Qe(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && Ze(t, i, a), a;
 };
 const et = {
   javascript: ["//", ["/*", "*/"]],
@@ -2417,11 +2443,11 @@ const et = {
   psql: "sql",
   mysql: "sql"
 }, ge = /* @__PURE__ */ new Map();
-function at(e) {
+function it(e) {
   let t = ge.get(e);
   if (!t) {
-    const a = tt[e] || "";
-    t = a ? new Set(a.split(" ")) : /* @__PURE__ */ new Set(), ge.set(e, t);
+    const i = tt[e] || "";
+    t = i ? new Set(i.split(" ")) : /* @__PURE__ */ new Set(), ge.set(e, t);
   }
   return t;
 }
@@ -2429,31 +2455,31 @@ function z(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function j(e, t) {
-  const a = z(e);
-  return a.includes(`
-`) ? a.split(`
+  const i = z(e);
+  return i.includes(`
+`) ? i.split(`
 `).map((r) => `<span class="hl-${t}">${r}</span>`).join(`
-`) : `<span class="hl-${t}">${a}</span>`;
+`) : `<span class="hl-${t}">${i}</span>`;
 }
-function ve(e, t, a) {
+function ve(e, t, i) {
   let r = t + 1;
   for (; r < e.length; ) {
     if (e[r] === "\\") {
       r += 2;
       continue;
     }
-    if (e[r] === a) return r + 1;
-    if (a !== "`" && e[r] === `
+    if (e[r] === i) return r + 1;
+    if (i !== "`" && e[r] === `
 `) return r;
     r++;
   }
   return e.length;
 }
-function it(e, t) {
+function at(e, t) {
   if (!t) return z(e);
-  const a = rt[t] || t;
-  if (a === "json") return st(e);
-  const r = at(a), i = et[a], s = i?.[0], n = i?.[1], d = a === "javascript" || a === "typescript";
+  const i = rt[t] || t;
+  if (i === "json") return st(e);
+  const r = it(i), a = et[i], s = a?.[0], n = a?.[1], d = i === "javascript" || i === "typescript";
   let c = "", p = 0;
   const g = e.length;
   for (; p < g; ) {
@@ -2487,14 +2513,14 @@ function it(e, t) {
       c += r.has(h) ? `<span class="hl-k">${z(h)}</span>` : z(h), p = u;
       continue;
     }
-    if (a === "html" && m === "<" && p + 1 < g && /[a-zA-Z/!]/.test(e[p + 1])) {
+    if (i === "html" && m === "<" && p + 1 < g && /[a-zA-Z/!]/.test(e[p + 1])) {
       const u = e.indexOf(">", p);
       if (u !== -1) {
         c += `<span class="hl-k">${z(e.slice(p, u + 1))}</span>`, p = u + 1;
         continue;
       }
     }
-    if (a === "css" && /[a-z-]/.test(m)) {
+    if (i === "css" && /[a-z-]/.test(m)) {
       let u = p + 1;
       for (; u < g && /[a-z-]/.test(e[u]); ) u++;
       const h = e.slice(p, u);
@@ -2506,28 +2532,28 @@ function it(e, t) {
   return c;
 }
 function st(e) {
-  let t = "", a = 0;
+  let t = "", i = 0;
   const r = e.length;
-  for (; a < r; ) {
-    const i = e[a];
-    if (i === '"') {
-      const n = ve(e, a, '"'), d = e.slice(a, n), c = e.slice(n).trimStart();
-      t += j(d, c[0] === ":" ? "k" : "s"), a = n;
+  for (; i < r; ) {
+    const a = e[i];
+    if (a === '"') {
+      const n = ve(e, i, '"'), d = e.slice(i, n), c = e.slice(n).trimStart();
+      t += j(d, c[0] === ":" ? "k" : "s"), i = n;
       continue;
     }
-    if (/[\d-]/.test(i) && (a === 0 || /[\s,:\[{]/.test(e[a - 1]))) {
-      let n = a + 1;
+    if (/[\d-]/.test(a) && (i === 0 || /[\s,:\[{]/.test(e[i - 1]))) {
+      let n = i + 1;
       for (; n < r && /[0-9.eE+\-]/.test(e[n]); ) n++;
-      t += j(e.slice(a, n), "n"), a = n;
+      t += j(e.slice(i, n), "n"), i = n;
       continue;
     }
     let s = !1;
     for (const n of ["true", "false", "null"])
-      if (e.startsWith(n, a)) {
-        t += `<span class="hl-k">${n}</span>`, a += n.length, s = !0;
+      if (e.startsWith(n, i)) {
+        t += `<span class="hl-k">${n}</span>`, i += n.length, s = !0;
         break;
       }
-    s || (t += z(i), a++);
+    s || (t += z(a), i++);
   }
   return t;
 }
@@ -2541,17 +2567,17 @@ let O = class extends y {
     if (!e) return l;
     const t = String(e.content ?? "");
     if (!t) return l;
-    const a = String(e.language ?? "").toLowerCase(), r = this.spec.options ?? {}, i = r.lineNumbers !== !1, s = !!(r.wrap ?? !1), n = r.maxHeight ? String(r.maxHeight) : void 0, d = new Set(
+    const i = String(e.language ?? "").toLowerCase(), r = this.spec.options ?? {}, a = r.lineNumbers !== !1, s = !!(r.wrap ?? !1), n = r.maxHeight ? String(r.maxHeight) : void 0, d = new Set(
       Array.isArray(r.highlight) ? r.highlight : []
-    ), g = it(t, a).split(`
+    ), g = at(t, i).split(`
 `).map((u, h) => {
-      const v = h + 1, $ = d.has(v) ? " line-hl" : "", k = i ? `<span class="line-no">${v}</span>` : "";
+      const v = h + 1, $ = d.has(v) ? " line-hl" : "", k = a ? `<span class="line-no">${v}</span>` : "";
       return `<span class="line${$}">${k}${u || " "}</span>`;
     }).join(""), m = n ? `max-height: ${n}` : "";
     return o`
       <div class="code-block" part="code">
         <div class="code-header" part="code-header">
-          <span class="code-lang">${a || "code"}</span>
+          <span class="code-lang">${i || "code"}</span>
           <button
             class="code-copy"
             part="code-copy"
@@ -2693,10 +2719,10 @@ G([
 O = G([
   x("uw-code")
 ], O);
-var nt = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, ae = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? ot(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && nt(t, a, i), i;
+var nt = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, ie = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? ot(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && nt(t, i, a), a;
 };
 let U = class extends y {
   constructor() {
@@ -2706,15 +2732,15 @@ let U = class extends y {
     if (!this.spec) return l;
     const e = this._extractItems();
     if (e.length === 0) return l;
-    const t = this.spec.options ?? {}, a = !!(t.compact ?? !1), r = t.numbered !== !1;
+    const t = this.spec.options ?? {}, i = !!(t.compact ?? !1), r = t.numbered !== !1;
     return o`
-      <div class="citations" part="citations" ?data-compact=${a} role="list" aria-label=${this.spec.title ?? "Citations"}>
-        ${e.map((i, s) => this._renderItem(i, s, r))}
+      <div class="citations" part="citations" ?data-compact=${i} role="list" aria-label=${this.spec.title ?? "Citations"}>
+        ${e.map((a, s) => this._renderItem(a, s, r))}
       </div>
     `;
   }
-  _renderItem(e, t, a) {
-    const r = !!e.url, i = e.url ? this._extractDomain(e.url) : void 0;
+  _renderItem(e, t, i) {
+    const r = !!e.url, a = e.url ? this._extractDomain(e.url) : void 0;
     return o`
       <div
         class="cite-item"
@@ -2723,10 +2749,10 @@ let U = class extends y {
         ?data-link=${r}
         @click=${r ? () => this._handleClick(e) : void 0}
       >
-        ${a ? o`<span class="cite-num" part="cite-num">${t + 1}</span>` : l}
+        ${i ? o`<span class="cite-num" part="cite-num">${t + 1}</span>` : l}
         <div class="cite-body">
           <div class="cite-title" part="cite-title">${e.title}</div>
-          ${i ? o`<div class="cite-url" part="cite-url">${i}</div>` : l}
+          ${a ? o`<div class="cite-url" part="cite-url">${a}</div>` : l}
           ${e.snippet ? o`<div class="cite-snippet" part="cite-snippet">${e.snippet}</div>` : l}
           ${e.source ? o`<div class="cite-source" part="cite-source">${e.source}</div>` : l}
         </div>
@@ -2755,8 +2781,8 @@ let U = class extends y {
       const t = new URL(e).hostname;
       if (t === "localhost" || /^\d+\.\d+\.\d+\.\d+$/.test(t))
         return t;
-      const r = t.replace(/^www\./, "").split("."), i = /* @__PURE__ */ new Set(["co", "com", "net", "org", "gov", "edu", "ac"]);
-      return r.length >= 3 && i.has(r[r.length - 2]) ? r.slice(-3).join(".") : r.slice(-2).join(".");
+      const r = t.replace(/^www\./, "").split("."), a = /* @__PURE__ */ new Set(["co", "com", "net", "org", "gov", "edu", "ac"]);
+      return r.length >= 3 && a.has(r[r.length - 2]) ? r.slice(-3).join(".") : r.slice(-2).join(".");
     } catch {
       return e;
     }
@@ -2882,19 +2908,19 @@ U.styles = [b, w`
       .cite-snippet { font-size: 0.75rem; }
     }
   `];
-ae([
+ie([
   f({ type: Object })
 ], U.prototype, "spec", 2);
-ae([
+ie([
   f({ type: String, reflect: !0 })
 ], U.prototype, "theme", 2);
-U = ae([
+U = ie([
   x("uw-citation")
 ], U);
-var lt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, ie = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? ct(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && lt(t, a, i), i;
+var lt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, ae = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? ct(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && lt(t, i, a), a;
 };
 const dt = /* @__PURE__ */ new Set(["info", "success", "warning", "error", "neutral"]), pt = {
   info: "●",
@@ -3018,19 +3044,19 @@ R.styles = [b, w`
       .status-item { font-size: 0.8125rem; }
     }
   `];
-ie([
+ae([
   f({ type: Object })
 ], R.prototype, "spec", 2);
-ie([
+ae([
   f({ type: String, reflect: !0 })
 ], R.prototype, "theme", 2);
-R = ie([
+R = ae([
   x("uw-status")
 ], R);
-var ut = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, se = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? gt(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && ut(t, a, i), i;
+var ut = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, se = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? gt(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && ut(t, i, a), a;
 };
 const ft = /* @__PURE__ */ new Set(["done", "active", "pending", "error"]);
 function fe(e, t) {
@@ -3054,22 +3080,22 @@ let q = class extends y {
     if (!this.spec) return l;
     const e = this._extractItems();
     if (e.length === 0) return l;
-    const t = this.spec.options ?? {}, a = String(t.layout ?? "vertical"), r = !!(t.compact ?? !1);
-    return a === "horizontal" ? this._renderHorizontal(e, r) : this._renderVertical(e, r);
+    const t = this.spec.options ?? {}, i = String(t.layout ?? "vertical"), r = !!(t.compact ?? !1);
+    return i === "horizontal" ? this._renderHorizontal(e, r) : this._renderVertical(e, r);
   }
   _renderVertical(e, t) {
     return o`
       <div class="steps-vertical" part="steps" ?data-compact=${t}
            role="list" aria-label=${this.spec?.title ?? "Steps"}>
-        ${e.map((a) => o`
-          <div class="step-v" part="step" role="listitem" data-status=${a.status}>
+        ${e.map((i) => o`
+          <div class="step-v" part="step" role="listitem" data-status=${i.status}>
             <div class="step-track">
-              <span class="step-icon" part="step-icon" aria-hidden="true">${fe(a.status, a.icon)}</span>
+              <span class="step-icon" part="step-icon" aria-hidden="true">${fe(i.status, i.icon)}</span>
               <div class="step-line"></div>
             </div>
             <div class="step-body">
-              <div class="step-label" part="step-label">${a.label}</div>
-              ${a.description ? o`<div class="step-desc" part="step-desc">${a.description}</div>` : l}
+              <div class="step-label" part="step-label">${i.label}</div>
+              ${i.description ? o`<div class="step-desc" part="step-desc">${i.description}</div>` : l}
             </div>
           </div>
         `)}
@@ -3080,16 +3106,16 @@ let q = class extends y {
     return o`
       <div class="steps-horizontal" part="steps" ?data-compact=${t}
            role="list" aria-label=${this.spec?.title ?? "Steps"}>
-        ${e.map((a, r) => {
-      const i = r > 0 && e[r - 1].status === "done", s = a.status === "done";
+        ${e.map((i, r) => {
+      const a = r > 0 && e[r - 1].status === "done", s = i.status === "done";
       return o`
-            <div class="step-h" part="step" role="listitem" data-status=${a.status}>
+            <div class="step-h" part="step" role="listitem" data-status=${i.status}>
               <div class="step-h-top">
-                <div class="step-h-line" ?data-done=${i}></div>
-                <span class="step-icon" part="step-icon" aria-hidden="true">${fe(a.status, a.icon)}</span>
+                <div class="step-h-line" ?data-done=${a}></div>
+                <span class="step-icon" part="step-icon" aria-hidden="true">${fe(i.status, i.icon)}</span>
                 <div class="step-h-line" ?data-done=${s}></div>
               </div>
-              <div class="step-label" part="step-label">${a.label}</div>
+              <div class="step-label" part="step-label">${i.label}</div>
             </div>
           `;
     })}
@@ -3353,10 +3379,10 @@ se([
 q = se([
   x("uw-steps")
 ], q);
-var ht = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, X = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? mt(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && ht(t, a, i), i;
+var ht = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, X = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? mt(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && ht(t, i, a), a;
 };
 const vt = {
   star: ["☆", "★", "★"],
@@ -3372,55 +3398,55 @@ let E = class extends y {
   }
   render() {
     if (!this.spec) return l;
-    const e = this.spec.data ?? {}, t = this.spec.options ?? {}, a = typeof e.value == "number" ? e.value : 0, r = typeof t.max == "number" ? t.max : typeof e.max == "number" ? e.max : 5, i = !!(t.interactive ?? !1), s = this._resolveIcon(t.icon), n = typeof t.label == "string" ? t.label : void 0, d = typeof e.count == "number" ? e.count : void 0, c = vt[s], p = this._hoverIdx >= 0 ? this._hoverIdx + 1 : a;
+    const e = this.spec.data ?? {}, t = this.spec.options ?? {}, i = typeof e.value == "number" ? e.value : 0, r = typeof t.max == "number" ? t.max : typeof e.max == "number" ? e.max : 5, a = !!(t.interactive ?? !1), s = this._resolveIcon(t.icon), n = typeof t.label == "string" ? t.label : void 0, d = typeof e.count == "number" ? e.count : void 0, c = vt[s], p = this._hoverIdx >= 0 ? this._hoverIdx + 1 : i;
     return o`
-      <div class="rating" part="rating" role=${i ? "radiogroup" : "img"}
-           aria-label=${this.spec.title ?? n ?? `Rating: ${a} out of ${r}`}>
+      <div class="rating" part="rating" role=${a ? "radiogroup" : "img"}
+           aria-label=${this.spec.title ?? n ?? `Rating: ${i} out of ${r}`}>
         ${n ? o`<span class="rating-label" part="rating-label">${n}</span>` : l}
         <div class="rating-icons" part="rating-icons"
-             @mouseleave=${i ? () => {
+             @mouseleave=${a ? () => {
       this._hoverIdx = -1;
     } : void 0}>
-          ${Array.from({ length: r }, (g, m) => this._renderIcon(m, p, c, s, i))}
+          ${Array.from({ length: r }, (g, m) => this._renderIcon(m, p, c, s, a))}
         </div>
-        ${!i && a > 0 ? o`<span class="rating-value" part="rating-value">${a}</span>` : l}
+        ${!a && i > 0 ? o`<span class="rating-value" part="rating-value">${i}</span>` : l}
         ${d != null ? o`<span class="rating-count" part="rating-count">(${d})</span>` : l}
       </div>
     `;
   }
-  _renderIcon(e, t, a, r, i) {
-    const s = e + 1, n = i && this._hoverIdx >= 0 && s <= this._hoverIdx + 1;
+  _renderIcon(e, t, i, r, a) {
+    const s = e + 1, n = a && this._hoverIdx >= 0 && s <= this._hoverIdx + 1;
     let d;
     n || s <= Math.floor(t) ? d = "full" : s === Math.ceil(t) && t % 1 >= 0.25 && t % 1 < 0.75 ? d = r === "thumb" ? t % 1 >= 0.5 ? "full" : "empty" : "half" : d = "empty";
-    const c = d === "half" ? a[0] : d === "full" ? a[2] : a[0];
+    const c = d === "half" ? i[0] : d === "full" ? i[2] : i[0];
     return d === "half" ? o`
         <span class="rating-icon rating-icon-half"
               data-state="half" data-icon=${r}
-              ?data-interactive=${i}
+              ?data-interactive=${a}
               ?data-preview=${n}
-              role=${i ? "radio" : "presentation"}
-              aria-label=${i ? `${s}` : l}
-              @mouseenter=${i ? () => {
+              role=${a ? "radio" : "presentation"}
+              aria-label=${a ? `${s}` : l}
+              @mouseenter=${a ? () => {
       this._hoverIdx = e;
     } : void 0}
-              @click=${i ? () => this._select(s) : void 0}>
-          <span aria-hidden="true">${a[0]}</span>
+              @click=${a ? () => this._select(s) : void 0}>
+          <span aria-hidden="true">${i[0]}</span>
           <span class="half-overlay" aria-hidden="true">
-            <span style="color: inherit">${a[2]}</span>
+            <span style="color: inherit">${i[2]}</span>
           </span>
         </span>
       ` : o`
       <span class="rating-icon"
             data-state=${d} data-icon=${r}
-            ?data-interactive=${i}
+            ?data-interactive=${a}
             ?data-preview=${n}
-            role=${i ? "radio" : "presentation"}
-            aria-label=${i ? `${s}` : l}
-            aria-checked=${i ? String(d === "full" && !n) : l}
-            @mouseenter=${i ? () => {
+            role=${a ? "radio" : "presentation"}
+            aria-label=${a ? `${s}` : l}
+            aria-checked=${a ? String(d === "full" && !n) : l}
+            @mouseenter=${a ? () => {
       this._hoverIdx = e;
     } : void 0}
-            @click=${i ? () => this._select(s) : void 0}>
+            @click=${a ? () => this._select(s) : void 0}>
         <span aria-hidden="true">${c}</span>
       </span>
     `;
@@ -3562,10 +3588,10 @@ X([
 E = X([
   x("uw-rating")
 ], E);
-var bt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, ne = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? wt(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && bt(t, a, i), i;
+var bt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, ne = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? wt(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && bt(t, i, a), a;
 };
 let B = class extends y {
   constructor() {
@@ -3575,15 +3601,15 @@ let B = class extends y {
     if (!this.spec) return l;
     const e = this.spec.data;
     if (!e) return l;
-    const t = String(e.src ?? ""), a = this._sanitizeUrl(t);
-    if (!a) return l;
-    const r = e.poster ? this._sanitizeUrl(String(e.poster)) : void 0, i = String(e.alt ?? ""), s = e.caption, n = this.spec.options ?? {}, d = n.controls !== !1, c = n.autoplay === !0, p = n.loop === !0, g = n.muted === !0 || c;
+    const t = String(e.src ?? ""), i = this._sanitizeUrl(t);
+    if (!i) return l;
+    const r = e.poster ? this._sanitizeUrl(String(e.poster)) : void 0, a = String(e.alt ?? ""), s = e.caption, n = this.spec.options ?? {}, d = n.controls !== !1, c = n.autoplay === !0, p = n.loop === !0, g = n.muted === !0 || c;
     return o`
       <div class="video-container" part="video">
         <video
-          src=${a}
+          src=${i}
           poster=${r ?? l}
-          aria-label=${i || l}
+          aria-label=${a || l}
           ?controls=${d}
           ?autoplay=${c}
           ?loop=${p}
@@ -3644,10 +3670,10 @@ ne([
 B = ne([
   x("uw-video")
 ], B);
-var yt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, oe = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? xt(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && yt(t, a, i), i;
+var yt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, oe = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? xt(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && yt(t, i, a), a;
 };
 let W = class extends y {
   constructor() {
@@ -3663,7 +3689,7 @@ let W = class extends y {
       caption: c.caption ? String(c.caption) : void 0
     })).filter((c) => c.src);
     if (t.length === 0) return l;
-    const a = this.spec.options ?? {}, r = Number(a.columns) || 0, i = String(a.aspectRatio ?? "auto"), s = r > 0 ? `repeat(${r}, 1fr)` : "repeat(auto-fill, minmax(150px, 1fr))", n = i !== "auto" ? `aspect-ratio: ${i.replace(":", "/")};` : "", d = this.spec.title;
+    const i = this.spec.options ?? {}, r = Number(i.columns) || 0, a = String(i.aspectRatio ?? "auto"), s = r > 0 ? `repeat(${r}, 1fr)` : "repeat(auto-fill, minmax(150px, 1fr))", n = a !== "auto" ? `aspect-ratio: ${a.replace(":", "/")};` : "", d = this.spec.title;
     return o`
       <div class="gallery-grid" part="gallery" role="list"
         aria-label=${d ?? "Gallery"}
@@ -3737,10 +3763,10 @@ oe([
 W = oe([
   x("uw-gallery")
 ], W);
-var $t = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, J = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? _t(t, a) : t, s = e.length - 1, n; s >= 0; s--)
-    (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
-  return r && i && $t(t, a, i), i;
+var $t = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, J = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? _t(t, i) : t, s = e.length - 1, n; s >= 0; s--)
+    (n = e[s]) && (a = (r ? n(t, i, a) : n(a)) || a);
+  return r && a && $t(t, i, a), a;
 };
 let P = class extends y {
   constructor() {
@@ -3770,12 +3796,12 @@ let P = class extends y {
     return this.renderWidget(t);
   }
   renderWidget(e) {
-    const t = e.widget, a = e.mapping ?? we(t, e.data);
-    let r = a ? { ...e, mapping: a } : e;
-    const i = Ie(this.locale);
-    i && !r.options?.locale && (r = {
+    const t = e.widget, i = e.mapping ?? we(t, e.data);
+    let r = i ? { ...e, mapping: i } : e;
+    const a = Ie(this.locale);
+    a && !r.options?.locale && (r = {
       ...r,
-      options: { ...r.options, locale: i }
+      options: { ...r.options, locale: a }
     });
     const s = this.theme, d = t === "form" || t === "confirm" || t === "actions" ? [] : r.actions ?? [];
     let c;
@@ -3862,35 +3888,35 @@ let P = class extends y {
   renderActionsWidget(e) {
     const t = e.actions ?? [];
     if (t.length === 0) return l;
-    const a = e.options ?? {}, r = String(a.layout ?? "wrap");
+    const i = e.options ?? {}, r = String(i.layout ?? "wrap");
     return o`
       <div class="actions-widget" data-layout=${r} part="actions" role="group" aria-label=${e.title ?? "Actions"}>
-        ${t.map((i) => o`
+        ${t.map((a) => o`
           <button
-            data-style=${i.style ?? "default"}
-            ?disabled=${i.disabled}
-            @click=${() => this._dispatchAction(e, i)}
+            data-style=${a.style ?? "default"}
+            ?disabled=${a.disabled}
+            @click=${() => this._dispatchAction(e, a)}
             part="action-btn"
-          >${i.label}</button>
+          >${a.label}</button>
         `)}
       </div>
     `;
   }
   /** Render inline divider widget. */
   renderDivider(e) {
-    const t = e.options ?? {}, a = t.label, r = String(t.spacing ?? "default");
+    const t = e.options ?? {}, i = t.label, r = String(t.spacing ?? "default");
     return o`
       <div class="divider divider-spacing-${r}" part="divider" role="separator">
-        ${a ?? l}
+        ${i ?? l}
       </div>
     `;
   }
   /** Render inline header widget. */
   renderHeader(e) {
-    const t = e.data, a = String(t?.text ?? e.title ?? ""), r = String(t?.level ?? "2");
-    return a ? o`
+    const t = e.data, i = String(t?.text ?? e.title ?? ""), r = String(t?.level ?? "2");
+    return i ? o`
       <div class="header-widget" data-level=${r} part="header" role="heading" aria-level=${r}>
-        ${a}
+        ${i}
       </div>
     ` : l;
   }