@iyulab/u-widgets 0.7.1 → 0.8.1

package/dist/u-widgets.js

@@ -1,7 +1,7 @@
 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 { t as b, n as ye } from "./tokens-D5aWvczs.js";
 import { css as w, LitElement as y, nothing as l, html as o } from "lit";
 import { property as f, customElement as x, state as S } from "lit/decorators.js";
 const xe = /* @__PURE__ */ new Set([
@@ -473,7 +473,7 @@ I.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-primary, #3b82f6); }
+    .metric[data-variant="info"]    .metric-value { color: var(--u-widget-primary, #4f46e5); }
     .metric[data-variant="neutral"] .metric-value { color: var(--u-widget-text-secondary, #64748b); }
 
     /* ── stat-group ── */
@@ -531,6 +531,7 @@ const Ue = {
   min: 0,
   max: 100,
   unit: "",
+  subtitle: "",
   thresholds: []
 }, Re = {
   green: "#16a34a",
@@ -562,25 +563,34 @@ let N = class extends y {
     const e = this.spec.data;
     return Number(e.value ?? 0);
   }
+  getActiveLabel(e, t) {
+    if (t.subtitle) return t.subtitle;
+    if (!t.thresholds?.length) return "";
+    const a = [...t.thresholds].sort((i, s) => i.to - s.to);
+    for (const i of a)
+      if (e <= i.to && i.label) return i.label;
+    return a[a.length - 1].label ?? "";
+  }
   renderGauge() {
-    const e = this.getOptions(), t = this.getValue(), a = e.max - e.min, r = a > 0 ? Math.max(0, Math.min(1, (t - e.min) / a)) : 0, i = this.getThresholdColor(t, e), s = 100, n = 100, d = 80, c = 150, p = 240, g = c + p * r, m = ue(s, n, d, c, c + p), u = r > 0 ? ue(s, n, d, c, g) : null, h = typeof this.spec.title == "string" ? this.spec.title : "Gauge", v = `${t}${e.unit}`;
+    const e = this.getOptions(), t = this.getValue(), 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 = this.getActiveLabel(t, e), n = 100, d = 100, c = 80, p = 150, g = 240, m = p + g * r, u = ue(n, d, c, p, p + g), h = r > 0 ? ue(n, d, c, p, m) : null, v = typeof this.spec.title == "string" ? this.spec.title : "Gauge", $ = s ? `${t}${e.unit} ${s}` : `${t}${e.unit}`;
     return o`
       <div class="gauge-container" part="gauge"
         role="meter"
         aria-valuenow=${t}
         aria-valuemin=${e.min}
         aria-valuemax=${e.max}
-        aria-label=${h}
-        aria-valuetext=${v}
+        aria-label=${v}
+        aria-valuetext=${$}
       >
         <div class="gauge-wrapper">
           <div class="gauge-center">
             <div class="gauge-value" part="value">${t}</div>
             ${e.unit ? o`<div class="gauge-unit" part="unit">${e.unit}</div>` : l}
+            ${s ? o`<div class="gauge-subtitle" part="subtitle" style="color:${i}">${s}</div>` : l}
           </div>
           <svg class="gauge-svg" viewBox="0 0 200 195" role="presentation" aria-hidden="true">
-            <path class="gauge-track" d="${m}" fill="none" stroke-width="12" stroke-linecap="round"></path>
-            <path class="gauge-fill" d="${u ?? "M0 0"}" fill="none" stroke="${u ? i : "none"}" stroke-width="12" stroke-linecap="round"></path>
+            <path class="gauge-track" d="${u}" fill="none" stroke-width="12" stroke-linecap="round"></path>
+            <path class="gauge-fill" d="${h ?? "M0 0"}" fill="none" stroke="${h ? i : "none"}" stroke-width="12" stroke-linecap="round"></path>
           </svg>
         </div>
       </div>
@@ -659,6 +669,7 @@ N.styles = [b, w`
       left: 50%;
       transform: translate(-50%, -50%);
       text-align: center;
+      width: 65%;
     }
 
     .gauge-value {
@@ -673,6 +684,17 @@ N.styles = [b, w`
       color: var(--u-widget-text-secondary, #64748b);
     }
 
+    .gauge-subtitle {
+      font-size: 0.6875rem;
+      font-weight: 600;
+      line-height: 1.2;
+      margin-top: 2px;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
     /* ── progress bar ── */
     .progress-container {
       display: flex;
@@ -710,6 +732,10 @@ N.styles = [b, w`
         font-size: 0.625rem;
       }
 
+      .gauge-subtitle {
+        font-size: 0.5625rem;
+      }
+
       .progress-info {
         font-size: 0.75rem;
       }
@@ -2175,26 +2201,26 @@ M.styles = [b, w`
     }
 
     .callout-info {
-      background: color-mix(in srgb, var(--u-widget-primary, #3b82f6) 12%, var(--u-widget-bg, #fff));
-      border-left-color: var(--u-widget-primary, #3b82f6);
+      background: color-mix(in srgb, var(--u-widget-primary, #4f46e5) 12%, var(--u-widget-bg, #fff));
+      border-left-color: var(--u-widget-primary, #4f46e5);
       color: var(--u-widget-text, #1a1a2e);
     }
 
     .callout-warning {
-      background: color-mix(in srgb, var(--u-widget-warning, #f59e0b) 12%, var(--u-widget-bg, #fff));
-      border-left-color: var(--u-widget-warning, #f59e0b);
+      background: color-mix(in srgb, var(--u-widget-warning, #d97706) 12%, var(--u-widget-bg, #fff));
+      border-left-color: var(--u-widget-warning, #d97706);
       color: var(--u-widget-text, #1a1a2e);
     }
 
     .callout-error {
-      background: color-mix(in srgb, var(--u-widget-negative, #ef4444) 12%, var(--u-widget-bg, #fff));
-      border-left-color: var(--u-widget-negative, #ef4444);
+      background: color-mix(in srgb, var(--u-widget-negative, #dc2626) 12%, var(--u-widget-bg, #fff));
+      border-left-color: var(--u-widget-negative, #dc2626);
       color: var(--u-widget-text, #1a1a2e);
     }
 
     .callout-success {
-      background: color-mix(in srgb, var(--u-widget-positive, #22c55e) 12%, var(--u-widget-bg, #fff));
-      border-left-color: var(--u-widget-positive, #22c55e);
+      background: color-mix(in srgb, var(--u-widget-positive, #16a34a) 12%, var(--u-widget-bg, #fff));
+      border-left-color: var(--u-widget-positive, #16a34a);
       color: var(--u-widget-text, #1a1a2e);
     }
 
@@ -2994,7 +3020,7 @@ R.styles = [b, w`
     /* Level colors */
     [data-level="info"] .status-icon,
     [data-level="info"] .status-value {
-      color: var(--u-widget-primary, #3b82f6);
+      color: var(--u-widget-primary, #4f46e5);
     }
     [data-level="success"] .status-icon,
     [data-level="success"] .status-value {
@@ -3002,7 +3028,7 @@ R.styles = [b, w`
     }
     [data-level="warning"] .status-icon,
     [data-level="warning"] .status-value {
-      color: var(--u-widget-warning, #f59e0b);
+      color: var(--u-widget-warning, #d97706);
     }
     [data-level="error"] .status-icon,
     [data-level="error"] .status-value {
@@ -3949,12 +3975,12 @@ P.styles = [
       .error-card {
         padding: 10px 14px;
         border-radius: 6px;
-        border: 1px solid var(--u-widget-negative, #ef4444);
-        background: color-mix(in srgb, var(--u-widget-negative, #ef4444) 8%, var(--u-widget-bg, #fff));
+        border: 1px solid var(--u-widget-negative, #dc2626);
+        background: color-mix(in srgb, var(--u-widget-negative, #dc2626) 8%, var(--u-widget-bg, #fff));
         font-size: 0.8125rem;
       }
 
-      .error-header { font-weight: 600; color: var(--u-widget-negative, #ef4444); margin-bottom: 4px; }
+      .error-header { font-weight: 600; color: var(--u-widget-negative, #dc2626); margin-bottom: 4px; }
       .error-list { margin: 0; padding-left: 20px; color: var(--u-widget-text-secondary, #64748b); }
 
       .fallback-card {