@iyulab/u-widgets 0.6.2 → 0.7.0

package/dist/u-widgets.js

@@ -3,7 +3,7 @@ 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 m, customElement as x, state as S } from "lit/decorators.js";
+import { property as f, customElement as x, state as S } from "lit/decorators.js";
 const xe = /* @__PURE__ */ new Set([
   "text",
   "email",
@@ -21,7 +21,7 @@ const xe = /* @__PURE__ */ new Set([
   "range",
   "radio",
   "checkbox"
-]), ie = 10, $e = /* @__PURE__ */ new Set([
+]), le = 10, $e = /* @__PURE__ */ new Set([
   "stat-group",
   "table",
   "list",
@@ -41,15 +41,15 @@ const xe = /* @__PURE__ */ new Set([
 ]), _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 (t > le)
+    return { valid: !1, errors: ["compose children exceed maximum nesting depth (" + le + ")"], warnings: r };
   if (e == null || typeof e != "object")
     return { valid: !1, errors: ["Spec must be a non-null object"], warnings: r };
   const i = e;
   if (typeof i.widget != "string" || i.widget.length === 0)
     return a.push('Required field "widget" must be a non-empty string'), { valid: !1, errors: a, warnings: r };
   const s = i.widget;
-  if (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 (t === 0 && i.type !== void 0 && i.type !== "u-widget" && a.push('"type" must be "u-widget" if specified'), i.fields !== void 0 && i.formdown !== void 0 && a.push('"fields" and "formdown" are mutually exclusive'), i.data !== void 0 && ($e.has(s) && !Array.isArray(i.data) && a.push(`"${s}" expects "data" to be an array, got ${typeof i.data}`), _e.has(s) && (Array.isArray(i.data) || typeof i.data != "object") && a.push(`"${s}" expects "data" to be an object, got ${Array.isArray(i.data) ? "array" : typeof i.data}`)), s === "compose") {
     if (!Array.isArray(i.children))
       a.push('"compose" widget requires a "children" array');
     else
@@ -104,7 +104,7 @@ function ke(e) {
 function Dt(e) {
   return Y(e).valid;
 }
-const se = ["B", "KB", "MB", "GB", "TB"], ze = /* @__PURE__ */ new Set([
+const ce = ["B", "KB", "MB", "GB", "TB"], ze = /* @__PURE__ */ new Set([
   "KRW",
   "JPY",
   "VND",
@@ -124,7 +124,7 @@ const se = ["B", "KB", "MB", "GB", "TB"], ze = /* @__PURE__ */ new Set([
   "XOF",
   "XPF"
 ]);
-function pe(e, t, a) {
+function he(e, t, a) {
   if (e == null) return "";
   const [r, i] = t?.split(":") ?? [];
   switch (r) {
@@ -223,9 +223,9 @@ function Oe(e) {
   if (isNaN(t)) return String(e);
   const a = t < 0 ? "-" : "";
   let r = Math.abs(t), i = 0;
-  for (; r >= 1024 && i < se.length - 1; )
+  for (; r >= 1024 && i < ce.length - 1; )
     r /= 1024, i++;
-  return a + (i === 0 ? r : r.toFixed(1)) + " " + se[i];
+  return a + (i === 0 ? r : r.toFixed(1)) + " " + ce[i];
 }
 const Ee = [
   "chart.bar",
@@ -298,7 +298,7 @@ function Le(e, t) {
   }
   return i[r];
 }
-const R = {
+const K = {
   // UI chrome
   prev: "Prev",
   next: "Next",
@@ -320,14 +320,14 @@ const R = {
   invalidPattern: "{label} format is invalid"
 }, L = /* @__PURE__ */ new Map();
 function jt(e, t) {
-  L.set(e.toLowerCase(), { ...R, ...t });
+  L.set(e.toLowerCase(), { ...K, ...t });
 }
-function ue(e) {
-  if (!e) return R;
+function me(e) {
+  if (!e) return K;
   const t = e.toLowerCase();
   if (L.has(t)) return L.get(t);
   const a = t.split("-")[0];
-  return a !== t && L.has(a) ? L.get(a) : R;
+  return a !== t && L.has(a) ? L.get(a) : K;
 }
 function A(e, t) {
   return e.replace(
@@ -336,30 +336,30 @@ function A(e, t) {
   );
 }
 function Ot() {
-  return { ...R };
+  return { ...K };
 }
-let q;
+let V;
 function Et(e) {
-  q = e;
+  V = e;
 }
 function Pt() {
-  return q;
+  return V;
 }
 function Ie(e) {
   if (e) return e;
-  if (q) return q;
+  if (V) return V;
   if (typeof document < "u" && document.documentElement?.lang)
     return document.documentElement.lang;
 }
-var Ne = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, ge = (e, t, a, r) => {
+var Ne = Object.defineProperty, Fe = Object.getOwnPropertyDescriptor, Z = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? Fe(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && Ne(t, a, i), i;
 };
-function ne(e, t) {
+function de(e, t) {
   const a = e.value, r = e.format;
   return {
-    value: r ? pe(a, r, t) : a ?? 0,
+    value: r ? he(a, r, t) : a ?? 0,
     label: e.label,
     unit: e.unit,
     prefix: e.prefix,
@@ -372,20 +372,20 @@ function ne(e, t) {
     variant: e.variant
   };
 }
-let B = class extends y {
+let I = class extends y {
   constructor() {
-    super(...arguments), this.spec = null;
+    super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
     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));
+    return this.spec.widget === "stat-group" ? this.renderStatGroup(e) : this.renderMetric(de(this.spec.data, e));
   }
   renderStatGroup(e) {
     const t = this.spec.data;
     return Array.isArray(t) ? o`
       <div class="stat-group" part="stat-group">
-        ${t.map((a) => this.renderMetric(ne(a, e)))}
+        ${t.map((a) => this.renderMetric(de(a, e)))}
       </div>
     ` : l;
   }
@@ -406,7 +406,7 @@ let B = class extends y {
     `;
   }
 };
-B.styles = [b, w`
+I.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -513,13 +513,16 @@ B.styles = [b, w`
       }
     }
   `];
-ge([
-  m({ type: Object })
-], B.prototype, "spec", 2);
-B = ge([
+Z([
+  f({ type: Object })
+], I.prototype, "spec", 2);
+Z([
+  f({ type: String, reflect: !0 })
+], I.prototype, "theme", 2);
+I = Z([
   x("u-metric")
-], B);
-var Me = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, fe = (e, t, a, r) => {
+], I);
+var Me = Object.defineProperty, Te = Object.getOwnPropertyDescriptor, Q = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? Te(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && Me(t, a, i), i;
@@ -537,16 +540,16 @@ const Ue = {
   blue: "#2563eb",
   gray: "#6b7280"
 };
-function oe(e) {
+function pe(e) {
   return Re[e] ?? e;
 }
-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), h = i - r > 180 ? 1 : 0;
-  return `M ${d} ${c} A ${a} ${a} 0 ${h} 1 ${p} ${g}`;
+function ue(e, t, a, r, i) {
+  const s = (r - 90) * Math.PI / 180, n = (i - 90) * Math.PI / 180, d = e + a * Math.cos(s), c = t + a * Math.sin(s), p = e + a * Math.cos(n), g = t + a * Math.sin(n), m = i - r > 180 ? 1 : 0;
+  return `M ${d} ${c} A ${a} ${a} 0 ${m} 1 ${p} ${g}`;
 }
-let W = class extends y {
+let N = class extends y {
   constructor() {
-    super(...arguments), this.spec = null;
+    super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
     return this.spec?.data ? this.spec.widget === "progress" ? this.renderProgress() : this.renderGauge() : l;
@@ -560,14 +563,14 @@ let W = class extends y {
     return Number(e.value ?? 0);
   }
   renderGauge() {
-    const e = this.getOptions(), t = this.getValue(), a = e.max - e.min, r = a > 0 ? Math.max(0, Math.min(1, (t - e.min) / a)) : 0, i = this.getThresholdColor(t, e), s = 100, n = 100, d = 80, c = 150, p = 240, g = c + p * r, h = le(s, n, d, c, c + p), u = r > 0 ? le(s, n, d, c, g) : null, f = 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, m = ue(s, n, d, c, c + p), u = r > 0 ? ue(s, n, d, c, g) : null, h = typeof this.spec.title == "string" ? this.spec.title : "Gauge", v = `${t}${e.unit}`;
     return o`
       <div class="gauge-container" part="gauge"
         role="meter"
         aria-valuenow=${t}
         aria-valuemin=${e.min}
         aria-valuemax=${e.max}
-        aria-label=${f}
+        aria-label=${h}
         aria-valuetext=${v}
       >
         <div class="gauge-wrapper">
@@ -576,7 +579,7 @@ let W = class extends y {
             ${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="${h}" fill="none" stroke-width="12" stroke-linecap="round"></path>
+            <path class="gauge-track" d="${m}" fill="none" stroke-width="12" stroke-linecap="round"></path>
             <path class="gauge-fill" d="${u ?? "M0 0"}" fill="none" stroke="${u ? i : "none"}" stroke-width="12" stroke-linecap="round"></path>
           </svg>
         </div>
@@ -615,11 +618,11 @@ let W = class extends y {
     if (!t.thresholds?.length) return "var(--u-widget-primary, #4f46e5)";
     const a = [...t.thresholds].sort((r, i) => r.to - i.to);
     for (const r of a)
-      if (e <= r.to) return oe(r.color);
-    return oe(a[a.length - 1].color);
+      if (e <= r.to) return pe(r.color);
+    return pe(a[a.length - 1].color);
   }
 };
-W.styles = [b, w`
+N.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -716,20 +719,23 @@ W.styles = [b, w`
       }
     }
   `];
-fe([
-  m({ type: Object })
-], W.prototype, "spec", 2);
-W = fe([
+Q([
+  f({ type: Object })
+], N.prototype, "spec", 2);
+Q([
+  f({ type: String, reflect: !0 })
+], N.prototype, "theme", 2);
+N = Q([
   x("u-gauge")
-], W);
+], N);
 var qe = Object.defineProperty, Be = Object.getOwnPropertyDescriptor, C = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? Be(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && qe(t, a, i), i;
 };
-let z = class extends y {
+let _ = 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) => {
+    super(...arguments), this.spec = null, this.theme = null, this._sortField = null, this._sortDir = null, this._page = 0, this._searchQuery = "", this._focusedIdx = 0, this._onTableKeydown = (e) => {
       const a = e.target.closest("tr");
       if (!a) return;
       const r = a.parentElement;
@@ -793,10 +799,10 @@ let z = class extends y {
   }
   get _locale() {
     const e = this.spec?.options?.locale;
-    return ue(typeof e == "string" ? e : void 0);
+    return me(typeof e == "string" ? e : void 0);
   }
   renderTable() {
-    const e = this.spec.data, t = this.getColumns(e), a = this._locale, r = this.spec.options?.sortable !== !1, i = !!this.spec.options?.searchable, s = !!this.spec.options?.compact, n = Number(this.spec.options?.pageSize) || 0, d = this._searchQuery ? this.filterData(e, t) : e, c = this._sortField && this._sortDir ? this.sortData(d) : d, p = n > 0 ? Math.max(1, Math.ceil(c.length / n)) : 1, g = Math.min(this._page, p - 1), h = n > 0 ? c.slice(g * n, (g + 1) * n) : c, u = i ? 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), m = n > 0 ? c.slice(g * n, (g + 1) * n) : c, u = i ? o`
       <div class="search-box" part="search">
         <input
           class="search-input"
@@ -807,7 +813,7 @@ let z = class extends y {
           @input=${this._onSearch}
         />
       </div>
-    ` : l, f = n > 0 && p > 1 ? o`
+    ` : l, h = n > 0 && p > 1 ? o`
       <nav class="pagination" part="pagination" aria-label=${a.tablePagination}>
         <button aria-label=${a.previousPage} ?disabled=${g === 0} @click=${() => this._onPageChange(g - 1)}>${a.prev}</button>
         <span aria-live="polite">${g + 1} / ${p}</span>
@@ -837,18 +843,18 @@ let z = class extends y {
             </tr>
           </thead>
           <tbody @keydown=${this._onTableKeydown}>
-            ${h.map(
+            ${m.map(
       (v, $) => o`
                 <tr part="tr"
                   tabindex=${$ === this._focusedIdx ? "0" : "-1"}
                   @click=${() => this._onRowClick(v, n > 0 ? g * n + $ : $)}
-                  @keydown=${(_) => {
-        (_.key === "Enter" || _.key === " ") && (_.preventDefault(), this._onRowClick(v, n > 0 ? g * n + $ : $));
+                  @keydown=${(k) => {
+        (k.key === "Enter" || k.key === " ") && (k.preventDefault(), this._onRowClick(v, n > 0 ? g * n + $ : $));
       }}
                 >
                   ${t.map(
-        (_) => o`<td data-align=${_.align ?? "left"} part="td"
-                        >${pe(v[_.field], _.format, typeof this.spec.options?.locale == "string" ? this.spec.options.locale : void 0)}</td
+        (k) => o`<td data-align=${k.align ?? "left"} part="td"
+                        >${he(v[k.field], k.format, typeof this.spec.options?.locale == "string" ? this.spec.options.locale : void 0)}</td
                       >`
       )}
                 </tr>
@@ -857,7 +863,7 @@ let z = class extends y {
           </tbody>
         </table>
       </div>
-      ${f}
+      ${h}
     </div>`;
   }
   _onPageChange(e) {
@@ -900,8 +906,8 @@ let z = class extends y {
             <div class="list-item" part="list-item"
               tabindex=${g === this._focusedIdx ? "0" : "-1"}
               @click=${() => this._onRowClick(p, g)}
-              @keydown=${(h) => {
-        (h.key === "Enter" || h.key === " ") && (h.preventDefault(), this._onRowClick(p, g));
+              @keydown=${(m) => {
+        (m.key === "Enter" || m.key === " ") && (m.preventDefault(), this._onRowClick(p, g));
       }}
             >
               ${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}
@@ -948,7 +954,7 @@ let z = class extends y {
     return String(e ?? "").charAt(0).toUpperCase();
   }
 };
-z.styles = [b, w`
+_.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -1258,34 +1264,37 @@ z.styles = [b, w`
     }
   `];
 C([
-  m({ type: Object })
-], z.prototype, "spec", 2);
+  f({ type: Object })
+], _.prototype, "spec", 2);
+C([
+  f({ type: String, reflect: !0 })
+], _.prototype, "theme", 2);
 C([
   S()
-], z.prototype, "_sortField", 2);
+], _.prototype, "_sortField", 2);
 C([
   S()
-], z.prototype, "_sortDir", 2);
+], _.prototype, "_sortDir", 2);
 C([
   S()
-], z.prototype, "_page", 2);
+], _.prototype, "_page", 2);
 C([
   S()
-], z.prototype, "_searchQuery", 2);
+], _.prototype, "_searchQuery", 2);
 C([
   S()
-], z.prototype, "_focusedIdx", 2);
-z = C([
+], _.prototype, "_focusedIdx", 2);
+_ = C([
   x("u-table")
-], z);
-var We = Object.defineProperty, He = Object.getOwnPropertyDescriptor, V = (e, t, a, r) => {
+], _);
+var We = Object.defineProperty, He = Object.getOwnPropertyDescriptor, H = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? He(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && We(t, a, i), i;
 };
-let j = class extends y {
+let D = class extends y {
   constructor() {
-    super(...arguments), this.spec = null, this._formData = {}, this._errors = {}, this._onFormSubmit = (e) => {
+    super(...arguments), this.spec = null, this.theme = null, this._formData = {}, this._errors = {}, this._onFormSubmit = (e) => {
       e.preventDefault();
       const t = (this.spec?.actions ?? []).find((a) => a.action === "submit");
       t ? this._onAction(t) : this._validate() && this._emitEvent({
@@ -1511,7 +1520,7 @@ let j = class extends y {
   }
   get _locale() {
     const e = this.spec?.options?.locale;
-    return ue(typeof e == "string" ? e : void 0);
+    return me(typeof e == "string" ? e : void 0);
   }
   _validate() {
     const e = this.spec?.fields ?? [], t = {}, a = this._locale;
@@ -1575,7 +1584,7 @@ let j = class extends y {
     );
   }
 };
-j.styles = [b, w`
+D.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -1793,24 +1802,27 @@ j.styles = [b, w`
       }
     }
   `];
-V([
-  m({ type: Object })
-], j.prototype, "spec", 2);
-V([
+H([
+  f({ type: Object })
+], D.prototype, "spec", 2);
+H([
+  f({ type: String, reflect: !0 })
+], D.prototype, "theme", 2);
+H([
   S()
-], j.prototype, "_formData", 2);
-V([
+], D.prototype, "_formData", 2);
+H([
   S()
-], j.prototype, "_errors", 2);
-j = V([
+], D.prototype, "_errors", 2);
+D = H([
   x("u-form")
-], j);
-var Ke = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, Z = (e, t, a, r) => {
+], D);
+var Ke = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, ee = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? Ve(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && Ke(t, a, i), i;
 };
-let I = class extends y {
+let F = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
@@ -1850,7 +1862,7 @@ let I = class extends y {
     return r ? o`<div class=${d} style=${r} part="child">${n}</div>` : o`<div class=${d} part="child">${n}</div>`;
   }
 };
-I.styles = [b, w`
+F.styles = [b, w`
     :host {
       display: block;
       container: u-compose / inline-size;
@@ -1951,23 +1963,23 @@ I.styles = [b, w`
       }
     }
   `];
-Z([
-  m({ type: Object })
-], I.prototype, "spec", 2);
-Z([
-  m({ type: String, reflect: !0 })
-], I.prototype, "theme", 2);
-I = Z([
+ee([
+  f({ type: Object })
+], F.prototype, "spec", 2);
+ee([
+  f({ type: String, reflect: !0 })
+], F.prototype, "theme", 2);
+F = ee([
   x("u-compose")
-], I);
-var Ge = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, he = (e, t, a, r) => {
+], F);
+var Ge = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, te = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? Xe(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && Ge(t, a, i), i;
 };
-let H = class extends y {
+let M = class extends y {
   constructor() {
-    super(...arguments), this.spec = null;
+    super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
     if (!this.spec) return l;
@@ -2015,9 +2027,9 @@ let H = class extends y {
     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, r, i, s) => {
-        const n = (u) => u.split("|").slice(1, -1).map((f) => f.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, f) => `<th scope="col" style="text-align:${c[f] ?? "left"}">${u}</th>`).join(""), h = p.map((u) => "<tr>" + u.map((f, v) => `<td style="text-align:${c[v] ?? "left"}">${f}</td>`).join("") + "</tr>").join("");
-        return `<table><thead><tr>${g}</tr></thead><tbody>${h}</tbody></table>`;
+        const n = (u) => u.split("|").slice(1, -1).map((h) => h.trim()), d = n(r), c = n(i).map((u) => u.startsWith(":") && u.endsWith(":") ? "center" : u.endsWith(":") ? "right" : "left"), p = s.trim().split(`
+`).map(n), g = d.map((u, h) => `<th scope="col" style="text-align:${c[h] ?? "left"}">${u}</th>`).join(""), m = p.map((u) => "<tr>" + u.map((h, v) => `<td style="text-align:${c[v] ?? "left"}">${h}</td>`).join("") + "</tr>").join("");
+        return `<table><thead><tr>${g}</tr></thead><tbody>${m}</tbody></table>`;
       }
     ), t = t.replace(/`([^`]+)`/g, "<code>$1</code>"), t = t.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>"), t = t.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), t = t.replace(/\*(.+?)\*/g, "<em>$1</em>"), t = t.replace(
       /\[([^\]]+)\]\(([^)]+)\)/g,
@@ -2033,7 +2045,7 @@ let H = class extends y {
     return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 };
-H.styles = [b, w`
+M.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2210,20 +2222,23 @@ H.styles = [b, w`
       }
     }
   `];
-he([
-  m({ type: Object })
-], H.prototype, "spec", 2);
-H = he([
+te([
+  f({ type: Object })
+], M.prototype, "spec", 2);
+te([
+  f({ type: String, reflect: !0 })
+], M.prototype, "theme", 2);
+M = te([
   x("u-content")
-], H);
-var Je = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, me = (e, t, a, r) => {
+], M);
+var Je = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, re = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? Ye(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && Je(t, a, i), i;
 };
-let K = class extends y {
+let T = class extends y {
   constructor() {
-    super(...arguments), this.spec = null;
+    super(...arguments), this.spec = null, this.theme = null;
   }
   render() {
     if (!this.spec) return l;
@@ -2252,7 +2267,7 @@ let K = class extends y {
     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) : [] : [];
   }
 };
-K.styles = [b, w`
+T.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2346,12 +2361,15 @@ K.styles = [b, w`
       }
     }
   `];
-me([
-  m({ type: Object })
-], K.prototype, "spec", 2);
-K = me([
+re([
+  f({ type: Object })
+], T.prototype, "spec", 2);
+re([
+  f({ type: String, reflect: !0 })
+], T.prototype, "theme", 2);
+T = re([
   x("u-kv")
-], K);
+], T);
 var Ze = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, G = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? Qe(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
@@ -2398,20 +2416,20 @@ const et = {
   jsonc: "json",
   psql: "sql",
   mysql: "sql"
-}, ce = /* @__PURE__ */ new Map();
+}, ge = /* @__PURE__ */ new Map();
 function at(e) {
-  let t = ce.get(e);
+  let t = ge.get(e);
   if (!t) {
     const a = tt[e] || "";
-    t = a ? new Set(a.split(" ")) : /* @__PURE__ */ new Set(), ce.set(e, t);
+    t = a ? new Set(a.split(" ")) : /* @__PURE__ */ new Set(), ge.set(e, t);
   }
   return t;
 }
-function k(e) {
+function z(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function D(e, t) {
-  const a = k(e);
+function j(e, t) {
+  const a = z(e);
   return a.includes(`
 `) ? a.split(`
 `).map((r) => `<span class="hl-${t}">${r}</span>`).join(`
@@ -2432,7 +2450,7 @@ function ve(e, t, a) {
   return e.length;
 }
 function it(e, t) {
-  if (!t) return k(e);
+  if (!t) return z(e);
   const a = rt[t] || t;
   if (a === "json") return st(e);
   const r = at(a), i = et[a], s = i?.[0], n = i?.[1], d = a === "javascript" || a === "typescript";
@@ -2440,50 +2458,50 @@ function it(e, t) {
   const g = e.length;
   for (; p < g; ) {
     if (n && e.startsWith(n[0], p)) {
-      const u = e.indexOf(n[1], p + n[0].length), f = u === -1 ? e.slice(p) : e.slice(p, u + n[1].length);
-      c += D(f, "c"), p += f.length;
+      const u = e.indexOf(n[1], p + n[0].length), h = u === -1 ? e.slice(p) : e.slice(p, u + n[1].length);
+      c += j(h, "c"), p += h.length;
       continue;
     }
     if (s && e.startsWith(s, p)) {
       const u = e.indexOf(`
-`, p), f = u === -1 ? e.slice(p) : e.slice(p, u);
-      c += D(f, "c"), p += f.length;
+`, p), h = u === -1 ? e.slice(p) : e.slice(p, u);
+      c += j(h, "c"), p += h.length;
       continue;
     }
-    const h = e[p];
-    if (h === '"' || h === "'" || h === "`" && d) {
-      const u = ve(e, p, h);
-      c += D(e.slice(p, u), "s"), p = u;
+    const m = e[p];
+    if (m === '"' || m === "'" || m === "`" && d) {
+      const u = ve(e, p, m);
+      c += j(e.slice(p, u), "s"), p = u;
       continue;
     }
-    if (/\d/.test(h) && (p === 0 || !/[a-zA-Z_$]/.test(e[p - 1]))) {
+    if (/\d/.test(m) && (p === 0 || !/[a-zA-Z_$]/.test(e[p - 1]))) {
       let u = p + 1;
       for (; u < g && /[0-9a-fA-FxXoObBeE._]/.test(e[u]); ) u++;
-      c += D(e.slice(p, u), "n"), p = u;
+      c += j(e.slice(p, u), "n"), p = u;
       continue;
     }
-    if (/[a-zA-Z_$]/.test(h)) {
+    if (/[a-zA-Z_$]/.test(m)) {
       let u = p + 1;
       for (; u < g && /[a-zA-Z0-9_$]/.test(e[u]); ) u++;
-      const f = e.slice(p, u);
-      c += r.has(f) ? `<span class="hl-k">${k(f)}</span>` : k(f), p = u;
+      const h = e.slice(p, u);
+      c += r.has(h) ? `<span class="hl-k">${z(h)}</span>` : z(h), p = u;
       continue;
     }
-    if (a === "html" && h === "<" && p + 1 < g && /[a-zA-Z/!]/.test(e[p + 1])) {
+    if (a === "html" && m === "<" && p + 1 < g && /[a-zA-Z/!]/.test(e[p + 1])) {
       const u = e.indexOf(">", p);
       if (u !== -1) {
-        c += `<span class="hl-k">${k(e.slice(p, u + 1))}</span>`, p = u + 1;
+        c += `<span class="hl-k">${z(e.slice(p, u + 1))}</span>`, p = u + 1;
         continue;
       }
     }
-    if (a === "css" && /[a-z-]/.test(h)) {
+    if (a === "css" && /[a-z-]/.test(m)) {
       let u = p + 1;
       for (; u < g && /[a-z-]/.test(e[u]); ) u++;
-      const f = e.slice(p, u);
-      e.slice(u).trimStart()[0] === ":" ? c += `<span class="hl-k">${k(f)}</span>` : c += k(f), p = u;
+      const h = e.slice(p, u);
+      e.slice(u).trimStart()[0] === ":" ? c += `<span class="hl-k">${z(h)}</span>` : c += z(h), p = u;
       continue;
     }
-    c += k(h), p++;
+    c += z(m), p++;
   }
   return c;
 }
@@ -2494,13 +2512,13 @@ function st(e) {
     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;
+      t += j(d, c[0] === ":" ? "k" : "s"), a = n;
       continue;
     }
     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;
+      t += j(e.slice(a, n), "n"), a = n;
       continue;
     }
     let s = !1;
@@ -2509,7 +2527,7 @@ function st(e) {
         t += `<span class="hl-k">${n}</span>`, a += n.length, s = !0;
         break;
       }
-    s || (t += k(i), a++);
+    s || (t += z(i), a++);
   }
   return t;
 }
@@ -2526,10 +2544,10 @@ let O = class extends y {
     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, f) => {
-      const v = f + 1, $ = d.has(v) ? " line-hl" : "", _ = i ? `<span class="line-no">${v}</span>` : "";
-      return `<span class="line${$}">${_}${u || " "}</span>`;
-    }).join(""), h = n ? `max-height: ${n}` : "";
+`).map((u, h) => {
+      const v = h + 1, $ = d.has(v) ? " line-hl" : "", k = i ? `<span class="line-no">${v}</span>` : "";
+      return `<span class="line${$}">${k}${u || " "}</span>`;
+    }).join(""), m = n ? `max-height: ${n}` : "";
     return o`
       <div class="code-block" part="code">
         <div class="code-header" part="code-header">
@@ -2541,7 +2559,7 @@ let O = class extends y {
             @click=${this._copyCode}
           >${this._copied ? "Copied!" : "Copy"}</button>
         </div>
-        <div class="code-body" part="code-body" style=${h}>
+        <div class="code-body" part="code-body" style=${m}>
           <pre data-wrap=${String(s)}><code .innerHTML=${g}></code></pre>
         </div>
       </div>
@@ -2664,10 +2682,10 @@ O.styles = [b, w`
     }
   `];
 G([
-  m({ type: Object })
+  f({ type: Object })
 ], O.prototype, "spec", 2);
 G([
-  m({ type: String, reflect: !0 })
+  f({ type: String, reflect: !0 })
 ], O.prototype, "theme", 2);
 G([
   S()
@@ -2675,12 +2693,12 @@ G([
 O = G([
   x("u-code")
 ], O);
-var nt = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, Q = (e, t, a, r) => {
+var nt = Object.defineProperty, ot = Object.getOwnPropertyDescriptor, ae = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? ot(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && nt(t, a, i), i;
 };
-let N = class extends y {
+let U = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
@@ -2767,7 +2785,7 @@ let N = class extends y {
     return [];
   }
 };
-N.styles = [b, w`
+U.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2864,16 +2882,16 @@ N.styles = [b, w`
       .cite-snippet { font-size: 0.75rem; }
     }
   `];
-Q([
-  m({ type: Object })
-], N.prototype, "spec", 2);
-Q([
-  m({ type: String, reflect: !0 })
-], N.prototype, "theme", 2);
-N = Q([
+ae([
+  f({ type: Object })
+], U.prototype, "spec", 2);
+ae([
+  f({ type: String, reflect: !0 })
+], U.prototype, "theme", 2);
+U = ae([
   x("u-citation")
-], N);
-var lt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, ee = (e, t, a, r) => {
+], U);
+var lt = Object.defineProperty, ct = Object.getOwnPropertyDescriptor, ie = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? ct(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && lt(t, a, i), i;
@@ -2890,7 +2908,7 @@ const dt = /* @__PURE__ */ new Set(["info", "success", "warning", "error", "neut
   neutral: "○"
   // ○
 };
-let F = class extends y {
+let R = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
@@ -2935,7 +2953,7 @@ let F = class extends y {
     return dt.has(t) ? t : "info";
   }
 };
-F.styles = [b, w`
+R.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -3000,22 +3018,22 @@ F.styles = [b, w`
       .status-item { font-size: 0.8125rem; }
     }
   `];
-ee([
-  m({ type: Object })
-], F.prototype, "spec", 2);
-ee([
-  m({ type: String, reflect: !0 })
-], F.prototype, "theme", 2);
-F = ee([
+ie([
+  f({ type: Object })
+], R.prototype, "spec", 2);
+ie([
+  f({ type: String, reflect: !0 })
+], R.prototype, "theme", 2);
+R = ie([
   x("u-status")
-], F);
-var ut = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, te = (e, t, a, r) => {
+], R);
+var ut = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, se = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? gt(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && ut(t, a, i), i;
 };
 const ft = /* @__PURE__ */ new Set(["done", "active", "pending", "error"]);
-function de(e, t) {
+function fe(e, t) {
   if (t) return o`<span class="step-icon-text">${t}</span>`;
   switch (e) {
     case "done":
@@ -3028,7 +3046,7 @@ function de(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 M = class extends y {
+let q = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
@@ -3046,7 +3064,7 @@ let M = class extends y {
         ${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">${de(a.status, a.icon)}</span>
+              <span class="step-icon" part="step-icon" aria-hidden="true">${fe(a.status, a.icon)}</span>
               <div class="step-line"></div>
             </div>
             <div class="step-body">
@@ -3068,7 +3086,7 @@ let M = class extends y {
             <div class="step-h" part="step" role="listitem" data-status=${a.status}>
               <div class="step-h-top">
                 <div class="step-h-line" ?data-done=${i}></div>
-                <span class="step-icon" part="step-icon" aria-hidden="true">${de(a.status, a.icon)}</span>
+                <span class="step-icon" part="step-icon" aria-hidden="true">${fe(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>
@@ -3094,7 +3112,7 @@ let M = class extends y {
     return ft.has(t) ? t : "pending";
   }
 };
-M.styles = [b, w`
+q.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -3326,15 +3344,15 @@ M.styles = [b, w`
       }
     }
   `];
-te([
-  m({ type: Object })
-], M.prototype, "spec", 2);
-te([
-  m({ type: String, reflect: !0 })
-], M.prototype, "theme", 2);
-M = te([
+se([
+  f({ type: Object })
+], q.prototype, "spec", 2);
+se([
+  f({ type: String, reflect: !0 })
+], q.prototype, "theme", 2);
+q = se([
   x("u-steps")
-], M);
+], q);
 var ht = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, X = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? mt(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
@@ -3363,7 +3381,7 @@ let E = class extends y {
              @mouseleave=${i ? () => {
       this._hoverIdx = -1;
     } : void 0}>
-          ${Array.from({ length: r }, (g, h) => this._renderIcon(h, p, c, s, i))}
+          ${Array.from({ length: r }, (g, m) => this._renderIcon(m, p, c, s, i))}
         </div>
         ${!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}
@@ -3533,10 +3551,10 @@ E.styles = [b, w`
     }
   `];
 X([
-  m({ type: Object })
+  f({ type: Object })
 ], E.prototype, "spec", 2);
 X([
-  m({ type: String, reflect: !0 })
+  f({ type: String, reflect: !0 })
 ], E.prototype, "theme", 2);
 X([
   S()
@@ -3544,12 +3562,12 @@ X([
 E = X([
   x("u-rating")
 ], E);
-var bt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, re = (e, t, a, r) => {
+var bt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, ne = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? wt(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && bt(t, a, i), i;
 };
-let T = class extends y {
+let B = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
@@ -3583,7 +3601,7 @@ let T = class extends y {
     return /^(javascript|data|vbscript):/i.test(t) ? "" : e;
   }
 };
-T.styles = [b, w`
+B.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -3617,21 +3635,21 @@ T.styles = [b, w`
       }
     }
   `];
-re([
-  m({ type: Object })
-], T.prototype, "spec", 2);
-re([
-  m({ type: String, reflect: !0 })
-], T.prototype, "theme", 2);
-T = re([
+ne([
+  f({ type: Object })
+], B.prototype, "spec", 2);
+ne([
+  f({ type: String, reflect: !0 })
+], B.prototype, "theme", 2);
+B = ne([
   x("u-video")
-], T);
-var yt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, ae = (e, t, a, r) => {
+], B);
+var yt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, oe = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? xt(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && yt(t, a, i), i;
 };
-let U = class extends y {
+let W = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null;
   }
@@ -3672,7 +3690,7 @@ let U = class extends y {
     return /^(javascript|data|vbscript):/i.test(t) ? "" : e;
   }
 };
-U.styles = [b, w`
+W.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -3710,15 +3728,15 @@ U.styles = [b, w`
       }
     }
   `];
-ae([
-  m({ type: Object })
-], U.prototype, "spec", 2);
-ae([
-  m({ type: String, reflect: !0 })
-], U.prototype, "theme", 2);
-U = ae([
+oe([
+  f({ type: Object })
+], W.prototype, "spec", 2);
+oe([
+  f({ type: String, reflect: !0 })
+], W.prototype, "theme", 2);
+W = oe([
   x("u-gallery")
-], U);
+], W);
 var $t = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, J = (e, t, a, r) => {
   for (var i = r > 1 ? void 0 : r ? _t(t, a) : t, s = e.length - 1, n; s >= 0; s--)
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
@@ -3828,13 +3846,13 @@ let P = class extends y {
     }
     const g = !(t === "header" || t === "actions" || t === "divider" || t === "compose") && r.title ? o`<div class="widget-title" part="title">${r.title}</div>` : l;
     if (!!r.options?.card ? c = o`<div class="card-container" part="card">${g}${c}</div>` : g !== l && (c = o`${g}${c}`), d.length > 0) {
-      const u = d.map((f) => o`
+      const u = d.map((h) => o`
         <button
-          data-style=${f.style ?? "default"}
-          ?disabled=${f.disabled}
-          @click=${() => this._dispatchAction(r, f)}
+          data-style=${h.style ?? "default"}
+          ?disabled=${h.disabled}
+          @click=${() => this._dispatchAction(r, h)}
           part="action-btn"
-        >${f.label}</button>
+        >${h.label}</button>
       `);
       return o`<div part="widget-container">${c}<div class="global-actions" part="actions">${u}</div></div>`;
     }
@@ -4100,7 +4118,7 @@ P.styles = [
     `
 ];
 J([
-  m({
+  f({
     type: Object,
     converter: {
       fromAttribute(e) {
@@ -4115,10 +4133,10 @@ J([
   })
 ], P.prototype, "spec", 2);
 J([
-  m({ type: String, reflect: !0 })
+  f({ type: String, reflect: !0 })
 ], P.prototype, "theme", 2);
 J([
-  m({ type: String, reflect: !0 })
+  f({ type: String, reflect: !0 })
 ], P.prototype, "locale", 2);
 P = J([
   x("u-widget")
@@ -4126,11 +4144,11 @@ P = J([
 export {
   P as UWidget,
   A as formatTemplate,
-  pe as formatValue,
+  he as formatValue,
   Ot as getDefaultLocale,
   Pt as getEffectiveLocale,
   be as getFormdownParser,
-  ue as getLocaleStrings,
+  me as getLocaleStrings,
   we as infer,
   Dt as isWidgetSpec,
   ye as normalize,