@editora/ui-core 0.1.24 → 0.2.0

package/dist/chart.esm.js

@@ -1,9 +1,9 @@
 import { E as Y } from "./ElementBase-BeZT54Hj.mjs";
 const V = 180, Z = `
   :host {
-    --ui-chart-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    --ui-chart-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-chart-surface: color-mix(in srgb, var(--ui-color-surface, #ffffff) 97%, #ffffff 3%);
-    --ui-chart-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-chart-border: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
     --ui-chart-text: var(--ui-color-text, #0f172a);
     --ui-chart-muted: var(--ui-color-muted, #526175);
     --ui-chart-grid: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 45%, transparent);
@@ -11,7 +11,7 @@ const V = 180, Z = `
     --ui-chart-success: var(--ui-color-success, #15803d);
     --ui-chart-warning: var(--ui-color-warning, #b45309);
     --ui-chart-danger: var(--ui-color-danger, #dc2626);
-    --ui-chart-radius: 16px;
+    --ui-chart-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-chart-shadow: none;
     --ui-chart-plot-height: 220px;
     --ui-chart-plot-min-height: 188px;
@@ -28,7 +28,7 @@ const V = 180, Z = `
     position: relative;
     border: 1px solid var(--ui-chart-border);
     border-radius: var(--ui-chart-radius);
-    background: linear-gradient(160deg, var(--ui-chart-surface), var(--ui-chart-bg));
+    background: var(--ui-chart-bg);
     color: var(--ui-chart-text);
     box-shadow: var(--ui-chart-shadow);
     padding: 16px;
@@ -77,8 +77,8 @@ const V = 180, Z = `
     display: grid;
     gap: 10px;
     padding: 10px 12px;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 82%, transparent);
-    border-radius: 12px;
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     background: color-mix(in srgb, var(--ui-chart-surface) 96%, transparent);
   }
 
@@ -99,7 +99,7 @@ const V = 180, Z = `
   .title {
     font-size: 15px;
     line-height: 1.35;
-    font-weight: 700;
+    font-weight: 600;
     letter-spacing: 0.01em;
     margin: 0;
   }
@@ -120,7 +120,7 @@ const V = 180, Z = `
     margin: 0;
     font-size: 15px;
     line-height: 1.35;
-    font-weight: 700;
+    font-weight: 600;
     letter-spacing: 0.01em;
     color: var(--ui-chart-text);
   }
@@ -140,7 +140,7 @@ const V = 180, Z = `
     min-block-size: 24px;
     padding: 0 10px;
     border-radius: 999px;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 88%, transparent);
+    border: 1px solid transparent;
     background: color-mix(in srgb, var(--ui-chart-surface) 92%, transparent);
     font-size: 11px;
     line-height: 1;
@@ -150,19 +150,19 @@ const V = 180, Z = `
   }
 
   .status-pill[data-state="success"] {
-    color: var(--ui-chart-success);
+    color: color-mix(in srgb, var(--ui-chart-success) 74%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-success) 35%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-success) 13%, transparent);
   }
 
   .status-pill[data-state="error"] {
-    color: var(--ui-chart-danger);
+    color: color-mix(in srgb, var(--ui-chart-danger) 74%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-danger) 35%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-danger) 12%, transparent);
   }
 
   .status-pill[data-state="loading"] {
-    color: var(--ui-chart-warning);
+    color: color-mix(in srgb, var(--ui-chart-warning) 74%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-warning) 32%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-warning) 10%, transparent);
   }
