@iyulab/u-widgets 0.6.0 → 0.6.2

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 h, customElement as x, state as S } from "lit/decorators.js";
+import { property as m, customElement as x, state as S } from "lit/decorators.js";
 const xe = /* @__PURE__ */ new Set([
   "text",
   "email",
@@ -227,7 +227,7 @@ function Oe(e) {
     r /= 1024, i++;
   return a + (i === 0 ? r : r.toFixed(1)) + " " + se[i];
 }
-const Pe = [
+const Ee = [
   "chart.bar",
   "chart.line",
   "chart.area",
@@ -263,11 +263,11 @@ const Pe = [
   "divider",
   "header"
 ];
-function Ee(e) {
+function Pe(e) {
   if (!e) return;
   const t = e.toLowerCase();
   let a, r = 1 / 0;
-  for (const s of Pe) {
+  for (const s of Ee) {
     const n = Le(t, s);
     n < r && (r = n, a = s);
   }
@@ -339,10 +339,10 @@ function Ot() {
   return { ...R };
 }
 let q;
-function Pt(e) {
+function Et(e) {
   q = e;
 }
-function Et() {
+function Pt() {
   return q;
 }
 function Ie(e) {
@@ -473,7 +473,8 @@ B.styles = [b, w`
     .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); }
+    .metric[data-variant="info"]    .metric-value { color: var(--u-widget-primary, #3b82f6); }
+    .metric[data-variant="neutral"] .metric-value { color: var(--u-widget-text-secondary, #64748b); }
 
     /* ── stat-group ── */
     .stat-group {
@@ -513,7 +514,7 @@ B.styles = [b, w`
     }
   `];
 ge([
-  h({ type: Object })
+  m({ type: Object })
 ], B.prototype, "spec", 2);
 B = ge([
   x("u-metric")
@@ -540,8 +541,8 @@ function oe(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), f = i - r > 180 ? 1 : 0;
-  return `M ${d} ${c} A ${a} ${a} 0 ${f} 1 ${p} ${g}`;
+  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}`;
 }
 let W = class extends y {
   constructor() {
@@ -559,14 +560,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, 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}`;
+    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}`;
     return o`
       <div class="gauge-container" part="gauge"
         role="meter"
         aria-valuenow=${t}
         aria-valuemin=${e.min}
         aria-valuemax=${e.max}
-        aria-label=${m}
+        aria-label=${f}
         aria-valuetext=${v}
       >
         <div class="gauge-wrapper">
@@ -575,7 +576,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="${f}" fill="none" stroke-width="12" stroke-linecap="round"></path>
+            <path class="gauge-track" d="${h}" 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>
@@ -641,6 +642,7 @@ W.styles = [b, w`
     .gauge-svg {
       display: block;
       width: 100%;
+      aspect-ratio: 200 / 195;
     }
 
     .gauge-track {
@@ -715,7 +717,7 @@ W.styles = [b, w`
     }
   `];
 fe([
-  h({ type: Object })
+  m({ type: Object })
 ], W.prototype, "spec", 2);
 W = fe([
   x("u-gauge")
@@ -794,7 +796,7 @@ let z = class extends y {
     return ue(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), f = 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), h = n > 0 ? c.slice(g * n, (g + 1) * n) : c, u = i ? o`
       <div class="search-box" part="search">
         <input
           class="search-input"
@@ -805,7 +807,7 @@ let z = class extends y {
           @input=${this._onSearch}
         />
       </div>
-    ` : l, m = n > 0 && p > 1 ? o`
+    ` : l, f = 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>
@@ -835,7 +837,7 @@ let z = class extends y {
             </tr>
           </thead>
           <tbody @keydown=${this._onTableKeydown}>
-            ${f.map(
+            ${h.map(
       (v, $) => o`
                 <tr part="tr"
                   tabindex=${$ === this._focusedIdx ? "0" : "-1"}
@@ -855,7 +857,7 @@ let z = class extends y {
           </tbody>
         </table>
       </div>
-      ${m}
+      ${f}
     </div>`;
   }
   _onPageChange(e) {
@@ -898,8 +900,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=${(f) => {
-        (f.key === "Enter" || f.key === " ") && (f.preventDefault(), this._onRowClick(p, g));
+              @keydown=${(h) => {
+        (h.key === "Enter" || h.key === " ") && (h.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}
@@ -1256,7 +1258,7 @@ z.styles = [b, w`
     }
   `];
 C([
-  h({ type: Object })
+  m({ type: Object })
 ], z.prototype, "spec", 2);
 C([
   S()
@@ -1276,8 +1278,8 @@ C([
 z = C([
   x("u-table")
 ], z);
-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--)
+var We = Object.defineProperty, He = Object.getOwnPropertyDescriptor, V = (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;
 };
@@ -1792,7 +1794,7 @@ j.styles = [b, w`
     }
   `];
 V([
-  h({ type: Object })
+  m({ type: Object })
 ], j.prototype, "spec", 2);
 V([
   S()
@@ -1803,10 +1805,10 @@ V([
 j = V([
   x("u-form")
 ], j);
-var He = Object.defineProperty, Ve = Object.getOwnPropertyDescriptor, Z = (e, t, a, r) => {
+var Ke = 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;
+  return r && i && Ke(t, a, i), i;
 };
 let I = class extends y {
   constructor() {
@@ -1888,6 +1890,10 @@ I.styles = [b, w`
       gap: var(--u-widget-gap, 16px);
     }
 
+    .layout-grid > * {
+      min-height: 60px;
+    }
+
     .child-card {
       padding: 16px 20px;
       border-radius: var(--u-widget-radius, 6px);
@@ -1946,10 +1952,10 @@ I.styles = [b, w`
     }
   `];
 Z([
-  h({ type: Object })
+  m({ type: Object })
 ], I.prototype, "spec", 2);
 Z([
-  h({ type: String, reflect: !0 })
+  m({ type: String, reflect: !0 })
 ], I.prototype, "theme", 2);
 I = Z([
   x("u-compose")
@@ -1959,7 +1965,7 @@ var Ge = Object.defineProperty, Xe = Object.getOwnPropertyDescriptor, he = (e, t
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && Ge(t, a, i), i;
 };
-let K = class extends y {
+let H = class extends y {
   constructor() {
     super(...arguments), this.spec = null;
   }
@@ -2009,9 +2015,9 @@ let K = 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((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>`;
+        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>`;
       }
     ), 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,
@@ -2027,7 +2033,7 @@ let K = class extends y {
     return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 };
-K.styles = [b, w`
+H.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2205,17 +2211,17 @@ K.styles = [b, w`
     }
   `];
 he([
-  h({ type: Object })
-], K.prototype, "spec", 2);
-K = he([
+  m({ type: Object })
+], H.prototype, "spec", 2);
+H = he([
   x("u-content")
-], K);
+], H);
 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 y {
+let K = class extends y {
   constructor() {
     super(...arguments), this.spec = null;
   }
@@ -2246,7 +2252,7 @@ let H = 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) : [] : [];
   }
 };
-H.styles = [b, w`
+K.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -2341,11 +2347,11 @@ H.styles = [b, w`
     }
   `];
 me([
-  h({ type: Object })
-], H.prototype, "spec", 2);
-H = me([
+  m({ type: Object })
+], K.prototype, "spec", 2);
+K = me([
   x("u-kv")
-], H);
+], K);
 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);
@@ -2434,50 +2440,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), m = u === -1 ? e.slice(p) : e.slice(p, u + n[1].length);
-      c += D(m, "c"), p += m.length;
+      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;
       continue;
     }
     if (s && e.startsWith(s, p)) {
       const u = e.indexOf(`
-`, p), m = u === -1 ? e.slice(p) : e.slice(p, u);
-      c += D(m, "c"), p += m.length;
+`, p), f = u === -1 ? e.slice(p) : e.slice(p, u);
+      c += D(f, "c"), p += f.length;
       continue;
     }
-    const f = e[p];
-    if (f === '"' || f === "'" || f === "`" && d) {
-      const u = ve(e, p, f);
+    const h = e[p];
+    if (h === '"' || h === "'" || h === "`" && d) {
+      const u = ve(e, p, h);
       c += D(e.slice(p, u), "s"), p = u;
       continue;
     }
-    if (/\d/.test(f) && (p === 0 || !/[a-zA-Z_$]/.test(e[p - 1]))) {
+    if (/\d/.test(h) && (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;
       continue;
     }
-    if (/[a-zA-Z_$]/.test(f)) {
+    if (/[a-zA-Z_$]/.test(h)) {
       let u = p + 1;
       for (; u < g && /[a-zA-Z0-9_$]/.test(e[u]); ) u++;
-      const m = e.slice(p, u);
-      c += r.has(m) ? `<span class="hl-k">${k(m)}</span>` : k(m), p = u;
+      const f = e.slice(p, u);
+      c += r.has(f) ? `<span class="hl-k">${k(f)}</span>` : k(f), p = u;
       continue;
     }
-    if (a === "html" && f === "<" && p + 1 < g && /[a-zA-Z/!]/.test(e[p + 1])) {
+    if (a === "html" && h === "<" && 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;
         continue;
       }
     }
-    if (a === "css" && /[a-z-]/.test(f)) {
+    if (a === "css" && /[a-z-]/.test(h)) {
       let u = p + 1;
       for (; u < g && /[a-z-]/.test(e[u]); ) 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;
+      const f = e.slice(p, u);
+      e.slice(u).trimStart()[0] === ":" ? c += `<span class="hl-k">${k(f)}</span>` : c += k(f), p = u;
       continue;
     }
-    c += k(f), p++;
+    c += k(h), p++;
   }
   return c;
 }
@@ -2520,10 +2526,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, m) => {
-      const v = m + 1, $ = d.has(v) ? " line-hl" : "", _ = i ? `<span class="line-no">${v}</span>` : "";
+`).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(""), f = n ? `max-height: ${n}` : "";
+    }).join(""), h = n ? `max-height: ${n}` : "";
     return o`
       <div class="code-block" part="code">
         <div class="code-header" part="code-header">
@@ -2535,7 +2541,7 @@ let O = class extends y {
             @click=${this._copyCode}
           >${this._copied ? "Copied!" : "Copy"}</button>
         </div>
-        <div class="code-body" part="code-body" style=${f}>
+        <div class="code-body" part="code-body" style=${h}>
           <pre data-wrap=${String(s)}><code .innerHTML=${g}></code></pre>
         </div>
       </div>
@@ -2658,10 +2664,10 @@ O.styles = [b, w`
     }
   `];
 G([
-  h({ type: Object })
+  m({ type: Object })
 ], O.prototype, "spec", 2);
 G([
-  h({ type: String, reflect: !0 })
+  m({ type: String, reflect: !0 })
 ], O.prototype, "theme", 2);
 G([
   S()
@@ -2859,10 +2865,10 @@ N.styles = [b, w`
     }
   `];
 Q([
-  h({ type: Object })
+  m({ type: Object })
 ], N.prototype, "spec", 2);
 Q([
-  h({ type: String, reflect: !0 })
+  m({ type: String, reflect: !0 })
 ], N.prototype, "theme", 2);
 N = Q([
   x("u-citation")
@@ -2995,10 +3001,10 @@ F.styles = [b, w`
     }
   `];
 ee([
-  h({ type: Object })
+  m({ type: Object })
 ], F.prototype, "spec", 2);
 ee([
-  h({ type: String, reflect: !0 })
+  m({ type: String, reflect: !0 })
 ], F.prototype, "theme", 2);
 F = ee([
   x("u-status")
@@ -3321,10 +3327,10 @@ M.styles = [b, w`
     }
   `];
 te([
-  h({ type: Object })
+  m({ type: Object })
 ], M.prototype, "spec", 2);
 te([
-  h({ type: String, reflect: !0 })
+  m({ type: String, reflect: !0 })
 ], M.prototype, "theme", 2);
 M = te([
   x("u-steps")
@@ -3342,7 +3348,7 @@ const vt = {
   thumb: ["👍", "👍", "👍"]
   // 👍
 };
-let P = class extends y {
+let E = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null, this._hoverIdx = -1;
   }
@@ -3357,7 +3363,7 @@ let P = class extends y {
              @mouseleave=${i ? () => {
       this._hoverIdx = -1;
     } : void 0}>
-          ${Array.from({ length: r }, (g, f) => this._renderIcon(f, p, c, s, i))}
+          ${Array.from({ length: r }, (g, h) => this._renderIcon(h, 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}
@@ -3420,7 +3426,7 @@ let P = class extends y {
     return t === "heart" || t === "thumb" ? t : "star";
   }
 };
-P.styles = [b, w`
+E.styles = [b, w`
     :host {
       display: block;
       font-family: system-ui, -apple-system, sans-serif;
@@ -3527,17 +3533,17 @@ P.styles = [b, w`
     }
   `];
 X([
-  h({ type: Object })
-], P.prototype, "spec", 2);
+  m({ type: Object })
+], E.prototype, "spec", 2);
 X([
-  h({ type: String, reflect: !0 })
-], P.prototype, "theme", 2);
+  m({ type: String, reflect: !0 })
+], E.prototype, "theme", 2);
 X([
   S()
-], P.prototype, "_hoverIdx", 2);
-P = X([
+], E.prototype, "_hoverIdx", 2);
+E = X([
   x("u-rating")
-], P);
+], E);
 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);
@@ -3612,10 +3618,10 @@ T.styles = [b, w`
     }
   `];
 re([
-  h({ type: Object })
+  m({ type: Object })
 ], T.prototype, "spec", 2);
 re([
-  h({ type: String, reflect: !0 })
+  m({ type: String, reflect: !0 })
 ], T.prototype, "theme", 2);
 T = re([
   x("u-video")
@@ -3705,10 +3711,10 @@ U.styles = [b, w`
     }
   `];
 ae([
-  h({ type: Object })
+  m({ type: Object })
 ], U.prototype, "spec", 2);
 ae([
-  h({ type: String, reflect: !0 })
+  m({ type: String, reflect: !0 })
 ], U.prototype, "theme", 2);
 U = ae([
   x("u-gallery")
@@ -3718,7 +3724,7 @@ var $t = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, J = (e, t,
     (n = e[s]) && (i = (r ? n(t, a, i) : n(i)) || i);
   return r && i && $t(t, a, i), i;
 };
-let E = class extends y {
+let P = class extends y {
   constructor() {
     super(...arguments), this.spec = null, this.theme = null, this.locale = null, this._handleInternalEvent = (e) => {
       e.stopPropagation(), this.dispatchEvent(
@@ -3820,8 +3826,9 @@ let E = class extends y {
         }
         return this.renderFallback(r);
     }
-    if (!!r.options?.card && (c = o`<div class="card-container" part="card">${c}</div>`), d.length > 0) {
-      const g = d.map((f) => o`
+    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`
         <button
           data-style=${f.style ?? "default"}
           ?disabled=${f.disabled}
@@ -3829,7 +3836,7 @@ let E = class extends y {
           part="action-btn"
         >${f.label}</button>
       `);
-      return o`<div part="widget-container">${c}<div class="global-actions" part="actions">${g}</div></div>`;
+      return o`<div part="widget-container">${c}<div class="global-actions" part="actions">${u}</div></div>`;
     }
     return c;
   }
@@ -3890,7 +3897,7 @@ let E = class extends y {
     );
   }
   renderFallback(e) {
-    const t = Ee(e.widget);
+    const t = Pe(e.widget);
     return o`
       <div class="fallback-card" part="fallback">
         <div class="fallback-label">${e.title ?? `Unknown widget: ${e.widget}`}</div>
@@ -3913,7 +3920,7 @@ let E = class extends y {
     `;
   }
 };
-E.styles = [
+P.styles = [
   b,
   w`
       :host {
@@ -3994,6 +4001,14 @@ E.styles = [
         cursor: default;
       }
 
+      /* ── widget title ── */
+      .widget-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--u-widget-text, #1a1a2e);
+        margin: 0 0 8px 0;
+      }
+
       /* ── global action bar ── */
       .global-actions {
         display: flex;
@@ -4085,7 +4100,7 @@ E.styles = [
     `
 ];
 J([
-  h({
+  m({
     type: Object,
     converter: {
       fromAttribute(e) {
@@ -4098,22 +4113,22 @@ J([
       }
     }
   })
-], E.prototype, "spec", 2);
+], P.prototype, "spec", 2);
 J([
-  h({ type: String, reflect: !0 })
-], E.prototype, "theme", 2);
+  m({ type: String, reflect: !0 })
+], P.prototype, "theme", 2);
 J([
-  h({ type: String, reflect: !0 })
-], E.prototype, "locale", 2);
-E = J([
+  m({ type: String, reflect: !0 })
+], P.prototype, "locale", 2);
+P = J([
   x("u-widget")
-], E);
+], P);
 export {
-  E as UWidget,
+  P as UWidget,
   A as formatTemplate,
   pe as formatValue,
   Ot as getDefaultLocale,
-  Et as getEffectiveLocale,
+  Pt as getEffectiveLocale,
   be as getFormdownParser,
   ue as getLocaleStrings,
   we as infer,
@@ -4123,8 +4138,8 @@ export {
   Ft as registerFormdownParser,
   jt as registerLocale,
   Ie as resolveLocale,
-  Pt as setDefaultLocale,
-  Ee as suggestWidget,
+  Et as setDefaultLocale,
+  Pe as suggestWidget,
   Y as validate
 };
 //# sourceMappingURL=u-widgets.js.map