@iyulab/u-widgets 0.4.1 → 0.6.0

package/dist/u-widgets.js

@@ -1,10 +1,10 @@
-import { g as me } from "./formdown-BWJ6QGJs.js";
-import { p as Ot, r as Pt } from "./formdown-BWJ6QGJs.js";
-import { i as ve } from "./infer-CNOiD2dS.js";
-import { t as b, n as be } from "./tokens-x1kDxgG8.js";
-import { css as y, LitElement as w, nothing as c, html as o } from "lit";
+import { g as be } from "./formdown-BWJ6QGJs.js";
+import { p as Nt, r as Ft } from "./formdown-BWJ6QGJs.js";
+import { i as we } from "./infer-CNOiD2dS.js";
+import { t as b, n as ye } from "./tokens-x1kDxgG8.js";
+import { css as w, LitElement as y, nothing as l, html as o } from "lit";
 import { property as h, customElement as x, state as S } from "lit/decorators.js";
-const ye = /* @__PURE__ */ new Set([
+const xe = /* @__PURE__ */ new Set([
   "text",
   "email",
   "password",
@@ -21,7 +21,7 @@ const ye = /* @__PURE__ */ new Set([
   "range",
   "radio",
   "checkbox"
-]), ae = 10, we = /* @__PURE__ */ new Set([
+]), ie = 10, $e = /* @__PURE__ */ new Set([
   "stat-group",
   "table",
   "list",
@@ -38,113 +38,138 @@ const ye = /* @__PURE__ */ new Set([
   "chart.funnel",
   "chart.waterfall",
   "chart.treemap"
-]), xe = /* @__PURE__ */ new Set(["metric", "gauge", "progress", "header", "code", "rating", "video"]);
-function Q(e, t = 0) {
-  const a = [], i = [];
-  if (t > ae)
-    return { valid: !1, errors: ["compose children exceed maximum nesting depth (" + ae + ")"], warnings: i };
+]), _e = /* @__PURE__ */ new Set(["metric", "gauge", "progress", "header", "code", "rating", "video"]);
+function Y(e, t = 0) {
+  const a = [], r = [];
+  if (t > ie)
+    return { valid: !1, errors: ["compose children exceed maximum nesting depth (" + ie + ")"], warnings: r };
   if (e == null || typeof e != "object")
-    return { valid: !1, errors: ["Spec must be a non-null object"], warnings: i };
-  const r = e;
-  if (typeof r.widget != "string" || r.widget.length === 0)
-    return a.push('Required field "widget" must be a non-empty string'), { valid: !1, errors: a, warnings: i };
-  const n = r.widget;
-  if (r.type !== void 0 && r.type !== "u-widget" && a.push('"type" must be "u-widget" if specified'), r.fields !== void 0 && r.formdown !== void 0 && a.push('"fields" and "formdown" are mutually exclusive'), r.data !== void 0 && (we.has(n) && !Array.isArray(r.data) && a.push(`"${n}" expects "data" to be an array, got ${typeof r.data}`), xe.has(n) && (Array.isArray(r.data) || typeof r.data != "object") && a.push(`"${n}" expects "data" to be an object, got ${Array.isArray(r.data) ? "array" : typeof r.data}`)), n === "compose") {
-    if (!Array.isArray(r.children))
+    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 (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');
     else
-      for (let s = 0; s < r.children.length; s++) {
-        const l = r.children[s];
-        if (l == null || typeof l != "object" || typeof l.widget != "string")
-          a.push(`children[${s}] must be an object with a "widget" field`);
+      for (let n = 0; n < i.children.length; n++) {
+        const d = i.children[n];
+        if (d == null || typeof d != "object" || typeof d.widget != "string")
+          a.push(`children[${n}] must be an object with a "widget" field`);
         else {
-          const p = Q(l, t + 1);
-          p.valid || a.push(...p.errors.map((d) => `children[${s}]: ${d}`)), i.push(...p.warnings.map((d) => `children[${s}]: ${d}`));
+          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}`));
         }
       }
-    if (r.layout !== void 0) {
-      const s = ["stack", "row", "grid"];
-      s.includes(r.layout) || a.push(`"layout" must be one of: ${s.join(", ")}`);
+    if (i.layout !== void 0) {
+      const n = ["stack", "row", "grid"];
+      n.includes(i.layout) || a.push(`"layout" must be one of: ${n.join(", ")}`);
     }
   }
-  if (Array.isArray(r.fields))
-    for (let s = 0; s < r.fields.length; s++) {
-      const l = r.fields[s];
-      l == null || typeof l != "object" || typeof l.field != "string" ? a.push(`fields[${s}] must have a "field" string property`) : l.type != null && !ye.has(l.type) && i.push(`fields[${s}].type "${l.type}" is not a recognized field type`);
+  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 (typeof r.formdown == "string" && r.formdown.length > 0 && !r.fields)
+  if (typeof i.formdown == "string" && i.formdown.length > 0 && !i.fields)
     try {
-      me()(r.formdown);
+      be()(i.formdown);
     } catch {
-      i.push("formdown string could not be parsed — check syntax");
-    }
-  if (Array.isArray(r.actions))
-    for (let s = 0; s < r.actions.length; s++) {
-      const l = r.actions[s];
-      (l == null || typeof l != "object" || typeof l.label != "string" || typeof l.action != "string") && a.push(`actions[${s}] must have "label" and "action" string properties`);
-    }
-  if (r.mapping && typeof r.mapping == "object" && r.data) {
-    const s = r.mapping, l = $e(r.data);
-    if (l)
-      for (const p of ["x", "y", "label", "value", "color", "size", "axis", "primary", "secondary", "icon", "avatar", "trailing"]) {
-        const d = s[p];
-        if (typeof d == "string" && !l.has(d) && i.push(`mapping.${p} references "${d}" which is not found in data keys [${[...l].join(", ")}]`), Array.isArray(d))
-          for (const g of d)
-            typeof g == "string" && !l.has(g) && i.push(`mapping.${p} references "${g}" which is not found in data keys [${[...l].join(", ")}]`);
+      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 (i.mapping && typeof i.mapping == "object" && i.data) {
+    const n = i.mapping, d = ke(i.data);
+    if (d)
+      for (const c of ["x", "y", "label", "value", "color", "size", "axis", "primary", "secondary", "icon", "avatar", "trailing"]) {
+        const p = n[c];
+        if (typeof p == "string" && !d.has(p) && r.push(`mapping.${c} references "${p}" which is not found in data keys [${[...d].join(", ")}]`), Array.isArray(p))
+          for (const g of p)
+            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: i };
+  return { valid: a.length === 0, errors: a, warnings: r };
 }
-function $e(e) {
+function ke(e) {
   if (Array.isArray(e) && e.length > 0 && e[0] && typeof e[0] == "object")
     return new Set(Object.keys(e[0]));
   if (e && typeof e == "object" && !Array.isArray(e))
     return new Set(Object.keys(e));
 }
-function St(e) {
-  return Q(e).valid;
+function Dt(e) {
+  return Y(e).valid;
 }
-const ie = ["B", "KB", "MB", "GB", "TB"];
-function _e(e, t, a) {
+const se = ["B", "KB", "MB", "GB", "TB"], ze = /* @__PURE__ */ new Set([
+  "KRW",
+  "JPY",
+  "VND",
+  "IDR",
+  "BIF",
+  "CLP",
+  "GNF",
+  "ISK",
+  "KMF",
+  "MGA",
+  "PYG",
+  "RWF",
+  "UGX",
+  "UYI",
+  "VUV",
+  "XAF",
+  "XOF",
+  "XPF"
+]);
+function pe(e, t, a) {
   if (e == null) return "";
-  const [i, r] = t?.split(":") ?? [];
-  switch (i) {
+  const [r, i] = t?.split(":") ?? [];
+  switch (r) {
     case "number":
-      return ke(e, a);
+      return Se(e, a);
     case "currency":
-      return ze(e, r, a);
+      return Ae(e, i, a);
     case "percent":
-      return Se(e, a);
+      return Ce(e, a);
     case "date":
-      return Ae(e, a);
+      return De(e, a);
     case "datetime":
-      return Ce(e, a);
+      return je(e, a);
     case "bytes":
-      return je(e);
+      return Oe(e);
     default:
       return String(e);
   }
 }
-function ke(e, t) {
+function Se(e, t) {
   const a = Number(e);
   return isNaN(a) ? String(e) : new Intl.NumberFormat(t).format(a);
 }
-function ze(e, t, a) {
-  const i = Number(e);
-  if (isNaN(i)) return String(e);
+function Ae(e, t, a) {
+  const r = Number(e);
+  if (isNaN(r)) return String(e);
+  const i = t || "USD";
   try {
+    const s = ze.has(i.toUpperCase());
     return new Intl.NumberFormat(a, {
       style: "currency",
-      currency: t || "USD"
-    }).format(i);
+      currency: i,
+      ...s && {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      }
+    }).format(r);
   } catch {
     return new Intl.NumberFormat(a, {
       style: "currency",
       currency: "USD"
-    }).format(i);
+    }).format(r);
   }
 }
-function Se(e, t) {
+function Ce(e, t) {
   const a = Number(e);
   if (isNaN(a)) return String(e);
   if (t)
@@ -157,7 +182,7 @@ function Se(e, t) {
     }
   return a + "%";
 }
-function Ae(e, t) {
+function De(e, t) {
   if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}/.test(e)) {
     if (t)
       try {
@@ -174,7 +199,7 @@ function Ae(e, t) {
   }
   return String(e);
 }
-function Ce(e, t) {
+function je(e, t) {
   if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}/.test(e)) {
     if (t)
       try {
@@ -193,16 +218,16 @@ function Ce(e, t) {
   }
   return String(e);
 }
-function je(e) {
+function Oe(e) {
   const t = Number(e);
   if (isNaN(t)) return String(e);
   const a = t < 0 ? "-" : "";
-  let i = Math.abs(t), r = 0;
-  for (; i >= 1024 && r < ie.length - 1; )
-    i /= 1024, r++;
-  return a + (r === 0 ? i : i.toFixed(1)) + " " + ie[r];
+  let r = Math.abs(t), i = 0;
+  for (; r >= 1024 && i < se.length - 1; )
+    r /= 1024, i++;
+  return a + (i === 0 ? r : r.toFixed(1)) + " " + se[i];
 }
-const De = [
+const Pe = [
   "chart.bar",
   "chart.line",
   "chart.area",
@@ -238,40 +263,40 @@ const De = [
   "divider",
   "header"
 ];
-function Oe(e) {
+function Ee(e) {
   if (!e) return;
   const t = e.toLowerCase();
-  let a, i = 1 / 0;
-  for (const n of De) {
-    const s = Pe(t, n);
-    s < i && (i = s, a = n);
+  let a, r = 1 / 0;
+  for (const s of Pe) {
+    const n = Le(t, s);
+    n < r && (r = n, a = s);
   }
-  const r = Math.min(3, Math.floor(t.length / 2));
-  if (i <= r && i > 0)
+  const i = Math.min(3, Math.floor(t.length / 2));
+  if (r <= i && r > 0)
     return a;
 }
-function Pe(e, t) {
-  const a = e.length, i = t.length;
-  if (a === 0) return i;
-  if (i === 0) return a;
-  const r = new Array(i + 1);
-  for (let n = 0; n <= i; n++) r[n] = n;
-  for (let n = 1; n <= a; n++) {
-    let s = n - 1;
-    r[0] = n;
-    for (let l = 1; l <= i; l++) {
-      const p = e[n - 1] === t[l - 1] ? 0 : 1, d = Math.min(
-        r[l] + 1,
+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++) {
+    let n = s - 1;
+    i[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,
         // deletion
-        r[l - 1] + 1,
+        i[d - 1] + 1,
         // insertion
-        s + p
+        n + c
         // substitution
       );
-      s = r[l], r[l] = d;
+      n = i[d], i[d] = p;
     }
   }
-  return r[i];
+  return i[r];
 }
 const R = {
   // UI chrome
@@ -294,10 +319,10 @@ const R = {
   invalidUrl: "{label} must be a valid URL",
   invalidPattern: "{label} format is invalid"
 }, L = /* @__PURE__ */ new Map();
-function At(e, t) {
+function jt(e, t) {
   L.set(e.toLowerCase(), { ...R, ...t });
 }
-function de(e) {
+function ue(e) {
   if (!e) return R;
   const t = e.toLowerCase();
   if (L.has(t)) return L.get(t);
@@ -307,20 +332,34 @@ function de(e) {
 function A(e, t) {
   return e.replace(
     /\{(\w+)\}/g,
-    (a, i) => t[i] != null ? String(t[i]) : `{${i}}`
+    (a, r) => t[r] != null ? String(t[r]) : `{${r}}`
   );
 }
-function Ct() {
+function Ot() {
   return { ...R };
 }
-var Ee = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, pe = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Le(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && Ee(t, a, r), r;
+let q;
+function Pt(e) {
+  q = e;
+}
+function Et() {
+  return q;
+}
+function Ie(e) {
+  if (e) return e;
+  if (q) return q;
+  if (typeof document < "u" && document.documentElement?.lang)
+    return document.documentElement.lang;
+}
+var Ne = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, ge = (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;
 };
-function se(e) {
+function ne(e, t) {
+  const a = e.value, r = e.format;
   return {
-    value: e.value ?? 0,
+    value: r ? pe(a, r, t) : a ?? 0,
     label: e.label,
     unit: e.unit,
     prefix: e.prefix,
@@ -328,42 +367,46 @@ function se(e) {
     change: e.change,
     trend: e.trend,
     icon: e.icon,
-    description: e.description
+    description: e.description,
+    format: e.format,
+    variant: e.variant
   };
 }
-let q = class extends w {
+let B = class extends y {
   constructor() {
     super(...arguments), this.spec = null;
   }
   render() {
-    return this.spec?.data ? this.spec.widget === "stat-group" ? this.renderStatGroup() : this.renderMetric(se(this.spec.data)) : c;
+    if (!this.spec?.data) return l;
+    const e = this.spec.options?.locale;
+    return this.spec.widget === "stat-group" ? this.renderStatGroup(e) : this.renderMetric(ne(this.spec.data, e));
   }
-  renderStatGroup() {
-    const e = this.spec.data;
-    return Array.isArray(e) ? o`
+  renderStatGroup(e) {
+    const t = this.spec.data;
+    return Array.isArray(t) ? o`
       <div class="stat-group" part="stat-group">
-        ${e.map((t) => this.renderMetric(se(t)))}
+        ${t.map((a) => this.renderMetric(ne(a, e)))}
       </div>
-    ` : c;
+    ` : 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;
     return o`
-      <div class="metric" part="metric" aria-label=${a ?? c}>
-        ${e.icon ? o`<div class="metric-icon" part="icon">${e.icon}</div>` : c}
-        ${e.label ? o`<div class="metric-label" part="label">${e.label}</div>` : c}
+      <div class="metric" part="metric" aria-label=${a ?? 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">
           ${e.prefix ?? ""}${e.value}${e.unit ? o`<span class="metric-unit">${e.unit}</span>` : ""}${e.suffix ?? ""}
         </div>
         ${e.change != null ? o`<span class="metric-change" data-trend=${e.trend ?? "flat"} part="change"
               >${t} ${e.change > 0 ? "+" : ""}${e.change}%</span
-            >` : c}
-        ${e.description ? o`<div class="metric-description" part="description">${e.description}</div>` : c}
+            >` : l}
+        ${e.description ? o`<div class="metric-description" part="description">${e.description}</div>` : l}
       </div>
     `;
   }
 };
-q.styles = [b, y`
+B.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -426,6 +469,12 @@ q.styles = [b, y`
     .metric-icon { font-size: 1.25rem; line-height: 1; margin-bottom: 2px; }
     .metric-description { font-size: 0.75rem; color: var(--u-widget-text-secondary, #64748b); margin-top: 2px; line-height: 1.3; }
 
+    /* ── variant colors ── */
+    .metric[data-variant="success"] .metric-value { color: var(--u-widget-positive, #16a34a); }
+    .metric[data-variant="danger"] .metric-value { color: var(--u-widget-negative, #dc2626); }
+    .metric[data-variant="warning"] .metric-value { color: var(--u-widget-warning, #d97706); }
+    .metric[data-variant="info"] .metric-value { color: var(--u-widget-info, #2563eb); }
+
     /* ── stat-group ── */
     .stat-group {
       display: flex;
@@ -463,23 +512,23 @@ q.styles = [b, y`
       }
     }
   `];
-pe([
+ge([
   h({ type: Object })
-], q.prototype, "spec", 2);
-q = pe([
+], B.prototype, "spec", 2);
+B = ge([
   x("u-metric")
-], q);
-var Ie = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, ue = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Ne(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && Ie(t, a, r), r;
+], B);
+var Me = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, fe = (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;
 };
-const Te = {
+const Ue = {
   min: 0,
   max: 100,
   unit: "",
   thresholds: []
-}, Fe = {
+}, Re = {
   green: "#16a34a",
   yellow: "#eab308",
   orange: "#f97316",
@@ -487,30 +536,30 @@ const Te = {
   blue: "#2563eb",
   gray: "#6b7280"
 };
-function ne(e) {
-  return Fe[e] ?? e;
+function oe(e) {
+  return Re[e] ?? e;
 }
-function oe(e, t, a, i, r) {
-  const n = (i - 90) * Math.PI / 180, s = (r - 90) * Math.PI / 180, l = e + a * Math.cos(n), p = t + a * Math.sin(n), d = e + a * Math.cos(s), g = t + a * Math.sin(s), f = r - i > 180 ? 1 : 0;
-  return `M ${l} ${p} A ${a} ${a} 0 ${f} 1 ${d} ${g}`;
+function le(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), f = i - r > 180 ? 1 : 0;
+  return `M ${d} ${c} A ${a} ${a} 0 ${f} 1 ${p} ${g}`;
 }
-let B = class extends w {
+let W = class extends y {
   constructor() {
     super(...arguments), this.spec = null;
   }
   render() {
-    return this.spec?.data ? this.spec.widget === "progress" ? this.renderProgress() : this.renderGauge() : c;
+    return this.spec?.data ? this.spec.widget === "progress" ? this.renderProgress() : this.renderGauge() : l;
   }
   getOptions() {
     const e = this.spec.options ?? {};
-    return { ...Te, ...e };
+    return { ...Ue, ...e };
   }
   getValue() {
     const e = this.spec.data;
     return Number(e.value ?? 0);
   }
   renderGauge() {
-    const e = this.getOptions(), t = this.getValue(), a = e.max - e.min, i = a > 0 ? Math.max(0, Math.min(1, (t - e.min) / a)) : 0, r = this.getThresholdColor(t, e), n = 100, s = 100, l = 80, p = 150, d = 240, g = p + d * i, f = oe(n, s, l, p, p + d), u = i > 0 ? oe(n, s, l, p, g) : null, m = typeof this.spec.title == "string" ? this.spec.title : "Gauge", v = `${t}${e.unit}`;
+    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, f = le(s, n, d, c, c + p), u = r > 0 ? le(s, n, d, c, g) : null, m = typeof this.spec.title == "string" ? this.spec.title : "Gauge", v = `${t}${e.unit}`;
     return o`
       <div class="gauge-container" part="gauge"
         role="meter"
@@ -523,36 +572,36 @@ let B = class extends w {
         <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>` : c}
+            ${e.unit ? o`<div class="gauge-unit" part="unit">${e.unit}</div>` : l}
           </div>
           <svg class="gauge-svg" viewBox="0 0 200 195" role="presentation" aria-hidden="true">
             <path class="gauge-track" d="${f}" fill="none" stroke-width="12" stroke-linecap="round"></path>
-            <path class="gauge-fill" d="${u ?? "M0 0"}" fill="none" stroke="${u ? r : "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>
           </svg>
         </div>
       </div>
     `;
   }
   renderProgress() {
-    const e = this.spec.data, t = Number(e.value ?? 0), a = Number(e.max ?? this.spec.options?.max ?? 100), i = a > 0 ? Math.max(0, Math.min(100, t / a * 100)) : 0, r = this.getOptions(), n = this.getThresholdColor(t, r), s = this.formatLabel(t, i), l = typeof this.spec.title == "string" ? this.spec.title : "Progress";
+    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";
     return o`
       <div class="progress-container" part="progress"
         role="progressbar"
         aria-valuenow=${t}
         aria-valuemin=${0}
         aria-valuemax=${a}
-        aria-label=${l}
+        aria-label=${d}
       >
         <div class="progress-bar-track">
           <div
             class="progress-bar-fill"
-            style="width:${i}%; background:${n || "var(--u-widget-primary, #4f46e5)"}"
+            style="width:${r}%; background:${s || "var(--u-widget-primary, #4f46e5)"}"
             part="progress-fill"
           ></div>
         </div>
         <div class="progress-info">
-          <span>${s}</span>
-          <span>${Math.round(i)}%</span>
+          <span>${n}</span>
+          <span>${Math.round(r)}%</span>
         </div>
       </div>
     `;
@@ -563,13 +612,13 @@ let B = class extends w {
   }
   getThresholdColor(e, t) {
     if (!t.thresholds?.length) return "var(--u-widget-primary, #4f46e5)";
-    const a = [...t.thresholds].sort((i, r) => i.to - r.to);
-    for (const i of a)
-      if (e <= i.to) return ne(i.color);
-    return ne(a[a.length - 1].color);
+    const a = [...t.thresholds].sort((r, i) => r.to - i.to);
+    for (const r of a)
+      if (e <= r.to) return oe(r.color);
+    return oe(a[a.length - 1].color);
   }
 };
-B.styles = [b, y`
+W.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -665,70 +714,70 @@ B.styles = [b, y`
       }
     }
   `];
-ue([
+fe([
   h({ type: Object })
-], B.prototype, "spec", 2);
-B = ue([
+], W.prototype, "spec", 2);
+W = fe([
   x("u-gauge")
-], B);
-var Me = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, C = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Ue(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && Me(t, a, r), r;
+], W);
+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;
 };
-let z = class extends w {
+let z = class extends y {
   constructor() {
     super(...arguments), this.spec = 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 i = a.parentElement;
-      if (!i) return;
-      const r = Array.from(i.querySelectorAll("tr")), n = r.indexOf(a);
-      let s = -1;
+      const r = a.parentElement;
+      if (!r) return;
+      const i = Array.from(r.querySelectorAll("tr")), s = i.indexOf(a);
+      let n = -1;
       switch (e.key) {
         case "ArrowDown":
-          s = Math.min(n + 1, r.length - 1);
+          n = Math.min(s + 1, i.length - 1);
           break;
         case "ArrowUp":
-          s = Math.max(n - 1, 0);
+          n = Math.max(s - 1, 0);
           break;
         case "Home":
-          s = 0;
+          n = 0;
           break;
         case "End":
-          s = r.length - 1;
+          n = i.length - 1;
           break;
         default:
           return;
       }
-      e.preventDefault(), s !== n && s >= 0 && (this._focusedIdx = s, this.updateComplete.then(() => {
-        this.shadowRoot?.querySelectorAll("tbody tr")?.[s]?.focus();
+      e.preventDefault(), n !== s && n >= 0 && (this._focusedIdx = n, this.updateComplete.then(() => {
+        this.shadowRoot?.querySelectorAll("tbody tr")?.[n]?.focus();
       }));
     }, this._onListKeydown = (e) => {
       const a = e.target.closest(".list-item");
       if (!a) return;
-      const i = a.parentElement;
-      if (!i) return;
-      const r = Array.from(i.querySelectorAll(".list-item")), n = r.indexOf(a);
-      let s = -1;
+      const r = a.parentElement;
+      if (!r) return;
+      const i = Array.from(r.querySelectorAll(".list-item")), s = i.indexOf(a);
+      let n = -1;
       switch (e.key) {
         case "ArrowDown":
-          s = Math.min(n + 1, r.length - 1);
+          n = Math.min(s + 1, i.length - 1);
           break;
         case "ArrowUp":
-          s = Math.max(n - 1, 0);
+          n = Math.max(s - 1, 0);
           break;
         case "Home":
-          s = 0;
+          n = 0;
           break;
         case "End":
-          s = r.length - 1;
+          n = i.length - 1;
           break;
         default:
           return;
       }
-      e.preventDefault(), s !== n && s >= 0 && (this._focusedIdx = s, this.updateComplete.then(() => {
-        this.shadowRoot?.querySelectorAll(".list-item")?.[s]?.focus();
+      e.preventDefault(), n !== s && n >= 0 && (this._focusedIdx = n, this.updateComplete.then(() => {
+        this.shadowRoot?.querySelectorAll(".list-item")?.[n]?.focus();
       }));
     }, this._onSearch = (e) => {
       this._searchQuery = e.target.value, this._page = 0;
@@ -738,14 +787,14 @@ let z = class extends w {
     e.has("spec") && (this._sortField = null, this._sortDir = null, this._page = 0, this._searchQuery = "", this._focusedIdx = 0);
   }
   render() {
-    return !this.spec?.data || !Array.isArray(this.spec.data) ? c : this.spec.widget === "list" ? this.renderList() : this.renderTable();
+    return !this.spec?.data || !Array.isArray(this.spec.data) ? l : this.spec.widget === "list" ? this.renderList() : this.renderTable();
   }
   get _locale() {
     const e = this.spec?.options?.locale;
-    return de(typeof e == "string" ? e : void 0);
+    return ue(typeof e == "string" ? e : void 0);
   }
   renderTable() {
-    const e = this.spec.data, t = this.getColumns(e), a = this._locale, i = this.spec.options?.sortable !== !1, r = !!this.spec.options?.searchable, n = !!this.spec.options?.compact, s = Number(this.spec.options?.pageSize) || 0, l = this._searchQuery ? this.filterData(e, t) : e, p = this._sortField && this._sortDir ? this.sortData(l) : l, d = s > 0 ? Math.max(1, Math.ceil(p.length / s)) : 1, g = Math.min(this._page, d - 1), f = s > 0 ? p.slice(g * s, (g + 1) * s) : p, u = r ? o`
+    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), f = n > 0 ? c.slice(g * n, (g + 1) * n) : c, u = i ? o`
       <div class="search-box" part="search">
         <input
           class="search-input"
@@ -756,14 +805,14 @@ let z = class extends w {
           @input=${this._onSearch}
         />
       </div>
-    ` : c, m = s > 0 && d > 1 ? o`
+    ` : l, m = 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>
-        <span aria-live="polite">${g + 1} / ${d}</span>
-        <button aria-label=${a.nextPage} ?disabled=${g >= d - 1} @click=${() => this._onPageChange(g + 1)}>${a.next}</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>
       </nav>
-    ` : c;
-    return o`<div class="table-container${n ? " compact" : ""}">
+    ` : l;
+    return o`<div class="table-container${s ? " compact" : ""}">
       ${u}
       <div class="table-wrapper" part="table">
         <table aria-label=${this.spec.title ?? a.dataTable}>
@@ -773,15 +822,15 @@ let z = class extends w {
       (v) => o`<th
                   scope="col"
                   data-align=${v.align ?? "left"}
-                  ?data-sortable=${i}
-                  tabindex=${i ? "0" : c}
-                  @click=${i ? () => this._onSort(v.field) : void 0}
-                  @keydown=${i ? ($) => {
+                  ?data-sortable=${r}
+                  tabindex=${r ? "0" : l}
+                  @click=${r ? () => this._onSort(v.field) : void 0}
+                  @keydown=${r ? ($) => {
         ($.key === "Enter" || $.key === " ") && ($.preventDefault(), this._onSort(v.field));
       } : void 0}
                   aria-sort=${this._sortField === v.field && this._sortDir ? this._sortDir === "asc" ? "ascending" : "descending" : "none"}
                   part="th"
-                >${v.label ?? v.field}${this._sortField === v.field && this._sortDir ? o`<span class="sort-arrow">${this._sortDir === "asc" ? "▲" : "▼"}</span>` : c}</th>`
+                >${v.label ?? v.field}${this._sortField === v.field && this._sortDir ? o`<span class="sort-arrow">${this._sortDir === "asc" ? "▲" : "▼"}</span>` : l}</th>`
     )}
             </tr>
           </thead>
@@ -790,14 +839,14 @@ let z = class extends w {
       (v, $) => o`
                 <tr part="tr"
                   tabindex=${$ === this._focusedIdx ? "0" : "-1"}
-                  @click=${() => this._onRowClick(v, s > 0 ? g * s + $ : $)}
+                  @click=${() => this._onRowClick(v, n > 0 ? g * n + $ : $)}
                   @keydown=${(_) => {
-        (_.key === "Enter" || _.key === " ") && (_.preventDefault(), this._onRowClick(v, s > 0 ? g * s + $ : $));
+        (_.key === "Enter" || _.key === " ") && (_.preventDefault(), this._onRowClick(v, n > 0 ? g * n + $ : $));
       }}
                 >
                   ${t.map(
         (_) => o`<td data-align=${_.align ?? "left"} part="td"
-                        >${_e(v[_.field], _.format, typeof this.spec.options?.locale == "string" ? this.spec.options.locale : void 0)}</td
+                        >${pe(v[_.field], _.format, typeof this.spec.options?.locale == "string" ? this.spec.options.locale : void 0)}</td
                       >`
       )}
                 </tr>
@@ -815,9 +864,9 @@ let z = class extends w {
     });
   }
   filterData(e, t) {
-    const a = this._searchQuery.toLowerCase(), i = t.map((r) => r.field);
+    const a = this._searchQuery.toLowerCase(), r = t.map((i) => i.field);
     return e.filter(
-      (r) => i.some((n) => String(r[n] ?? "").toLowerCase().includes(a))
+      (i) => r.some((s) => String(i[s] ?? "").toLowerCase().includes(a))
     );
   }
   _onSort(e) {
@@ -825,41 +874,41 @@ let z = class extends w {
   }
   sortData(e) {
     const t = this._sortField, a = this._sortDir;
-    return [...e].sort((i, r) => {
-      const n = i[t], s = r[t];
-      if (n == null && s == null) return 0;
-      if (n == null) return 1;
-      if (s == null) return -1;
-      let l;
-      if (typeof n == "number" && typeof s == "number")
-        l = n - s;
+    return [...e].sort((r, i) => {
+      const s = r[t], n = i[t];
+      if (s == null && n == null) return 0;
+      if (s == null) return 1;
+      if (n == null) return -1;
+      let d;
+      if (typeof s == "number" && typeof n == "number")
+        d = s - n;
       else {
-        const p = Number(n), d = Number(s);
-        l = String(n) !== "" && String(s) !== "" && !isNaN(p) && !isNaN(d) ? p - d : String(n).localeCompare(String(s));
+        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" ? l : -l;
+      return a === "asc" ? d : -d;
     });
   }
   renderList() {
-    const e = this.spec.data, t = this.spec.mapping, a = !!this.spec.options?.compact, i = t?.primary ?? this.inferPrimaryKey(e), r = t?.secondary, n = t?.icon, s = t?.avatar, l = t?.trailing, p = t?.badge;
+    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;
     return o`
       <div class="list-container${a ? " compact" : ""}" part="list" @keydown=${this._onListKeydown}>
         ${e.map(
-      (d, g) => o`
+      (p, g) => o`
             <div class="list-item" part="list-item"
               tabindex=${g === this._focusedIdx ? "0" : "-1"}
-              @click=${() => this._onRowClick(d, g)}
+              @click=${() => this._onRowClick(p, g)}
               @keydown=${(f) => {
-        (f.key === "Enter" || f.key === " ") && (f.preventDefault(), this._onRowClick(d, g));
+        (f.key === "Enter" || f.key === " ") && (f.preventDefault(), this._onRowClick(p, g));
       }}
             >
-              ${s && d[s] ? o`<img class="list-avatar" src=${String(d[s])} alt="" part="avatar" />` : n ? o`<div class="list-icon" part="icon">${this.getIconLetter(d[n])}</div>` : c}
+              ${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">${d[i] ?? ""}</div>
-                ${r ? o`<div class="list-secondary" part="secondary">${d[r] ?? ""}</div>` : c}
+                <div class="list-primary" part="primary">${p[r] ?? ""}</div>
+                ${i ? o`<div class="list-secondary" part="secondary">${p[i] ?? ""}</div>` : l}
               </div>
-              ${p && d[p] != null ? o`<span class="list-badge" part="badge">${d[p]}</span>` : c}
-              ${l && d[l] != null ? o`<div class="list-trailing" part="trailing">${d[l]}</div>` : c}
+              ${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}
             </div>
           `
     )}
@@ -888,16 +937,16 @@ let z = class extends w {
   inferPrimaryKey(e) {
     if (e.length === 0) return "";
     const t = Object.keys(e[0]), a = ["name", "title", "label", "id", "key"];
-    for (const n of a)
-      if (t.includes(n)) return n;
-    const i = e[0];
-    return t.find((n) => typeof i[n] == "string") ?? t[0] ?? "";
+    for (const s of a)
+      if (t.includes(s)) return s;
+    const r = e[0];
+    return t.find((s) => typeof r[s] == "string") ?? t[0] ?? "";
   }
   getIconLetter(e) {
     return String(e ?? "").charAt(0).toUpperCase();
   }
 };
-z.styles = [b, y`
+z.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -1227,12 +1276,12 @@ C([
 z = C([
   x("u-table")
 ], z);
-var Re = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, K = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? qe(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && Re(t, a, r), r;
+var We = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, V = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? Ke(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;
 };
-let D = class extends w {
+let j = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this._formData = {}, this._errors = {}, this._onFormSubmit = (e) => {
       e.preventDefault();
@@ -1254,14 +1303,14 @@ let D = class extends w {
     e.has("spec") && this.spec && (this._formData = { ...this.spec.data ?? {} }, this._errors = {});
   }
   render() {
-    return this.spec ? this.spec.widget === "confirm" ? this.renderConfirm() : this.renderForm() : c;
+    return this.spec ? this.spec.widget === "confirm" ? this.renderConfirm() : this.renderForm() : l;
   }
   renderForm() {
     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))}
-        ${t.length > 0 ? this.renderActions(t) : c}
+        ${t.length > 0 ? this.renderActions(t) : l}
       </form>
     `;
   }
@@ -1269,76 +1318,76 @@ let D = class extends w {
     const e = this.spec.description, t = this.spec.actions ?? [];
     return o`
       <div class="confirm-container" part="confirm" @keydown=${this._onConfirmKeydown}>
-        ${e ? o`<div class="confirm-description" part="description">${e}</div>` : c}
-        ${t.length > 0 ? this.renderActions(t) : c}
+        ${e ? o`<div class="confirm-description" part="description">${e}</div>` : l}
+        ${t.length > 0 ? this.renderActions(t) : l}
       </div>
     `;
   }
   renderField(e) {
-    const t = this._formData[e.field], a = e.type ?? "text", i = this._errors[e.field], r = `err-${e.field}`;
+    const t = this._formData[e.field], a = e.type ?? "text", r = this._errors[e.field], i = `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>` : c}</label
-            >` : c}
-        ${this.renderInput(e, a, t, i ? r : void 0)}
-        ${i ? o`<div class="field-error" id=${r} role="alert" part="field-error">${i}</div>` : c}
+              >${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}
       </div>
     `;
   }
-  renderInput(e, t, a, i) {
-    const r = !!this._errors[e.field];
+  renderInput(e, t, a, r) {
+    const i = !!this._errors[e.field];
     switch (t) {
       case "textarea":
         return o`<textarea
           id=${`input-${e.field}`}
-          class=${r ? "invalid" : ""}
+          class=${i ? "invalid" : ""}
           .value=${String(a ?? "")}
           placeholder=${e.placeholder ?? ""}
           rows=${e.rows ?? 3}
           ?required=${e.required}
           minlength=${e.minLength ?? ""}
           maxlength=${e.maxLength ?? ""}
-          aria-invalid=${r ? "true" : "false"}
-          aria-describedby=${i ?? c}
+          aria-invalid=${i ? "true" : "false"}
+          aria-describedby=${r ?? l}
           ?aria-required=${e.required}
-          @input=${(n) => this._onChange(e.field, n.target.value)}
+          @input=${(s) => this._onChange(e.field, s.target.value)}
           part="input"
         ></textarea>`;
       case "select":
         return o`<select
           id=${`input-${e.field}`}
-          class=${r ? "invalid" : ""}
+          class=${i ? "invalid" : ""}
           .value=${String(a ?? "")}
           ?required=${e.required}
-          aria-invalid=${r ? "true" : "false"}
-          aria-describedby=${i ?? c}
-          @change=${(n) => this._onChange(e.field, n.target.value)}
+          aria-invalid=${i ? "true" : "false"}
+          aria-describedby=${r ?? l}
+          @change=${(s) => this._onChange(e.field, s.target.value)}
           part="input"
         >
           <option value="">--</option>
           ${(e.options ?? []).map(
-          (n) => o`<option value=${n}>${n}</option>`
+          (s) => o`<option value=${s}>${s}</option>`
         )}
         </select>`;
       case "multiselect":
-        return o`<div class="multiselect-group" part="multiselect-group" role="group" aria-label=${e.label ?? e.field} aria-invalid=${r ? "true" : "false"} aria-describedby=${i ?? c}>
+        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}>
           ${(e.options ?? []).map(
-          (n) => o`
+          (s) => o`
               <label>
                 <input
                   type="checkbox"
-                  value=${n}
-                  ?checked=${Array.isArray(a) && a.includes(n)}
-                  @change=${(s) => {
-            const l = s.target.checked, p = Array.isArray(a) ? [...a] : [];
+                  value=${s}
+                  ?checked=${Array.isArray(a) && a.includes(s)}
+                  @change=${(n) => {
+            const d = n.target.checked, c = Array.isArray(a) ? [...a] : [];
             this._onChange(
               e.field,
-              l ? [...p, n] : p.filter((d) => d !== n)
+              d ? [...c, s] : c.filter((p) => p !== s)
             );
           }}
                 />
-                ${n}
+                ${s}
               </label>
             `
         )}
@@ -1353,8 +1402,8 @@ let D = class extends w {
             aria-label=${e.label ?? e.field}
             tabindex="0"
             @click=${() => this._onChange(e.field, !a)}
-            @keydown=${(n) => {
-          (n.key === " " || n.key === "Enter") && (n.preventDefault(), this._onChange(e.field, !a));
+            @keydown=${(s) => {
+          (s.key === " " || s.key === "Enter") && (s.preventDefault(), this._onChange(e.field, !a));
         }}
             part="toggle"
           >
@@ -1362,40 +1411,40 @@ let D = class extends w {
           </div>
         </div>`;
       case "radio":
-        return o`<div class="radio-group" part="radio-group" role="radiogroup" aria-label=${e.label ?? e.field} aria-invalid=${r ? "true" : "false"} aria-describedby=${i ?? c}>
+        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}>
           ${(e.options ?? []).map(
-          (n) => o`
+          (s) => o`
               <label>
                 <input
                   type="radio"
                   name=${e.field}
-                  value=${n}
-                  ?checked=${a === n}
-                  @change=${() => this._onChange(e.field, n)}
+                  value=${s}
+                  ?checked=${a === s}
+                  @change=${() => this._onChange(e.field, s)}
                 />
-                ${n}
+                ${s}
               </label>
             `
         )}
         </div>`;
       case "checkbox":
-        return o`<div class="checkbox-group" part="checkbox-group" role="group" aria-label=${e.label ?? e.field} aria-invalid=${r ? "true" : "false"} aria-describedby=${i ?? c}>
+        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}>
           ${(e.options ?? []).map(
-          (n) => o`
+          (s) => o`
               <label>
                 <input
                   type="checkbox"
-                  value=${n}
-                  ?checked=${Array.isArray(a) && a.includes(n)}
-                  @change=${(s) => {
-            const l = s.target.checked, p = Array.isArray(a) ? [...a] : [];
+                  value=${s}
+                  ?checked=${Array.isArray(a) && a.includes(s)}
+                  @change=${(n) => {
+            const d = n.target.checked, c = Array.isArray(a) ? [...a] : [];
             this._onChange(
               e.field,
-              l ? [...p, n] : p.filter((d) => d !== n)
+              d ? [...c, s] : c.filter((p) => p !== s)
             );
           }}
                 />
-                ${n}
+                ${s}
               </label>
             `
         )}
@@ -1404,12 +1453,12 @@ let D = class extends w {
         return o`<input
           type=${t === "datetime" ? "datetime-local" : t}
           id=${`input-${e.field}`}
-          class=${r ? "invalid" : ""}
+          class=${i ? "invalid" : ""}
           .value=${String(a ?? "")}
           placeholder=${e.placeholder ?? ""}
           ?required=${e.required}
-          aria-invalid=${r ? "true" : "false"}
-          aria-describedby=${i ?? c}
+          aria-invalid=${i ? "true" : "false"}
+          aria-describedby=${r ?? l}
           ?aria-required=${e.required}
           min=${e.min ?? ""}
           max=${e.max ?? ""}
@@ -1417,9 +1466,9 @@ let D = class extends w {
           minlength=${e.minLength ?? ""}
           maxlength=${e.maxLength ?? ""}
           pattern=${e.pattern ?? ""}
-          @input=${(s) => {
-          const l = s.target.value, p = (t === "number" || t === "range") && l !== "" ? Number(l) : l;
-          this._onChange(e.field, p);
+          @input=${(n) => {
+          const d = n.target.value, c = (t === "number" || t === "range") && d !== "" ? Number(d) : d;
+          this._onChange(e.field, c);
         }}
           part="input"
         />`;
@@ -1460,32 +1509,32 @@ let D = class extends w {
   }
   get _locale() {
     const e = this.spec?.options?.locale;
-    return de(typeof e == "string" ? e : void 0);
+    return ue(typeof e == "string" ? e : void 0);
   }
   _validate() {
     const e = this.spec?.fields ?? [], t = {}, a = this._locale;
-    for (const i of e) {
-      const r = this._formData[i.field], n = i.label ?? i.field;
-      if (i.required && (r == null || r === "" || Array.isArray(r) && r.length === 0)) {
-        t[i.field] = i.message ?? A(a.required, { label: n });
+    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 });
         continue;
       }
-      if (!(r == null || r === "")) {
-        if (i.maxLength != null && typeof r == "string" && r.length > i.maxLength && (t[i.field] = i.message ?? A(a.maxLength, { label: n, max: i.maxLength })), i.min != null && typeof r == "number" && r < Number(i.min) && (t[i.field] = i.message ?? A(a.minValue, { label: n, min: i.min })), i.max != null && typeof r == "number" && r > Number(i.max) && (t[i.field] = i.message ?? A(a.maxValue, { label: n, max: i.max })), i.minLength != null && typeof r == "string" && r.length < i.minLength) {
-          t[i.field] = i.message ?? A(a.minLength, { label: n, min: i.minLength });
+      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 });
           continue;
         }
-        if (i.type === "email" && typeof r == "string" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r)) {
-          t[i.field] = i.message ?? A(a.invalidEmail, { label: n });
+        if (r.type === "email" && typeof i == "string" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(i)) {
+          t[r.field] = r.message ?? A(a.invalidEmail, { label: s });
           continue;
         }
-        if (i.type === "url" && typeof r == "string" && !/^https?:\/\/.+/.test(r)) {
-          t[i.field] = i.message ?? A(a.invalidUrl, { label: n });
+        if (r.type === "url" && typeof i == "string" && !/^https?:\/\/.+/.test(i)) {
+          t[r.field] = r.message ?? A(a.invalidUrl, { label: s });
           continue;
         }
-        if (i.pattern && typeof r == "string")
+        if (r.pattern && typeof i == "string")
           try {
-            new RegExp(i.pattern).test(r) || (t[i.field] = i.message ?? A(a.invalidPattern, { label: n }));
+            new RegExp(r.pattern).test(i) || (t[r.field] = r.message ?? A(a.invalidPattern, { label: s }));
           } catch {
           }
       }
@@ -1524,7 +1573,7 @@ let D = class extends w {
     );
   }
 };
-D.styles = [b, y`
+j.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -1742,64 +1791,64 @@ D.styles = [b, y`
       }
     }
   `];
-K([
+V([
   h({ type: Object })
-], D.prototype, "spec", 2);
-K([
+], j.prototype, "spec", 2);
+V([
   S()
-], D.prototype, "_formData", 2);
-K([
+], j.prototype, "_formData", 2);
+V([
   S()
-], D.prototype, "_errors", 2);
-D = K([
+], j.prototype, "_errors", 2);
+j = V([
   x("u-form")
-], D);
-var Be = Object.defineProperty, We = Object.getOwnPropertyDescriptor, Z = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? We(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && Be(t, a, r), r;
+], j);
+var He = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, Z = (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 && He(t, a, i), i;
 };
-let I = class extends w {
+let I = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
-    if (!this.spec) return c;
-    const e = this.spec.layout ?? "stack", t = this.spec.columns ?? 2, a = this.spec.children ?? [], i = this.spec.title, r = a.map((s) => this._child(s)), n = i ? "region" : void 0;
+    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;
     if (e === "row")
-      return o`<div class="compose-container" part="compose" role=${n ?? c} aria-label=${i ?? c}>${i ? o`<div class="compose-title" part="title">${i}</div>` : c}<div class="layout-row" part="layout">${r}</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">${i}</div></div>`;
     if (e === "grid") {
-      const s = this._gridColumns(t);
-      return o`<div class="compose-container" part="compose" role=${n ?? c} aria-label=${i ?? c}>${i ? o`<div class="compose-title" part="title">${i}</div>` : c}<div class="layout-grid" part="layout" style="grid-template-columns: ${s}">${r}</div></div>`;
+      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=${n ?? c} aria-label=${i ?? c}>${i ? o`<div class="compose-title" part="title">${i}</div>` : c}<div class="layout-stack" part="layout">${r}</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>`;
   }
   /** 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((i) => {
-      if (i === "auto") return "auto";
-      if (i === "stretch") return "1fr";
-      const r = Number(i);
-      return Number.isFinite(r) && r > 0 ? `${r}fr` : "1fr";
+    return !Array.isArray(a) || a.length === 0 ? `repeat(${e}, 1fr)` : a.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";
     }).join(" ");
   }
   _child(e) {
-    const t = this.theme, a = e.span ? Math.max(1, Math.floor(Number(e.span) || 1)) : 0, i = a > 1 ? `grid-column: span ${a}` : "", n = !!(this.spec?.options ?? {}).card, s = o`<u-widget .spec=${e} theme=${t ?? c}></u-widget>`;
+    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>`;
     if (e.collapsed) {
-      const p = e.title || "Details";
+      const c = e.title || "Details";
       return o`
-        <details class="child-collapsed" part="child" style=${i || c}>
-          <summary part="collapsed-summary">${p}</summary>
-          <div class="collapsed-content">${s}</div>
+        <details class="child-collapsed" part="child" style=${r || l}>
+          <summary part="collapsed-summary">${c}</summary>
+          <div class="collapsed-content">${n}</div>
         </details>
       `;
     }
-    const l = n ? "child child-card" : "child";
-    return i ? o`<div class=${l} style=${i} part="child">${s}</div>` : o`<div class=${l} part="child">${s}</div>`;
+    const d = s ? "child child-card" : "child";
+    return r ? o`<div class=${d} style=${r} part="child">${n}</div>` : o`<div class=${d} part="child">${n}</div>`;
   }
 };
-I.styles = [b, y`
+I.styles = [b, w`
     :host {
       display: block;
       container: u-compose / inline-size;
@@ -1905,17 +1954,17 @@ Z([
 I = Z([
   x("u-compose")
 ], I);
-var He = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, ge = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Ke(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && He(t, a, r), r;
+var Ge = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, he = (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;
 };
-let W = class extends w {
+let K = class extends y {
   constructor() {
     super(...arguments), this.spec = null;
   }
   render() {
-    if (!this.spec) return c;
+    if (!this.spec) return l;
     switch (this.spec.widget) {
       case "markdown":
         return this.renderMarkdown();
@@ -1924,30 +1973,30 @@ let W = class extends w {
       case "callout":
         return this.renderCallout();
       default:
-        return c;
+        return l;
     }
   }
   renderMarkdown() {
     const e = this.spec.data, t = typeof e == "string" ? e : e?.content ?? "";
     return t ? o`<div class="markdown" part="markdown"
       .innerHTML=${this.parseMarkdown(t)}
-    ></div>` : c;
+    ></div>` : l;
   }
   renderImage() {
     const e = this.spec.data;
-    if (!e) return c;
-    const t = String(e.src ?? ""), a = String(e.alt ?? ""), i = e.caption, r = this.sanitizeUrl(t);
-    return r ? o`<div class="image-container" part="image">
-      <img src=${r} alt=${a} loading="lazy" />
-      ${i ? o`<div class="image-caption" part="caption">${i}</div>` : c}
-    </div>` : c;
+    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" />
+      ${r ? o`<div class="image-caption" part="caption">${r}</div>` : l}
+    </div>` : l;
   }
   renderCallout() {
     const e = this.spec.data;
-    if (!e) return c;
-    const t = String(e.message ?? ""), a = String(e.level ?? "info"), i = e.title, n = ["info", "warning", "error", "success"].includes(a) ? a : "info", s = n === "warning" || n === "error";
-    return o`<div class="callout callout-${n}" part="callout" role=${s ? "alert" : "note"} aria-live=${s ? "assertive" : "polite"}>
-      ${i ? o`<div class="callout-title" part="callout-title">${i}</div>` : c}
+    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";
+    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>
     </div>`;
   }
@@ -1959,14 +2008,14 @@ let W = class extends w {
     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(
       /^(\|.+\|)\n(\|[\s:|-]+\|)\n((?:\|.+\|\n?)+)/gm,
-      (a, i, r, n) => {
-        const s = (u) => u.split("|").slice(1, -1).map((m) => m.trim()), l = s(i), p = s(r).map((u) => u.startsWith(":") && u.endsWith(":") ? "center" : u.endsWith(":") ? "right" : "left"), d = n.trim().split(`
-`).map(s), g = l.map((u, m) => `<th scope="col" style="text-align:${p[m] ?? "left"}">${u}</th>`).join(""), f = d.map((u) => "<tr>" + u.map((m, v) => `<td style="text-align:${p[v] ?? "left"}">${m}</td>`).join("") + "</tr>").join("");
+      (a, r, i, s) => {
+        const n = (u) => u.split("|").slice(1, -1).map((m) => m.trim()), d = n(r), c = n(i).map((u) => u.startsWith(":") && u.endsWith(":") ? "center" : u.endsWith(":") ? "right" : "left"), p = s.trim().split(`
+`).map(n), g = d.map((u, m) => `<th scope="col" style="text-align:${c[m] ?? "left"}">${u}</th>`).join(""), f = p.map((u) => "<tr>" + u.map((m, v) => `<td style="text-align:${c[v] ?? "left"}">${m}</td>`).join("") + "</tr>").join("");
         return `<table><thead><tr>${g}</tr></thead><tbody>${f}</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, i, r) => `<a href="${this.sanitizeUrl(r)}" target="_blank" rel="noopener">${i}</a>`
+      (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, `
 `), t;
   }
@@ -1978,7 +2027,7 @@ let W = class extends w {
     return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 };
-W.styles = [b, y`
+K.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2155,38 +2204,38 @@ W.styles = [b, y`
       }
     }
   `];
-ge([
+he([
   h({ type: Object })
-], W.prototype, "spec", 2);
-W = ge([
+], K.prototype, "spec", 2);
+K = he([
   x("u-content")
-], W);
-var Ve = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, fe = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Ge(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && Ve(t, a, r), r;
+], K);
+var Je = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, me = (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;
 };
-let H = class extends w {
+let H = class extends y {
   constructor() {
     super(...arguments), this.spec = null;
   }
   render() {
-    if (!this.spec) return c;
+    if (!this.spec) return l;
     const e = this._extractPairs();
-    if (e.length === 0) return c;
-    const t = this.spec.options ?? {}, a = String(t.layout ?? "vertical"), i = Number(t.columns ?? 2), r = a === "grid" ? `grid-template-columns: repeat(${i}, 1fr)` : "";
+    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)` : "";
     return o`
       <div
         class=${`kv-${a === "grid" ? "grid" : a === "horizontal" ? "horizontal" : "vertical"}`}
-        style=${r}
+        style=${i}
         part="kv"
         role="list"
         aria-label=${this.spec.title ?? "Key-value pairs"}
       >
-        ${e.map(([n, s]) => o`
+        ${e.map(([s, n]) => o`
           <div class="kv-pair" part="kv-pair" role="listitem">
-            <span class="kv-key" part="kv-key">${n}</span>
-            <span class="kv-value" part="kv-value">${String(s)}</span>
+            <span class="kv-key" part="kv-key">${s}</span>
+            <span class="kv-value" part="kv-value">${String(n)}</span>
           </div>
         `)}
       </div>
@@ -2197,7 +2246,7 @@ let H = class extends w {
     return e ? Array.isArray(e) ? e.filter((t) => t != null && typeof t == "object" && "key" in t && "value" in t).map((t) => [String(t.key), t.value]) : typeof e == "object" ? Object.entries(e) : [] : [];
   }
 };
-H.styles = [b, y`
+H.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2291,18 +2340,18 @@ H.styles = [b, y`
       }
     }
   `];
-fe([
+me([
   h({ type: Object })
 ], H.prototype, "spec", 2);
-H = fe([
+H = me([
   x("u-kv")
 ], H);
-var Je = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, V = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? Qe(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && Je(t, a, r), r;
+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;
 };
-const Ze = {
+const et = {
   javascript: ["//", ["/*", "*/"]],
   typescript: ["//", ["/*", "*/"]],
   python: ["#"],
@@ -2314,7 +2363,7 @@ const Ze = {
   bash: ["#"],
   css: [void 0, ["/*", "*/"]],
   html: [void 0, ["<!--", "-->"]]
-}, Xe = {
+}, tt = {
   javascript: "async await break case catch class const continue default delete do else export extends false finally for from function if import in instanceof let new null of return static super switch this throw true try typeof undefined var void while with yield",
   typescript: "abstract any as async await boolean break case catch class const continue declare default delete do else enum export extends false finally for from function if implements import in instanceof interface is keyof let namespace never new null number of override private protected public readonly return static string super switch this throw true try type typeof undefined var void while with yield",
   python: "False None True and as assert async await break class continue def del elif else except finally for from global if import in is lambda nonlocal not or pass raise return try while with yield",
@@ -2324,7 +2373,7 @@ const Ze = {
   rust: "as async await break const continue crate dyn else enum extern false fn for if impl in let loop match mod move mut pub ref return self static struct super trait true type unsafe use where while",
   sql: "ALL ALTER AND AS ASC BETWEEN BY CASE CREATE DELETE DESC DISTINCT DROP ELSE END EXISTS FALSE FROM GROUP HAVING IF IN INDEX INSERT INTO IS JOIN LEFT LIKE LIMIT NOT NULL ON OR ORDER PRIMARY SELECT SET TABLE THEN TRUE UNION UPDATE VALUES WHERE",
   bash: "break case do done elif else esac fi for function if in local read return select then until while"
-}, Ye = {
+}, rt = {
   js: "javascript",
   ts: "typescript",
   py: "python",
@@ -2343,138 +2392,138 @@ const Ze = {
   jsonc: "json",
   psql: "sql",
   mysql: "sql"
-}, le = /* @__PURE__ */ new Map();
-function et(e) {
-  let t = le.get(e);
+}, ce = /* @__PURE__ */ new Map();
+function at(e) {
+  let t = ce.get(e);
   if (!t) {
-    const a = Xe[e] || "";
-    t = a ? new Set(a.split(" ")) : /* @__PURE__ */ new Set(), le.set(e, t);
+    const a = tt[e] || "";
+    t = a ? new Set(a.split(" ")) : /* @__PURE__ */ new Set(), ce.set(e, t);
   }
   return t;
 }
 function k(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function j(e, t) {
+function D(e, t) {
   const a = k(e);
   return a.includes(`
 `) ? a.split(`
-`).map((i) => `<span class="hl-${t}">${i}</span>`).join(`
+`).map((r) => `<span class="hl-${t}">${r}</span>`).join(`
 `) : `<span class="hl-${t}">${a}</span>`;
 }
-function he(e, t, a) {
-  let i = t + 1;
-  for (; i < e.length; ) {
-    if (e[i] === "\\") {
-      i += 2;
+function ve(e, t, a) {
+  let r = t + 1;
+  for (; r < e.length; ) {
+    if (e[r] === "\\") {
+      r += 2;
       continue;
     }
-    if (e[i] === a) return i + 1;
-    if (a !== "`" && e[i] === `
-`) return i;
-    i++;
+    if (e[r] === a) return r + 1;
+    if (a !== "`" && e[r] === `
+`) return r;
+    r++;
   }
   return e.length;
 }
-function tt(e, t) {
+function it(e, t) {
   if (!t) return k(e);
-  const a = Ye[t] || t;
-  if (a === "json") return rt(e);
-  const i = et(a), r = Ze[a], n = r?.[0], s = r?.[1], l = a === "javascript" || a === "typescript";
-  let p = "", d = 0;
+  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";
+  let c = "", p = 0;
   const g = e.length;
-  for (; d < g; ) {
-    if (s && e.startsWith(s[0], d)) {
-      const u = e.indexOf(s[1], d + s[0].length), m = u === -1 ? e.slice(d) : e.slice(d, u + s[1].length);
-      p += j(m, "c"), d += m.length;
+  for (; p < g; ) {
+    if (n && e.startsWith(n[0], p)) {
+      const u = e.indexOf(n[1], p + n[0].length), m = u === -1 ? e.slice(p) : e.slice(p, u + n[1].length);
+      c += D(m, "c"), p += m.length;
       continue;
     }
-    if (n && e.startsWith(n, d)) {
+    if (s && e.startsWith(s, p)) {
       const u = e.indexOf(`
-`, d), m = u === -1 ? e.slice(d) : e.slice(d, u);
-      p += j(m, "c"), d += m.length;
+`, p), m = u === -1 ? e.slice(p) : e.slice(p, u);
+      c += D(m, "c"), p += m.length;
       continue;
     }
-    const f = e[d];
-    if (f === '"' || f === "'" || f === "`" && l) {
-      const u = he(e, d, f);
-      p += j(e.slice(d, u), "s"), d = u;
+    const f = e[p];
+    if (f === '"' || f === "'" || f === "`" && d) {
+      const u = ve(e, p, f);
+      c += D(e.slice(p, u), "s"), p = u;
       continue;
     }
-    if (/\d/.test(f) && (d === 0 || !/[a-zA-Z_$]/.test(e[d - 1]))) {
-      let u = d + 1;
+    if (/\d/.test(f) && (p === 0 || !/[a-zA-Z_$]/.test(e[p - 1]))) {
+      let u = p + 1;
       for (; u < g && /[0-9a-fA-FxXoObBeE._]/.test(e[u]); ) u++;
-      p += j(e.slice(d, u), "n"), d = u;
+      c += D(e.slice(p, u), "n"), p = u;
       continue;
     }
     if (/[a-zA-Z_$]/.test(f)) {
-      let u = d + 1;
+      let u = p + 1;
       for (; u < g && /[a-zA-Z0-9_$]/.test(e[u]); ) u++;
-      const m = e.slice(d, u);
-      p += i.has(m) ? `<span class="hl-k">${k(m)}</span>` : k(m), d = u;
+      const m = e.slice(p, u);
+      c += r.has(m) ? `<span class="hl-k">${k(m)}</span>` : k(m), p = u;
       continue;
     }
-    if (a === "html" && f === "<" && d + 1 < g && /[a-zA-Z/!]/.test(e[d + 1])) {
-      const u = e.indexOf(">", d);
+    if (a === "html" && f === "<" && p + 1 < g && /[a-zA-Z/!]/.test(e[p + 1])) {
+      const u = e.indexOf(">", p);
       if (u !== -1) {
-        p += `<span class="hl-k">${k(e.slice(d, u + 1))}</span>`, d = u + 1;
+        c += `<span class="hl-k">${k(e.slice(p, u + 1))}</span>`, p = u + 1;
         continue;
       }
     }
     if (a === "css" && /[a-z-]/.test(f)) {
-      let u = d + 1;
+      let u = p + 1;
       for (; u < g && /[a-z-]/.test(e[u]); ) u++;
-      const m = e.slice(d, u);
-      e.slice(u).trimStart()[0] === ":" ? p += `<span class="hl-k">${k(m)}</span>` : p += k(m), d = u;
+      const m = e.slice(p, u);
+      e.slice(u).trimStart()[0] === ":" ? c += `<span class="hl-k">${k(m)}</span>` : c += k(m), p = u;
       continue;
     }
-    p += k(f), d++;
+    c += k(f), p++;
   }
-  return p;
+  return c;
 }
-function rt(e) {
+function st(e) {
   let t = "", a = 0;
-  const i = e.length;
-  for (; a < i; ) {
-    const r = e[a];
-    if (r === '"') {
-      const s = he(e, a, '"'), l = e.slice(a, s), p = e.slice(s).trimStart();
-      t += j(l, p[0] === ":" ? "k" : "s"), a = s;
+  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 += D(d, c[0] === ":" ? "k" : "s"), a = n;
       continue;
     }
-    if (/[\d-]/.test(r) && (a === 0 || /[\s,:\[{]/.test(e[a - 1]))) {
-      let s = a + 1;
-      for (; s < i && /[0-9.eE+\-]/.test(e[s]); ) s++;
-      t += j(e.slice(a, s), "n"), a = s;
+    if (/[\d-]/.test(i) && (a === 0 || /[\s,:\[{]/.test(e[a - 1]))) {
+      let n = a + 1;
+      for (; n < r && /[0-9.eE+\-]/.test(e[n]); ) n++;
+      t += D(e.slice(a, n), "n"), a = n;
       continue;
     }
-    let n = !1;
-    for (const s of ["true", "false", "null"])
-      if (e.startsWith(s, a)) {
-        t += `<span class="hl-k">${s}</span>`, a += s.length, n = !0;
+    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;
         break;
       }
-    n || (t += k(r), a++);
+    s || (t += k(i), a++);
   }
   return t;
 }
-let O = class extends w {
+let O = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null, this._copied = !1;
   }
   render() {
-    if (!this.spec) return c;
+    if (!this.spec) return l;
     const e = this.spec.data;
-    if (!e) return c;
+    if (!e) return l;
     const t = String(e.content ?? "");
-    if (!t) return c;
-    const a = String(e.language ?? "").toLowerCase(), i = this.spec.options ?? {}, r = i.lineNumbers !== !1, n = !!(i.wrap ?? !1), s = i.maxHeight ? String(i.maxHeight) : void 0, l = new Set(
-      Array.isArray(i.highlight) ? i.highlight : []
-    ), g = tt(t, a).split(`
+    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(
+      Array.isArray(r.highlight) ? r.highlight : []
+    ), g = it(t, a).split(`
 `).map((u, m) => {
-      const v = m + 1, $ = l.has(v) ? " line-hl" : "", _ = r ? `<span class="line-no">${v}</span>` : "";
+      const v = m + 1, $ = d.has(v) ? " line-hl" : "", _ = i ? `<span class="line-no">${v}</span>` : "";
       return `<span class="line${$}">${_}${u || " "}</span>`;
-    }).join(""), f = s ? `max-height: ${s}` : "";
+    }).join(""), f = n ? `max-height: ${n}` : "";
     return o`
       <div class="code-block" part="code">
         <div class="code-header" part="code-header">
@@ -2487,7 +2536,7 @@ let O = class extends w {
           >${this._copied ? "Copied!" : "Copy"}</button>
         </div>
         <div class="code-body" part="code-body" style=${f}>
-          <pre data-wrap=${String(n)}><code .innerHTML=${g}></code></pre>
+          <pre data-wrap=${String(s)}><code .innerHTML=${g}></code></pre>
         </div>
       </div>
     `;
@@ -2505,7 +2554,7 @@ let O = class extends w {
     }
   }
 };
-O.styles = [b, y`
+O.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2608,54 +2657,54 @@ O.styles = [b, y`
       .line-no { width: 2.5ch; margin-right: 1ch; }
     }
   `];
-V([
+G([
   h({ type: Object })
 ], O.prototype, "spec", 2);
-V([
+G([
   h({ type: String, reflect: !0 })
 ], O.prototype, "theme", 2);
-V([
+G([
   S()
 ], O.prototype, "_copied", 2);
-O = V([
+O = G([
   x("u-code")
 ], O);
-var at = Object.defineProperty, it = Object.getOwnPropertyDescriptor, X = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? it(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && at(t, a, r), r;
+var nt = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, Q = (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;
 };
-let N = class extends w {
+let N = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
-    if (!this.spec) return c;
+    if (!this.spec) return l;
     const e = this._extractItems();
-    if (e.length === 0) return c;
-    const t = this.spec.options ?? {}, a = !!(t.compact ?? !1), i = t.numbered !== !1;
+    if (e.length === 0) return l;
+    const t = this.spec.options ?? {}, a = !!(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((r, n) => this._renderItem(r, n, i))}
+        ${e.map((i, s) => this._renderItem(i, s, r))}
       </div>
     `;
   }
   _renderItem(e, t, a) {
-    const i = !!e.url, r = e.url ? this._extractDomain(e.url) : void 0;
+    const r = !!e.url, i = e.url ? this._extractDomain(e.url) : void 0;
     return o`
       <div
         class="cite-item"
         part="cite-item"
         role="listitem"
-        ?data-link=${i}
-        @click=${i ? () => this._handleClick(e) : void 0}
+        ?data-link=${r}
+        @click=${r ? () => this._handleClick(e) : void 0}
       >
-        ${a ? o`<span class="cite-num" part="cite-num">${t + 1}</span>` : c}
+        ${a ? 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>
-          ${r ? o`<div class="cite-url" part="cite-url">${r}</div>` : c}
-          ${e.snippet ? o`<div class="cite-snippet" part="cite-snippet">${e.snippet}</div>` : c}
-          ${e.source ? o`<div class="cite-source" part="cite-source">${e.source}</div>` : c}
+          ${i ? o`<div class="cite-url" part="cite-url">${i}</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>
       </div>
     `;
@@ -2679,7 +2728,11 @@ let N = class extends w {
   }
   _extractDomain(e) {
     try {
-      return new URL(e).hostname;
+      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(".");
     } catch {
       return e;
     }
@@ -2708,7 +2761,7 @@ let N = class extends w {
     return [];
   }
 };
-N.styles = [b, y`
+N.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2805,21 +2858,21 @@ N.styles = [b, y`
       .cite-snippet { font-size: 0.75rem; }
     }
   `];
-X([
+Q([
   h({ type: Object })
 ], N.prototype, "spec", 2);
-X([
+Q([
   h({ type: String, reflect: !0 })
 ], N.prototype, "theme", 2);
-N = X([
+N = Q([
   x("u-citation")
 ], N);
-var st = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, Y = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? nt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && st(t, a, r), r;
+var lt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, ee = (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;
 };
-const ot = /* @__PURE__ */ new Set(["info", "success", "warning", "error", "neutral"]), lt = {
+const dt = /* @__PURE__ */ new Set(["info", "success", "warning", "error", "neutral"]), pt = {
   info: "●",
   // ●
   success: "✓",
@@ -2831,18 +2884,18 @@ const ot = /* @__PURE__ */ new Set(["info", "success", "warning", "error", "neut
   neutral: "○"
   // ○
 };
-let T = class extends w {
+let F = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
-    if (!this.spec) return c;
+    if (!this.spec) return l;
     const e = this._extractItems();
-    return e.length === 0 ? c : o`
+    return e.length === 0 ? l : o`
       <div class="status-list" part="status" role="list" aria-label=${this.spec.title ?? "Status"}>
         ${e.map((t) => o`
           <div class="status-item" part="status-item" role="listitem" data-level=${t.level}>
-            <span class="status-icon" part="status-icon" aria-hidden="true">${lt[t.level]}</span>
+            <span class="status-icon" part="status-icon" aria-hidden="true">${pt[t.level]}</span>
             <span class="status-label" part="status-label">${t.label}</span>
             <span class="status-value" part="status-value">${t.value}</span>
           </div>
@@ -2873,10 +2926,10 @@ let T = class extends w {
   }
   _resolveLevel(e) {
     const t = String(e ?? "info");
-    return ot.has(t) ? t : "info";
+    return dt.has(t) ? t : "info";
   }
 };
-T.styles = [b, y`
+F.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2941,22 +2994,22 @@ T.styles = [b, y`
       .status-item { font-size: 0.8125rem; }
     }
   `];
-Y([
+ee([
   h({ type: Object })
-], T.prototype, "spec", 2);
-Y([
+], F.prototype, "spec", 2);
+ee([
   h({ type: String, reflect: !0 })
-], T.prototype, "theme", 2);
-T = Y([
+], F.prototype, "theme", 2);
+F = ee([
   x("u-status")
-], T);
-var ct = Object.defineProperty, dt = Object.getOwnPropertyDescriptor, ee = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? dt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && ct(t, a, r), r;
+], F);
+var ut = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, te = (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;
 };
-const pt = /* @__PURE__ */ new Set(["done", "active", "pending", "error"]);
-function ce(e, t) {
+const ft = /* @__PURE__ */ new Set(["done", "active", "pending", "error"]);
+function de(e, t) {
   if (t) return o`<span class="step-icon-text">${t}</span>`;
   switch (e) {
     case "done":
@@ -2969,16 +3022,16 @@ function ce(e, t) {
       return o`<svg class="step-svg" viewBox="0 0 16 16" fill="currentColor"><path d="M4.47 4.47a.75.75 0 0 1 1.06 0L8 6.94l2.47-2.47a.75.75 0 1 1 1.06 1.06L9.06 8l2.47 2.47a.75.75 0 1 1-1.06 1.06L8 9.06l-2.47 2.47a.75.75 0 0 1-1.06-1.06L6.94 8 4.47 5.53a.75.75 0 0 1 0-1.06Z"/></svg>`;
   }
 }
-let F = class extends w {
+let M = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
-    if (!this.spec) return c;
+    if (!this.spec) return l;
     const e = this._extractItems();
-    if (e.length === 0) return c;
-    const t = this.spec.options ?? {}, a = String(t.layout ?? "vertical"), i = !!(t.compact ?? !1);
-    return a === "horizontal" ? this._renderHorizontal(e, i) : this._renderVertical(e, i);
+    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);
   }
   _renderVertical(e, t) {
     return o`
@@ -2987,12 +3040,12 @@ let F = class extends w {
         ${e.map((a) => o`
           <div class="step-v" part="step" role="listitem" data-status=${a.status}>
             <div class="step-track">
-              <span class="step-icon" part="step-icon" aria-hidden="true">${ce(a.status, a.icon)}</span>
+              <span class="step-icon" part="step-icon" aria-hidden="true">${de(a.status, a.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>` : c}
+              ${a.description ? o`<div class="step-desc" part="step-desc">${a.description}</div>` : l}
             </div>
           </div>
         `)}
@@ -3003,14 +3056,14 @@ let F = class extends w {
     return o`
       <div class="steps-horizontal" part="steps" ?data-compact=${t}
            role="list" aria-label=${this.spec?.title ?? "Steps"}>
-        ${e.map((a, i) => {
-      const r = i > 0 && e[i - 1].status === "done", n = a.status === "done";
+        ${e.map((a, r) => {
+      const i = r > 0 && e[r - 1].status === "done", s = a.status === "done";
       return o`
             <div class="step-h" part="step" role="listitem" data-status=${a.status}>
               <div class="step-h-top">
-                <div class="step-h-line" ?data-done=${r}></div>
-                <span class="step-icon" part="step-icon" aria-hidden="true">${ce(a.status, a.icon)}</span>
-                <div class="step-h-line" ?data-done=${n}></div>
+                <div class="step-h-line" ?data-done=${i}></div>
+                <span class="step-icon" part="step-icon" aria-hidden="true">${de(a.status, a.icon)}</span>
+                <div class="step-h-line" ?data-done=${s}></div>
               </div>
               <div class="step-label" part="step-label">${a.label}</div>
             </div>
@@ -3032,10 +3085,10 @@ let F = class extends w {
   }
   _resolveStatus(e) {
     const t = String(e ?? "pending");
-    return pt.has(t) ? t : "pending";
+    return ft.has(t) ? t : "pending";
   }
 };
-F.styles = [b, y`
+M.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -3267,21 +3320,21 @@ F.styles = [b, y`
       }
     }
   `];
-ee([
+te([
   h({ type: Object })
-], F.prototype, "spec", 2);
-ee([
+], M.prototype, "spec", 2);
+te([
   h({ type: String, reflect: !0 })
-], F.prototype, "theme", 2);
-F = ee([
+], M.prototype, "theme", 2);
+M = te([
   x("u-steps")
-], F);
-var ut = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, G = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? gt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && ut(t, a, r), r;
+], M);
+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;
 };
-const ft = {
+const vt = {
   star: ["☆", "★", "★"],
   // ☆, ★, ★
   heart: ["♡", "♥", "♥"],
@@ -3289,44 +3342,44 @@ const ft = {
   thumb: ["👍", "👍", "👍"]
   // 👍
 };
-let P = class extends w {
+let P = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null, this._hoverIdx = -1;
   }
   render() {
-    if (!this.spec) return c;
-    const e = this.spec.data ?? {}, t = this.spec.options ?? {}, a = typeof e.value == "number" ? e.value : 0, i = typeof t.max == "number" ? t.max : typeof e.max == "number" ? e.max : 5, r = !!(t.interactive ?? !1), n = this._resolveIcon(t.icon), s = typeof t.label == "string" ? t.label : void 0, l = typeof e.count == "number" ? e.count : void 0, p = ft[n], d = this._hoverIdx >= 0 ? this._hoverIdx + 1 : a;
+    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;
     return o`
-      <div class="rating" part="rating" role=${r ? "radiogroup" : "img"}
-           aria-label=${this.spec.title ?? s ?? `Rating: ${a} out of ${i}`}>
-        ${s ? o`<span class="rating-label" part="rating-label">${s}</span>` : c}
+      <div class="rating" part="rating" role=${i ? "radiogroup" : "img"}
+           aria-label=${this.spec.title ?? n ?? `Rating: ${a} out of ${r}`}>
+        ${n ? o`<span class="rating-label" part="rating-label">${n}</span>` : l}
         <div class="rating-icons" part="rating-icons"
-             @mouseleave=${r ? () => {
+             @mouseleave=${i ? () => {
       this._hoverIdx = -1;
     } : void 0}>
-          ${Array.from({ length: i }, (g, f) => this._renderIcon(f, d, p, n, r))}
+          ${Array.from({ length: r }, (g, f) => this._renderIcon(f, p, c, s, i))}
         </div>
-        ${!r && a > 0 ? o`<span class="rating-value" part="rating-value">${a}</span>` : c}
-        ${l != null ? o`<span class="rating-count" part="rating-count">(${l})</span>` : c}
+        ${!i && a > 0 ? o`<span class="rating-value" part="rating-value">${a}</span>` : l}
+        ${d != null ? o`<span class="rating-count" part="rating-count">(${d})</span>` : l}
       </div>
     `;
   }
-  _renderIcon(e, t, a, i, r) {
-    const n = e + 1, s = r && this._hoverIdx >= 0 && n <= this._hoverIdx + 1;
-    let l;
-    s || n <= Math.floor(t) ? l = "full" : n === Math.ceil(t) && t % 1 >= 0.25 && t % 1 < 0.75 ? l = i === "thumb" ? t % 1 >= 0.5 ? "full" : "empty" : "half" : l = "empty";
-    const p = l === "half" ? a[0] : l === "full" ? a[2] : a[0];
-    return l === "half" ? o`
+  _renderIcon(e, t, a, r, i) {
+    const s = e + 1, n = i && 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];
+    return d === "half" ? o`
         <span class="rating-icon rating-icon-half"
-              data-state="half" data-icon=${i}
-              ?data-interactive=${r}
-              ?data-preview=${s}
-              role=${r ? "radio" : "presentation"}
-              aria-label=${r ? `${n}` : c}
-              @mouseenter=${r ? () => {
+              data-state="half" data-icon=${r}
+              ?data-interactive=${i}
+              ?data-preview=${n}
+              role=${i ? "radio" : "presentation"}
+              aria-label=${i ? `${s}` : l}
+              @mouseenter=${i ? () => {
       this._hoverIdx = e;
     } : void 0}
-              @click=${r ? () => this._select(n) : void 0}>
+              @click=${i ? () => this._select(s) : void 0}>
           <span aria-hidden="true">${a[0]}</span>
           <span class="half-overlay" aria-hidden="true">
             <span style="color: inherit">${a[2]}</span>
@@ -3334,17 +3387,17 @@ let P = class extends w {
         </span>
       ` : o`
       <span class="rating-icon"
-            data-state=${l} data-icon=${i}
-            ?data-interactive=${r}
-            ?data-preview=${s}
-            role=${r ? "radio" : "presentation"}
-            aria-label=${r ? `${n}` : c}
-            aria-checked=${r ? String(l === "full" && !s) : c}
-            @mouseenter=${r ? () => {
+            data-state=${d} data-icon=${r}
+            ?data-interactive=${i}
+            ?data-preview=${n}
+            role=${i ? "radio" : "presentation"}
+            aria-label=${i ? `${s}` : l}
+            aria-checked=${i ? String(d === "full" && !n) : l}
+            @mouseenter=${i ? () => {
       this._hoverIdx = e;
     } : void 0}
-            @click=${r ? () => this._select(n) : void 0}>
-        <span aria-hidden="true">${p}</span>
+            @click=${i ? () => this._select(s) : void 0}>
+        <span aria-hidden="true">${c}</span>
       </span>
     `;
   }
@@ -3367,7 +3420,7 @@ let P = class extends w {
     return t === "heart" || t === "thumb" ? t : "star";
   }
 };
-P.styles = [b, y`
+P.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -3473,49 +3526,49 @@ P.styles = [b, y`
       .rating-value { font-size: 0.8125rem; }
     }
   `];
-G([
+X([
   h({ type: Object })
 ], P.prototype, "spec", 2);
-G([
+X([
   h({ type: String, reflect: !0 })
 ], P.prototype, "theme", 2);
-G([
+X([
   S()
 ], P.prototype, "_hoverIdx", 2);
-P = G([
+P = X([
   x("u-rating")
 ], P);
-var ht = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, te = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? mt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && ht(t, a, r), r;
+var bt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, re = (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;
 };
-let M = class extends w {
+let T = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
-    if (!this.spec) return c;
+    if (!this.spec) return l;
     const e = this.spec.data;
-    if (!e) return c;
+    if (!e) return l;
     const t = String(e.src ?? ""), a = this._sanitizeUrl(t);
-    if (!a) return c;
-    const i = e.poster ? this._sanitizeUrl(String(e.poster)) : void 0, r = String(e.alt ?? ""), n = e.caption, s = this.spec.options ?? {}, l = s.controls !== !1, p = s.autoplay === !0, d = s.loop === !0, g = s.muted === !0 || p;
+    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;
     return o`
       <div class="video-container" part="video">
         <video
           src=${a}
-          poster=${i ?? c}
-          aria-label=${r || c}
-          ?controls=${l}
-          ?autoplay=${p}
-          ?loop=${d}
+          poster=${r ?? l}
+          aria-label=${i || l}
+          ?controls=${d}
+          ?autoplay=${c}
+          ?loop=${p}
           ?muted=${g}
           playsinline
           preload="metadata"
           part="video-element"
         ></video>
-        ${n ? o`<div class="video-caption" part="caption">${n}</div>` : c}
+        ${s ? o`<div class="video-caption" part="caption">${s}</div>` : l}
       </div>
     `;
   }
@@ -3524,7 +3577,7 @@ let M = class extends w {
     return /^(javascript|data|vbscript):/i.test(t) ? "" : e;
   }
 };
-M.styles = [b, y`
+T.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -3558,53 +3611,53 @@ M.styles = [b, y`
       }
     }
   `];
-te([
+re([
   h({ type: Object })
-], M.prototype, "spec", 2);
-te([
+], T.prototype, "spec", 2);
+re([
   h({ type: String, reflect: !0 })
-], M.prototype, "theme", 2);
-M = te([
+], T.prototype, "theme", 2);
+T = re([
   x("u-video")
-], M);
-var vt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, re = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? bt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && vt(t, a, r), r;
+], T);
+var yt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, ae = (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;
 };
-let U = class extends w {
+let U = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
-    if (!this.spec) return c;
+    if (!this.spec) return l;
     const e = this.spec.data;
-    if (!Array.isArray(e)) return c;
-    const t = e.filter((p) => p && typeof p.src == "string" && p.src).map((p) => ({
-      src: this._sanitizeUrl(String(p.src)),
-      alt: p.alt ? String(p.alt) : void 0,
-      caption: p.caption ? String(p.caption) : void 0
-    })).filter((p) => p.src);
-    if (t.length === 0) return c;
-    const a = this.spec.options ?? {}, i = Number(a.columns) || 0, r = String(a.aspectRatio ?? "auto"), n = i > 0 ? `repeat(${i}, 1fr)` : "repeat(auto-fill, minmax(150px, 1fr))", s = r !== "auto" ? `aspect-ratio: ${r.replace(":", "/")};` : "", l = this.spec.title;
+    if (!Array.isArray(e)) return l;
+    const t = e.filter((c) => c && typeof c.src == "string" && c.src).map((c) => ({
+      src: this._sanitizeUrl(String(c.src)),
+      alt: c.alt ? String(c.alt) : void 0,
+      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;
     return o`
       <div class="gallery-grid" part="gallery" role="list"
-        aria-label=${l ?? "Gallery"}
-        style="grid-template-columns: ${n}">
-        ${t.map((p) => this._renderItem(p, s))}
+        aria-label=${d ?? "Gallery"}
+        style="grid-template-columns: ${s}">
+        ${t.map((c) => this._renderItem(c, n))}
       </div>
     `;
   }
   _renderItem(e, t) {
     return o`
-      <figure class="gallery-item" part="gallery-item" role="listitem" style=${t || c}>
+      <figure class="gallery-item" part="gallery-item" role="listitem" style=${t || l}>
         <img
           src=${e.src}
           alt=${e.alt ?? ""}
           loading="lazy"
           part="gallery-image"
         />
-        ${e.caption ? o`<figcaption class="gallery-caption" part="gallery-caption">${e.caption}</figcaption>` : c}
+        ${e.caption ? o`<figcaption class="gallery-caption" part="gallery-caption">${e.caption}</figcaption>` : l}
       </figure>
     `;
   }
@@ -3613,7 +3666,7 @@ let U = class extends w {
     return /^(javascript|data|vbscript):/i.test(t) ? "" : e;
   }
 };
-U.styles = [b, y`
+U.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -3651,21 +3704,21 @@ U.styles = [b, y`
       }
     }
   `];
-re([
+ae([
   h({ type: Object })
 ], U.prototype, "spec", 2);
-re([
+ae([
   h({ type: String, reflect: !0 })
 ], U.prototype, "theme", 2);
-U = re([
+U = ae([
   x("u-gallery")
 ], U);
-var yt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, J = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? wt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
-  return i && r && yt(t, a, r), r;
+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;
 };
-let E = class extends w {
+let E = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null, this.locale = null, this._handleInternalEvent = (e) => {
       e.stopPropagation(), this.dispatchEvent(
@@ -3686,134 +3739,135 @@ let E = class extends w {
   render() {
     if (!this.spec)
       return o`<slot></slot>`;
-    const e = Q(this.spec);
+    const e = Y(this.spec);
     if (!e.valid)
       return this.renderError(e.errors);
-    const t = be(this.spec);
+    const t = ye(this.spec);
     return this.renderWidget(t);
   }
   renderWidget(e) {
-    const t = e.widget, a = e.mapping ?? ve(t, e.data);
-    let i = a ? { ...e, mapping: a } : e;
-    this.locale && !i.options?.locale && (i = {
-      ...i,
-      options: { ...i.options, locale: this.locale }
+    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 = {
+      ...r,
+      options: { ...r.options, locale: i }
     });
-    const r = this.theme, s = t === "form" || t === "confirm" || t === "actions" ? [] : i.actions ?? [];
-    let l;
+    const s = this.theme, d = t === "form" || t === "confirm" || t === "actions" ? [] : r.actions ?? [];
+    let c;
     switch (t) {
       case "metric":
       case "stat-group":
-        l = o`<u-metric .spec=${i} theme=${r ?? c}></u-metric>`;
+        c = o`<u-metric .spec=${r} theme=${s ?? l}></u-metric>`;
         break;
       case "gauge":
       case "progress":
-        l = o`<u-gauge .spec=${i} theme=${r ?? c}></u-gauge>`;
+        c = o`<u-gauge .spec=${r} theme=${s ?? l}></u-gauge>`;
         break;
       case "table":
       case "list":
-        l = o`<u-table .spec=${i} theme=${r ?? c}></u-table>`;
+        c = o`<u-table .spec=${r} theme=${s ?? l}></u-table>`;
         break;
       case "form":
       case "confirm":
-        l = o`<u-form .spec=${i} theme=${r ?? c}></u-form>`;
+        c = o`<u-form .spec=${r} theme=${s ?? l}></u-form>`;
         break;
       case "compose":
-        l = o`<u-compose .spec=${i} theme=${r ?? c}></u-compose>`;
+        c = o`<u-compose .spec=${r} theme=${s ?? l}></u-compose>`;
         break;
       case "markdown":
       case "image":
       case "callout":
-        l = o`<u-content .spec=${i} theme=${r ?? c}></u-content>`;
+        c = o`<u-content .spec=${r} theme=${s ?? l}></u-content>`;
         break;
       case "kv":
-        l = o`<u-kv .spec=${i} theme=${r ?? c}></u-kv>`;
+        c = o`<u-kv .spec=${r} theme=${s ?? l}></u-kv>`;
         break;
       case "code":
-        l = o`<u-code .spec=${i} theme=${r ?? c}></u-code>`;
+        c = o`<u-code .spec=${r} theme=${s ?? l}></u-code>`;
         break;
       case "citation":
-        l = o`<u-citation .spec=${i} theme=${r ?? c}></u-citation>`;
+        c = o`<u-citation .spec=${r} theme=${s ?? l}></u-citation>`;
         break;
       case "status":
-        l = o`<u-status .spec=${i} theme=${r ?? c}></u-status>`;
+        c = o`<u-status .spec=${r} theme=${s ?? l}></u-status>`;
         break;
       case "steps":
-        l = o`<u-steps .spec=${i} theme=${r ?? c}></u-steps>`;
+        c = o`<u-steps .spec=${r} theme=${s ?? l}></u-steps>`;
         break;
       case "rating":
-        l = o`<u-rating .spec=${i} theme=${r ?? c}></u-rating>`;
+        c = o`<u-rating .spec=${r} theme=${s ?? l}></u-rating>`;
         break;
       case "video":
-        l = o`<u-video .spec=${i} theme=${r ?? c}></u-video>`;
+        c = o`<u-video .spec=${r} theme=${s ?? l}></u-video>`;
         break;
       case "gallery":
-        l = o`<u-gallery .spec=${i} theme=${r ?? c}></u-gallery>`;
+        c = o`<u-gallery .spec=${r} theme=${s ?? l}></u-gallery>`;
         break;
       case "actions":
-        l = this.renderActionsWidget(i);
+        c = this.renderActionsWidget(r);
         break;
       case "divider":
-        l = this.renderDivider(i);
+        c = this.renderDivider(r);
         break;
       case "header":
-        l = this.renderHeader(i);
+        c = this.renderHeader(r);
         break;
       default:
         if (t.startsWith("chart.") && customElements.get("u-chart")) {
-          l = o`<u-chart .spec=${i} theme=${r ?? c}></u-chart>`;
+          c = o`<u-chart .spec=${r} theme=${s ?? l}></u-chart>`;
           break;
         }
-        return this.renderFallback(i);
+        return this.renderFallback(r);
     }
-    if (!!i.options?.card && (l = o`<div class="card-container" part="card">${l}</div>`), s.length > 0) {
-      const d = s.map((g) => o`
+    if (!!r.options?.card && (c = o`<div class="card-container" part="card">${c}</div>`), d.length > 0) {
+      const g = d.map((f) => o`
         <button
-          data-style=${g.style ?? "default"}
-          ?disabled=${g.disabled}
-          @click=${() => this._dispatchAction(i, g)}
+          data-style=${f.style ?? "default"}
+          ?disabled=${f.disabled}
+          @click=${() => this._dispatchAction(r, f)}
           part="action-btn"
-        >${g.label}</button>
+        >${f.label}</button>
       `);
-      return o`<div part="widget-container">${l}<div class="global-actions" part="actions">${d}</div></div>`;
+      return o`<div part="widget-container">${c}<div class="global-actions" part="actions">${g}</div></div>`;
     }
-    return l;
+    return c;
   }
   /** Render standalone "actions" widget — a group of action buttons. */
   renderActionsWidget(e) {
     const t = e.actions ?? [];
-    if (t.length === 0) return c;
-    const a = e.options ?? {}, i = String(a.layout ?? "wrap");
+    if (t.length === 0) return l;
+    const a = e.options ?? {}, r = String(a.layout ?? "wrap");
     return o`
-      <div class="actions-widget" data-layout=${i} part="actions" role="group" aria-label=${e.title ?? "Actions"}>
-        ${t.map((r) => o`
+      <div class="actions-widget" data-layout=${r} part="actions" role="group" aria-label=${e.title ?? "Actions"}>
+        ${t.map((i) => o`
           <button
-            data-style=${r.style ?? "default"}
-            ?disabled=${r.disabled}
-            @click=${() => this._dispatchAction(e, r)}
+            data-style=${i.style ?? "default"}
+            ?disabled=${i.disabled}
+            @click=${() => this._dispatchAction(e, i)}
             part="action-btn"
-          >${r.label}</button>
+          >${i.label}</button>
         `)}
       </div>
     `;
   }
   /** Render inline divider widget. */
   renderDivider(e) {
-    const t = e.options ?? {}, a = t.label, i = String(t.spacing ?? "default");
+    const t = e.options ?? {}, a = t.label, r = String(t.spacing ?? "default");
     return o`
-      <div class="divider divider-spacing-${i}" part="divider" role="separator">
-        ${a ?? c}
+      <div class="divider divider-spacing-${r}" part="divider" role="separator">
+        ${a ?? l}
       </div>
     `;
   }
   /** Render inline header widget. */
   renderHeader(e) {
-    const t = e.data, a = String(t?.text ?? e.title ?? ""), i = String(t?.level ?? "2");
+    const t = e.data, a = String(t?.text ?? e.title ?? ""), r = String(t?.level ?? "2");
     return a ? o`
-      <div class="header-widget" data-level=${i} part="header" role="heading" aria-level=${i}>
+      <div class="header-widget" data-level=${r} part="header" role="heading" aria-level=${r}>
         ${a}
       </div>
-    ` : c;
+    ` : l;
   }
   /** Dispatch an action event from the global action bar or actions widget. */
   _dispatchAction(e, t) {
@@ -3836,7 +3890,7 @@ let E = class extends w {
     );
   }
   renderFallback(e) {
-    const t = Oe(e.widget);
+    const t = Ee(e.widget);
     return o`
       <div class="fallback-card" part="fallback">
         <div class="fallback-label">${e.title ?? `Unknown widget: ${e.widget}`}</div>
@@ -3861,7 +3915,7 @@ let E = class extends w {
 };
 E.styles = [
   b,
-  y`
+  w`
       :host {
         display: block;
         container: u-widget / inline-size;
@@ -4057,17 +4111,20 @@ E = J([
 export {
   E as UWidget,
   A as formatTemplate,
-  _e as formatValue,
-  Ct as getDefaultLocale,
-  me as getFormdownParser,
-  de as getLocaleStrings,
-  ve as infer,
-  St as isWidgetSpec,
-  be as normalize,
-  Ot as parseFormdown,
-  Pt as registerFormdownParser,
-  At as registerLocale,
-  Oe as suggestWidget,
-  Q as validate
+  pe as formatValue,
+  Ot as getDefaultLocale,
+  Et as getEffectiveLocale,
+  be as getFormdownParser,
+  ue as getLocaleStrings,
+  we as infer,
+  Dt as isWidgetSpec,
+  ye as normalize,
+  Nt as parseFormdown,
+  Ft as registerFormdownParser,
+  jt as registerLocale,
+  Ie as resolveLocale,
+  Pt as setDefaultLocale,
+  Ee as suggestWidget,
+  Y as validate
 };
 //# sourceMappingURL=u-widgets.js.map