@@ -174,8 +174,8 @@ const V = 180, Z = `
   }
 
   .metric {
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 82%, transparent);
-    border-radius: 10px;
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     padding: 8px 10px;
     background: color-mix(in srgb, var(--ui-chart-surface) 95%, transparent);
     min-inline-size: 0;
@@ -194,26 +194,26 @@ const V = 180, Z = `
   .metric-value {
     font-size: 14px;
     line-height: 1.2;
-    font-weight: 700;
+    font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .metric-value[data-tone="up"] {
-    color: var(--ui-chart-success);
+    color: color-mix(in srgb, var(--ui-chart-success) 68%, var(--ui-chart-text));
   }
 
   .metric-value[data-tone="down"] {
-    color: var(--ui-chart-danger);
+    color: color-mix(in srgb, var(--ui-chart-danger) 68%, var(--ui-chart-text));
   }
 
   .plot-shell {
     position: relative;
     inline-size: 100%;
     min-inline-size: 0;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 80%, transparent);
-    border-radius: 12px;
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     background: color-mix(in srgb, var(--ui-chart-surface) 97%, transparent);
     min-block-size: var(--ui-chart-plot-min-height);
     block-size: var(--ui-chart-plot-height);
@@ -358,8 +358,8 @@ const V = 180, Z = `
     min-inline-size: 132px;
     max-inline-size: min(220px, calc(100% - 16px));
     padding: 10px 12px;
-    border-radius: 12px;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 86%, transparent);
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    border: 1px solid transparent;
     background: color-mix(in srgb, var(--ui-chart-surface) 98%, transparent);
     box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
     color: var(--ui-chart-text);
@@ -372,7 +372,7 @@ const V = 180, Z = `
   .tooltip-title {
     font-size: 12px;
     line-height: 1.2;
-    font-weight: 700;
+    font-weight: 600;
   }
 
   .tooltip-list {
@@ -405,7 +405,7 @@ const V = 180, Z = `
   }
 
   .tooltip-value {
-    font-weight: 700;
+    font-weight: 600;
     color: var(--ui-chart-text);
     white-space: nowrap;
   }
@@ -415,8 +415,8 @@ const V = 180, Z = `
     align-items: center;
     justify-content: space-between;
     gap: 10px;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
-    border-radius: 10px;
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     padding: 8px 10px;
     font-size: 12px;
     line-height: 1.35;
@@ -426,7 +426,7 @@ const V = 180, Z = `
 
   .insight strong {
     color: var(--ui-chart-text);
-    font-weight: 700;
+    font-weight: 600;
   }
 
   .legend {
@@ -436,9 +436,9 @@ const V = 180, Z = `
   }
 
   .legend-item {
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
+    border: 1px solid transparent;
     background: color-mix(in srgb, var(--ui-chart-surface) 94%, transparent);
-    border-radius: 10px;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     min-block-size: 30px;
     display: inline-flex;
     align-items: center;
@@ -481,7 +481,7 @@ const V = 180, Z = `
   .empty,
   .message {
     border: 1px dashed color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
-    border-radius: 10px;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     padding: 14px;
     text-align: center;
     font-size: 12px;
@@ -490,13 +490,13 @@ const V = 180, Z = `
   }
 
   .message[data-tone="error"] {
-    color: var(--ui-chart-danger);
+    color: color-mix(in srgb, var(--ui-chart-danger) 68%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-danger) 30%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-danger) 10%, transparent);
   }
 
   .message[data-tone="success"] {
-    color: var(--ui-chart-success);
+    color: color-mix(in srgb, var(--ui-chart-success) 68%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-success) 30%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-success) 10%, transparent);
   }
@@ -639,11 +639,11 @@ function J(p, t, e) {
           if (o && typeof o == "object") {
             const n = Number(o.value);
             if (!Number.isFinite(n)) return null;
-            const d = o.label, u = o.tone;
+            const u = o.label, d = o.tone;
             return {
-              label: typeof d == "string" && d.trim() ? d.trim() : String(s + 1),
+              label: typeof u == "string" && u.trim() ? u.trim() : String(s + 1),
               value: n,
-              tone: typeof u == "string" && u.trim() ? u.trim() : void 0
+              tone: typeof d == "string" && d.trim() ? d.trim() : void 0
             };
           }
           return null;
@@ -682,14 +682,14 @@ function Q(p) {
       if (!a || typeof a != "object") return null;
       const i = a.name, o = G(a.data);
       if (!o.length) return null;
-      const s = a.tone, n = a.dash, d = Number(a.strokeWidth), u = Number(a.opacity), T = a.fill;
+      const s = a.tone, n = a.dash, u = Number(a.strokeWidth), d = Number(a.opacity), T = a.fill;
       return {
         name: typeof i == "string" && i.trim() ? i.trim() : `Series ${r + 1}`,
         data: o,
         tone: typeof s == "string" && s.trim() ? s.trim() : void 0,
         dash: typeof n == "string" && n.trim() ? n.trim() : void 0,
-        strokeWidth: Number.isFinite(d) && d > 0 ? d : void 0,
-        opacity: Number.isFinite(u) && u > 0 ? u : void 0,
+        strokeWidth: Number.isFinite(u) && u > 0 ? u : void 0,
+        opacity: Number.isFinite(d) && d > 0 ? d : void 0,
         fill: typeof T == "boolean" ? T : void 0
       };
     }).filter((a) => !!a) : [];
@@ -709,28 +709,28 @@ function tt(p) {
 }
 function et(p, t) {
   const a = (p.length ? p : t.length ? [{ name: "Series 1", data: t }] : []).map((n) => {
-    const d = tt(n.data);
+    const u = tt(n.data);
     return {
       name: n.name,
-      data: d.points,
+      data: u.points,
       tone: n.tone,
       fill: n.fill,
       dash: n.dash,
       strokeWidth: n.strokeWidth,
       opacity: n.opacity,
-      truncated: d.truncated
+      truncated: u.truncated
     };
   }).filter((n) => n.data.length > 0), r = /* @__PURE__ */ new Set();
   a.forEach((n) => {
-    n.data.forEach((d) => r.add(d.label));
+    n.data.forEach((u) => r.add(u.label));
   });
-  let i = Array.from(r), o = a.reduce((n, d) => Math.max(n, d.truncated), 0);
+  let i = Array.from(r), o = a.reduce((n, u) => Math.max(n, u.truncated), 0);
   i.length > V && (o += i.length - V, i = i.slice(i.length - V));
   const s = a.map((n) => {
-    const d = new Set(i);
+    const u = new Set(i);
     return {
       name: n.name,
-      data: n.data.filter((u) => d.has(u.label)),
+      data: n.data.filter((d) => u.has(d.label)),
       tone: n.tone,
       fill: n.fill,
       dash: n.dash,
@@ -816,23 +816,23 @@ class it extends Y {
     return this.getAttribute("value-suffix") || "";
   }
   _resolveStats(t) {
-    const e = t.map((u) => u.value), a = e.reduce((u, T) => u + T, 0), r = e.length ? a / e.length : 0, i = e.length ? Math.min(...e) : 0, o = e.length ? Math.max(...e) : 0, s = e.length > 1 ? e[e.length - 1] - e[0] : 0, n = e[0] || 0, d = n !== 0 ? s / Math.abs(n) * 100 : null;
-    return { total: a, average: r, min: i, max: o, delta: s, deltaPct: d };
+    const e = t.map((d) => d.value), a = e.reduce((d, T) => d + T, 0), r = e.length ? a / e.length : 0, i = e.length ? Math.min(...e) : 0, o = e.length ? Math.max(...e) : 0, s = e.length > 1 ? e[e.length - 1] - e[0] : 0, n = e[0] || 0, u = n !== 0 ? s / Math.abs(n) * 100 : null;
+    return { total: a, average: r, min: i, max: o, delta: s, deltaPct: u };
   }
   _valueDomain(t, e) {
-    const a = !!e?.includeZero, r = e?.fitPadding ?? 0.14, i = t.map((u) => u.value);
+    const a = !!e?.includeZero, r = e?.fitPadding ?? 0.14, i = t.map((d) => d.value);
     let o = Math.min(...i), s = Math.max(...i);
     a && (o = Math.min(0, o), s = Math.max(0, s));
     let n = s - o;
     if (n <= 0) {
-      const u = Math.max(Math.abs(s) * 0.12, 1);
-      o -= u, s += u, n = s - o;
+      const d = Math.max(Math.abs(s) * 0.12, 1);
+      o -= d, s += d, n = s - o;
     } else {
-      const u = n * r;
-      a ? (o -= u * 0.25, s += u) : (o -= u, s += u), n = s - o;
+      const d = n * r;
+      a ? (o -= d * 0.25, s += d) : (o -= d, s += d), n = s - o;
     }
-    const d = o <= 0 && s >= 0;
-    return { min: o, max: s, span: n, zeroInDomain: d };
+    const u = o <= 0 && s >= 0;
+    return { min: o, max: s, span: n, zeroInDomain: u };
   }
   _formatValue(t, e) {
     const a = this._valuePrefix(), r = this._valueSuffix();
@@ -868,16 +868,16 @@ class it extends Y {
     if (!i) return null;
     const o = e.labels[t];
     if (!o) return null;
-    const s = i.data.find((u) => u.label === o) || i.data[t];
+    const s = i.data.find((d) => d.label === o) || i.data[t];
     if (!s) return null;
-    const n = this._resolveStats(i.data), d = this._seriesValueDetails(e.labels, e.series, t);
+    const n = this._resolveStats(i.data), u = this._seriesValueDetails(e.labels, e.series, t);
     return {
       index: t,
       label: o,
       value: s.value,
       tone: s.tone || this._seriesTone(i, 0),
       series: i.name,
-      seriesValues: d,
+      seriesValues: u,
       type: a,
       total: n.total,
       min: n.min,
@@ -989,11 +989,11 @@ class it extends Y {
     return [1, 0.75, 0.5, 0.25, 0].map((a) => this._formatValue(t + (e - t) * a));
   }
   _plotCartesian(t, e, a) {
-    const $ = t.labels, P = t.series, w = e === "bar", b = P.flatMap((g) => g.data.map((x) => x.value)), y = this._valueDomain(b.map((g, x) => ({ label: String(x), value: g })), { includeZero: w }), F = y.min, l = y.max, v = y.span, f = $.length > 1 ? 208 / ($.length - 1) : 0, S = y.zeroInDomain ? 0 : F, h = 6 + (l - S) / v * 48, k = [0, 0.25, 0.5, 0.75, 1].map((g) => {
+    const $ = t.labels, P = t.series, w = e === "bar", v = P.flatMap((g) => g.data.map((x) => x.value)), y = this._valueDomain(v.map((g, x) => ({ label: String(x), value: g })), { includeZero: w }), F = y.min, l = y.max, b = y.span, f = $.length > 1 ? 208 / ($.length - 1) : 0, S = y.zeroInDomain ? 0 : F, h = 6 + (l - S) / b * 48, k = [0, 0.25, 0.5, 0.75, 1].map((g) => {
       const x = 6 + 48 * g, I = y.zeroInDomain && Math.abs(x - h) < 0.5;
       return `<line x1="8" y1="${x.toFixed(2)}" x2="${216 .toFixed(2)}" y2="${x.toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="${I ? "0.75" : "0.45"}" />`;
     }).join(""), L = P.map((g) => new Map(g.data.map((x) => [x.label, x]))), j = $.map((g, x) => {
-      const I = 8 + f * x, D = L.map((z) => z.get(g)).filter((z) => !!z).map((z) => 6 + (l - z.value) / v * 48), C = D.length ? Math.min(...D) : 6 + 48 / 2;
+      const I = 8 + f * x, D = L.map((z) => z.get(g)).filter((z) => !!z).map((z) => 6 + (l - z.value) / b * 48), C = D.length ? Math.min(...D) : 6 + 48 / 2;
       return {
         xPct: M(I / 220 * 100, 0, 100),
         yPct: M(C / 64 * 100, 0, 100)
@@ -1008,7 +1008,7 @@ class it extends Y {
         return $.map((O, H) => {
           const W = L[z].get(O);
           if (!W) return "";
-          const m = 8 + H * g + (g - x) / 2 + I * z, _ = 6 + (l - W.value) / v * 48, A = Math.min(_, h), R = Math.max(1, Math.abs(h - _)), B = a === H, X = a == null || B ? C.opacity ?? 1 : 0.72;
+          const m = 8 + H * g + (g - x) / 2 + I * z, _ = 6 + (l - W.value) / b * 48, A = Math.min(_, h), R = Math.max(1, Math.abs(h - _)), B = a === H, X = a == null || B ? C.opacity ?? 1 : 0.72;
           return `<rect x="${m.toFixed(2)}" y="${A.toFixed(2)}" width="${Math.max(2, I - 1).toFixed(2)}" height="${R.toFixed(2)}" rx="1.4" fill="${c(N)}" opacity="${X}" />`;
         }).join("");
       }).join("");
@@ -1026,7 +1026,7 @@ class it extends Y {
     }
     const U = P.map((g, x) => {
       const I = this._seriesTone(g, x), D = $.map((m, _) => {
-        const A = L[x].get(m) || null, R = 8 + f * _, B = A ? 6 + (l - A.value) / v * 48 : null;
+        const A = L[x].get(m) || null, R = 8 + f * _, B = A ? 6 + (l - A.value) / b * 48 : null;
         return { x: R, y: B, point: A, index: _ };
       }), C = [];
       let z = [];
@@ -1061,21 +1061,21 @@ class it extends Y {
     };
   }
   _plotRadial(t, e) {
-    const n = t.map((l) => l.value), d = Math.min(...n), u = Math.max(...n), T = Math.max(1, u - d), $ = t.map((l, v) => {
-      const f = -Math.PI / 2 + Math.PI * 2 * v / t.length, h = 10 + (l.value - d) / T * 18, k = 32 + Math.cos(f) * h, L = 32 + Math.sin(f) * h;
-      return { x: k, y: L, point: l, index: v, angle: f };
-    }), P = $.map((l, v) => `${v === 0 ? "M" : "L"}${l.x.toFixed(2)} ${l.y.toFixed(2)}`).join(" ") + " Z", w = [0.25, 0.5, 0.75, 1].map((l) => `<circle cx="32" cy="32" r="${(10 + l * 18).toFixed(2)}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""), b = $.map((l) => `<line x1="32" y1="32" x2="${(32 + Math.cos(l.angle) * 28).toFixed(2)}" y2="${(32 + Math.sin(l.angle) * 28).toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""), y = $.map((l) => {
-      const v = this._pointTone(l.point, l.index), f = e === l.index;
-      return `<circle cx="${l.x.toFixed(2)}" cy="${l.y.toFixed(2)}" r="${f ? "2.35" : "1.85"}" fill="${c(v)}" opacity="${e == null || f ? "1" : "0.74"}" />`;
+    const n = t.map((l) => l.value), u = Math.min(...n), d = Math.max(...n), T = Math.max(1, d - u), $ = t.map((l, b) => {
+      const f = -Math.PI / 2 + Math.PI * 2 * b / t.length, h = 10 + (l.value - u) / T * 18, k = 32 + Math.cos(f) * h, L = 32 + Math.sin(f) * h;
+      return { x: k, y: L, point: l, index: b, angle: f };
+    }), P = $.map((l, b) => `${b === 0 ? "M" : "L"}${l.x.toFixed(2)} ${l.y.toFixed(2)}`).join(" ") + " Z", w = [0.25, 0.5, 0.75, 1].map((l) => `<circle cx="32" cy="32" r="${(10 + l * 18).toFixed(2)}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""), v = $.map((l) => `<line x1="32" y1="32" x2="${(32 + Math.cos(l.angle) * 28).toFixed(2)}" y2="${(32 + Math.sin(l.angle) * 28).toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""), y = $.map((l) => {
+      const b = this._pointTone(l.point, l.index), f = e === l.index;
+      return `<circle cx="${l.x.toFixed(2)}" cy="${l.y.toFixed(2)}" r="${f ? "2.35" : "1.85"}" fill="${c(b)}" opacity="${e == null || f ? "1" : "0.74"}" />`;
     }).join(""), F = $.map((l) => {
-      const v = M(l.x / 64 * 100, 0, 100).toFixed(3), f = M(l.y / 64 * 100, 0, 100).toFixed(3), S = e === l.index, h = `${l.point.label}: ${this._formatValue(l.point.value)}`;
-      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${l.index}" data-active="${S ? "true" : "false"}" style="--x:${v};--y:${f};" aria-label="${c(h)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
+      const b = M(l.x / 64 * 100, 0, 100).toFixed(3), f = M(l.y / 64 * 100, 0, 100).toFixed(3), S = e === l.index, h = `${l.point.label}: ${this._formatValue(l.point.value)}`;
+      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${l.index}" data-active="${S ? "true" : "false"}" style="--x:${b};--y:${f};" aria-label="${c(h)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
     }).join("");
     return {
       svg: `
         <svg class="plot" part="plot" viewBox="0 0 64 64" width="100%" height="100%" role="img" aria-label="${c(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
           ${w}
-          ${b}
+          ${v}
           <path d="${P}" fill="color-mix(in srgb, var(--ui-chart-accent) 16%, transparent)" stroke="var(--ui-chart-accent)" stroke-width="1.2" />
           ${y}
         </svg>
@@ -1089,32 +1089,32 @@ class it extends Y {
     };
   }
   _plotDonut(t, e) {
-    const a = t.reduce((w, b) => w + Math.max(0, b.value), 0), r = Math.max(1, a), i = 18, o = 7, s = 32, n = 32, d = 2 * Math.PI * i;
-    let u = 0;
-    const T = t.map((w, b) => {
-      const l = Math.max(0, w.value) / r * d, v = this._pointTone(w, b), f = e === b, S = e == null || f ? "1" : "0.7", h = `
+    const a = t.reduce((w, v) => w + Math.max(0, v.value), 0), r = Math.max(1, a), i = 18, o = 7, s = 32, n = 32, u = 2 * Math.PI * i;
+    let d = 0;
+    const T = t.map((w, v) => {
+      const l = Math.max(0, w.value) / r * u, b = this._pointTone(w, v), f = e === v, S = e == null || f ? "1" : "0.7", h = `
           <circle
             cx="${s}"
             cy="${n}"
             r="${i}"
             fill="none"
-            stroke="${c(v)}"
+            stroke="${c(b)}"
             stroke-width="${f ? o + 0.8 : o}"
-            stroke-dasharray="${l.toFixed(3)} ${(d - l).toFixed(3)}"
-            stroke-dashoffset="${(-u).toFixed(3)}"
+            stroke-dasharray="${l.toFixed(3)} ${(u - l).toFixed(3)}"
+            stroke-dashoffset="${(-d).toFixed(3)}"
             transform="rotate(-90 ${s} ${n})"
             stroke-linecap="round"
             opacity="${S}"
           />
         `;
-      return u += l, h;
+      return d += l, h;
     }).join("");
     let $ = 0;
-    const P = t.map((w, b) => {
-      const y = Math.max(0, w.value), l = y / r * Math.PI * 2, v = -Math.PI / 2 + $ + l / 2, f = s + Math.cos(v) * (i + 6), S = n + Math.sin(v) * (i + 6);
+    const P = t.map((w, v) => {
+      const y = Math.max(0, w.value), l = y / r * Math.PI * 2, b = -Math.PI / 2 + $ + l / 2, f = s + Math.cos(b) * (i + 6), S = n + Math.sin(b) * (i + 6);
       $ += l;
-      const h = M(f / 64 * 100, 0, 100).toFixed(3), k = M(S / 64 * 100, 0, 100).toFixed(3), L = e === b, j = r > 0 ? y / r * 100 : 0, E = `${w.label}: ${this._formatValue(w.value)} (${this._formatValue(j, { maximumFractionDigits: 1 })}%)`;
-      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${b}" data-active="${L ? "true" : "false"}" style="--x:${h};--y:${k};" aria-label="${c(E)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
+      const h = M(f / 64 * 100, 0, 100).toFixed(3), k = M(S / 64 * 100, 0, 100).toFixed(3), L = e === v, j = r > 0 ? y / r * 100 : 0, E = `${w.label}: ${this._formatValue(w.value)} (${this._formatValue(j, { maximumFractionDigits: 1 })}%)`;
+      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${v}" data-active="${L ? "true" : "false"}" style="--x:${h};--y:${k};" aria-label="${c(E)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
     }).join("");
     return {
       svg: `
@@ -1126,11 +1126,11 @@ class it extends Y {
         </svg>
       `,
       hits: P,
-      anchors: t.map((w, b) => {
+      anchors: t.map((w, v) => {
         let y = 0;
-        for (let F = 0; F <= b; F += 1) {
+        for (let F = 0; F <= v; F += 1) {
           const f = Math.max(0, t[F].value) / r * Math.PI * 2;
-          if (F === b) {
+          if (F === v) {
             const S = -Math.PI / 2 + y + f / 2, h = s + Math.cos(S) * (i + 6), k = n + Math.sin(S) * (i + 6);
             return {
               xPct: M(h / 64 * 100, 0, 100),
@@ -1188,11 +1188,11 @@ class it extends Y {
     if (!e) return "";
     const a = this._activeIndex;
     if (a == null || !t.labels[a]) {
-      const s = this._resolveStats(e.data), n = s.delta > 0 ? "up" : s.delta < 0 ? "down" : "flat", d = `${s.delta >= 0 ? "+" : ""}${this._formatValue(s.delta)}${s.deltaPct == null ? "" : ` (${s.deltaPct >= 0 ? "+" : ""}${this._formatValue(s.deltaPct, { maximumFractionDigits: 1 })}%)`}`;
+      const s = this._resolveStats(e.data), n = s.delta > 0 ? "up" : s.delta < 0 ? "down" : "flat", u = `${s.delta >= 0 ? "+" : ""}${this._formatValue(s.delta)}${s.deltaPct == null ? "" : ` (${s.deltaPct >= 0 ? "+" : ""}${this._formatValue(s.deltaPct, { maximumFractionDigits: 1 })}%)`}`;
       return `
         <div class="insight" part="insight">
           <span>Range <strong>${this._formatValue(s.min)}</strong> to <strong>${this._formatValue(s.max)}</strong></span>
-          <strong data-tone="${n}">${c(d)}</strong>
+          <strong data-tone="${n}">${c(u)}</strong>
         </div>
       `;
     }
@@ -1205,7 +1205,7 @@ class it extends Y {
     `;
   }
   render() {
-    const t = this._data(), e = this._primarySeries(t), a = this._type(), r = this._state(), i = this._isDisabled(), o = this._isInteractive(), s = (this.getAttribute("title") || "").trim(), n = (this.getAttribute("subtitle") || "").trim(), d = this._showLegend(), u = this._showSummary(), T = this._hasToolbarSlot(), $ = this._hasSlot("title"), P = this._hasSlot("subtitle"), w = $ || P || !!s || !!n || r !== "idle";
+    const t = this._data(), e = this._primarySeries(t), a = this._type(), r = this._state(), i = this._isDisabled(), o = this._isInteractive(), s = (this.getAttribute("title") || "").trim(), n = (this.getAttribute("subtitle") || "").trim(), u = this._showLegend(), d = this._showSummary(), T = this._hasToolbarSlot(), $ = this._hasSlot("title"), P = this._hasSlot("subtitle"), w = $ || P || !!s || !!n || r !== "idle";
     if (!e || !t.labels.length) {
       const h = r === "error" ? "Chart data failed to load" : "No series data available";
       this.setContent(`
@@ -1227,7 +1227,7 @@ class it extends Y {
       return;
     }
     this._activeIndex != null && (this._activeIndex < 0 || this._activeIndex >= t.labels.length) && (this._activeIndex = null, this._activePinned = !1);
-    const b = this._resolveStats(e.data), y = this._plot(t, a, this._activeIndex), F = this._axisXLabels(t.labels), l = t.series.length > 1 ? t.series.map(
+    const v = this._resolveStats(e.data), y = this._plot(t, a, this._activeIndex), F = this._axisXLabels(t.labels), l = t.series.length > 1 ? t.series.map(
       (h, k) => `
               <div class="legend-item" aria-label="${c(h.name)}">
                 <span class="legend-dot" style="--dot:${c(this._seriesTone(h, k))};"></span>
@@ -1250,7 +1250,7 @@ class it extends Y {
                 <span>${c(h.label)}</span>
               </button>
             `;
-    }).join(""), v = b.delta > 0 ? "up" : b.delta < 0 ? "down" : "flat", f = `${b.delta >= 0 ? "+" : ""}${this._formatValue(b.delta)}`, S = r === "error" ? '<div class="message" part="message" data-tone="error">Data source returned partial metrics. Review upstream mapping.</div>' : r === "success" ? '<div class="message" part="message" data-tone="success">Data pipeline healthy. All metrics are up to date.</div>' : "";
+    }).join(""), b = v.delta > 0 ? "up" : v.delta < 0 ? "down" : "flat", f = `${v.delta >= 0 ? "+" : ""}${this._formatValue(v.delta)}`, S = r === "error" ? '<div class="message" part="message" data-tone="error">Data source returned partial metrics. Review upstream mapping.</div>' : r === "success" ? '<div class="message" part="message" data-tone="success">Data pipeline healthy. All metrics are up to date.</div>' : "";
     this.setContent(`
       <style>${Z}</style>
       <section
@@ -1274,23 +1274,23 @@ class it extends Y {
           <span class="status-pill" data-state="${r}">${K(r)}</span>
         </header>
 
-        ${u ? `
+        ${d ? `
           <section class="summary" part="summary">
             <div class="metric" part="metric">
               <span class="metric-label">Total</span>
-              <span class="metric-value">${c(this._formatValue(b.total))}</span>
+              <span class="metric-value">${c(this._formatValue(v.total))}</span>
             </div>
             <div class="metric" part="metric">
               <span class="metric-label">Average</span>
-              <span class="metric-value">${c(this._formatValue(b.average))}</span>
+              <span class="metric-value">${c(this._formatValue(v.average))}</span>
             </div>
             <div class="metric" part="metric">
               <span class="metric-label">Peak</span>
-              <span class="metric-value">${c(this._formatValue(b.max))}</span>
+              <span class="metric-value">${c(this._formatValue(v.max))}</span>
             </div>
             <div class="metric" part="metric">
               <span class="metric-label">Delta</span>
-              <span class="metric-value" data-tone="${v}">${c(f)}</span>
+              <span class="metric-value" data-tone="${b}">${c(f)}</span>
             </div>
           </section>
         ` : ""}
@@ -1320,7 +1320,7 @@ class it extends Y {
 
         ${this._activeInsight(t)}
 
-        ${d ? `<section class="legend" part="legend">${l}</section>` : ""}
+        ${u ? `<section class="legend" part="legend">${l}</section>` : ""}
 
         ${t.truncated > 0 ? `<div class="message" part="message">Showing last ${t.truncated + t.labels.length} records (truncated to ${V}).</div>` : ""}
 

package/dist/checkbox.cjs.js

@@ -1,22 +1,22 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./ElementBase-DxbvhLJs.js"),n=`
   :host {
-    --ui-checkbox-size: 18px;
+    --ui-checkbox-size: 16px;
     --ui-checkbox-hit-area: 24px;
-    --ui-checkbox-radius: 4px;
-    --ui-checkbox-border: 1.5px solid color-mix(in srgb, var(--ui-primary, var(--ui-color-primary, #2563eb)) 44%, var(--ui-color-border, #cbd5e1) 56%);
-    --ui-checkbox-background: var(--ui-bg, var(--ui-color-surface, #ffffff));
-    --ui-checkbox-check-color: #ffffff;
+    --ui-checkbox-radius: calc(var(--ui-radius, 6px) - 2px);
+    --ui-checkbox-border: 1px solid var(--ui-color-line-strong, var(--ui-color-border, #cbd5e1));
+    --ui-checkbox-background: var(--ui-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-checkbox-check-color: var(--ui-color-foreground-on-primary, #ffffff);
     --ui-checkbox-checked-background: var(--ui-primary, var(--ui-color-primary, #2563eb));
-    --ui-checkbox-checked-border: var(--ui-checkbox-border);
-    --ui-checkbox-indeterminate-bg: #d97706;
-    --ui-checkbox-indeterminate-border: 1.5px solid color-mix(in srgb, #d97706 72%, #78350f 28%);
-    --ui-checkbox-invalid-border: 1.5px solid var(--ui-color-danger, #dc2626);
-    --ui-checkbox-invalid-focus: 0 0 0 4px color-mix(in srgb, var(--ui-color-danger, #dc2626) 24%, transparent);
-    --ui-checkbox-focus: 0 0 0 4px color-mix(in srgb, var(--ui-color-focus-ring, #2563eb) 26%, transparent);
+    --ui-checkbox-checked-border: 1px solid var(--ui-checkbox-checked-background);
+    --ui-checkbox-indeterminate-bg: var(--ui-checkbox-checked-background);
+    --ui-checkbox-indeterminate-border: 1px solid var(--ui-checkbox-checked-background);
+    --ui-checkbox-invalid-border: 1px solid var(--ui-color-danger, #dc2626);
+    --ui-checkbox-invalid-focus: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-color-danger, #dc2626);
+    --ui-checkbox-focus: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
     --ui-checkbox-shadow: none;
     --ui-checkbox-shadow-checked: none;
     --ui-checkbox-disabled-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f1f5f9) 88%, #ffffff 12%);
-    --ui-checkbox-disabled-border: 1.5px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-checkbox-disabled-border: 1px solid var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-checkbox-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-checkbox-muted: var(--ui-color-muted, #526175);
     --ui-checkbox-duration: 170ms;
@@ -208,9 +208,13 @@
     box-shadow: var(--ui-checkbox-focus);
   }
 
-  :host(:not([disabled]):not([loading]):hover) .control {
-    transform: translateY(-0.5px);
-    border-color: color-mix(in srgb, var(--ui-primary, var(--ui-color-primary, #2563eb)) 80%, #0f172a 20%);
+  :host(:not([disabled]):not([loading]):not([checked]):not([indeterminate]):hover) .control {
+    border-color: var(--ui-color-text-secondary, #64748b);
+  }
+
+  :host(:not([disabled]):not([loading])[checked]:hover) .control,
+  :host(:not([disabled]):not([loading])[indeterminate]:hover) .control {
+    background: color-mix(in srgb, var(--ui-checkbox-checked-background) 88%, var(--ui-color-text-strong, #0f172a));
   }
 
   :host(:not([disabled]):not([loading]):active) .control {

package/dist/checkbox.esm.js

@@ -1,23 +1,23 @@
 import { E as a } from "./ElementBase-BeZT54Hj.mjs";
 const s = `
   :host {
-    --ui-checkbox-size: 18px;
+    --ui-checkbox-size: 16px;
     --ui-checkbox-hit-area: 24px;
-    --ui-checkbox-radius: 4px;
-    --ui-checkbox-border: 1.5px solid color-mix(in srgb, var(--ui-primary, var(--ui-color-primary, #2563eb)) 44%, var(--ui-color-border, #cbd5e1) 56%);
-    --ui-checkbox-background: var(--ui-bg, var(--ui-color-surface, #ffffff));
-    --ui-checkbox-check-color: #ffffff;
+    --ui-checkbox-radius: calc(var(--ui-radius, 6px) - 2px);
+    --ui-checkbox-border: 1px solid var(--ui-color-line-strong, var(--ui-color-border, #cbd5e1));
+    --ui-checkbox-background: var(--ui-bg, var(--color-panel-solid, var(--ui-color-surface, #ffffff)));
+    --ui-checkbox-check-color: var(--ui-color-foreground-on-primary, #ffffff);
     --ui-checkbox-checked-background: var(--ui-primary, var(--ui-color-primary, #2563eb));
-    --ui-checkbox-checked-border: var(--ui-checkbox-border);
-    --ui-checkbox-indeterminate-bg: #d97706;
-    --ui-checkbox-indeterminate-border: 1.5px solid color-mix(in srgb, #d97706 72%, #78350f 28%);
-    --ui-checkbox-invalid-border: 1.5px solid var(--ui-color-danger, #dc2626);
-    --ui-checkbox-invalid-focus: 0 0 0 4px color-mix(in srgb, var(--ui-color-danger, #dc2626) 24%, transparent);
-    --ui-checkbox-focus: 0 0 0 4px color-mix(in srgb, var(--ui-color-focus-ring, #2563eb) 26%, transparent);
+    --ui-checkbox-checked-border: 1px solid var(--ui-checkbox-checked-background);
+    --ui-checkbox-indeterminate-bg: var(--ui-checkbox-checked-background);
+    --ui-checkbox-indeterminate-border: 1px solid var(--ui-checkbox-checked-background);
+    --ui-checkbox-invalid-border: 1px solid var(--ui-color-danger, #dc2626);
+    --ui-checkbox-invalid-focus: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-color-danger, #dc2626);
+    --ui-checkbox-focus: 0 0 0 2px var(--ui-color-background, #ffffff), 0 0 0 4px var(--ui-ring-color, var(--ui-color-focus-ring, #2563eb));
     --ui-checkbox-shadow: none;
     --ui-checkbox-shadow-checked: none;
     --ui-checkbox-disabled-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f1f5f9) 88%, #ffffff 12%);
-    --ui-checkbox-disabled-border: 1.5px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 78%, transparent);
+    --ui-checkbox-disabled-border: 1px solid var(--ui-color-line, var(--ui-color-border, #cbd5e1));
     --ui-checkbox-label-color: var(--ui-color-text, var(--ui-text, #0f172a));
     --ui-checkbox-muted: var(--ui-color-muted, #526175);
     --ui-checkbox-duration: 170ms;
@@ -209,9 +209,13 @@ const s = `
     box-shadow: var(--ui-checkbox-focus);
   }
 
-  :host(:not([disabled]):not([loading]):hover) .control {
-    transform: translateY(-0.5px);
-    border-color: color-mix(in srgb, var(--ui-primary, var(--ui-color-primary, #2563eb)) 80%, #0f172a 20%);
+  :host(:not([disabled]):not([loading]):not([checked]):not([indeterminate]):hover) .control {
+    border-color: var(--ui-color-text-secondary, #64748b);
+  }
+
+  :host(:not([disabled]):not([loading])[checked]:hover) .control,
+  :host(:not([disabled]):not([loading])[indeterminate]:hover) .control {
+    background: color-mix(in srgb, var(--ui-checkbox-checked-background) 88%, var(--ui-color-text-strong, #0f172a));
   }
 
   :host(:not([disabled]):not([loading]):active) .control {