@editora/ui-core 0.1.9 → 0.1.10

package/dist/chart.esm.js

@@ -0,0 +1,1369 @@
+import { E as Y } from "./ElementBase-909688f3.mjs";
+const V = 180, Z = `
+  :host {
+    --ui-chart-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    --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-text: var(--ui-color-text, #0f172a);
+    --ui-chart-muted: var(--ui-color-muted, #64748b);
+    --ui-chart-grid: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 45%, transparent);
+    --ui-chart-accent: var(--ui-color-primary, #2563eb);
+    --ui-chart-success: var(--ui-color-success, #16a34a);
+    --ui-chart-warning: var(--ui-color-warning, #d97706);
+    --ui-chart-danger: var(--ui-color-danger, #dc2626);
+    --ui-chart-radius: 16px;
+    --ui-chart-shadow: none;
+    --ui-chart-plot-height: 220px;
+    --ui-chart-plot-min-height: 188px;
+    --ui-chart-plot-min-width: 420px;
+
+    display: block;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    color-scheme: light dark;
+    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  }
+
+  .frame {
+    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));
+    color: var(--ui-chart-text);
+    box-shadow: var(--ui-chart-shadow);
+    padding: 16px;
+    display: grid;
+    gap: 12px;
+    overflow: clip;
+  }
+
+  :host([variant="minimal"]) .frame {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-chart-bg: #0b1220;
+    --ui-chart-surface: #0f172a;
+    --ui-chart-border: #334155;
+    --ui-chart-text: #e2e8f0;
+    --ui-chart-muted: #94a3b8;
+    --ui-chart-grid: color-mix(in srgb, #475569 74%, transparent);
+    --ui-chart-accent: #93c5fd;
+    --ui-chart-success: #34d399;
+    --ui-chart-warning: #fbbf24;
+    --ui-chart-danger: #f87171;
+    --ui-chart-shadow: none;
+  }
+
+  .frame[data-state="loading"] {
+    cursor: progress;
+  }
+
+  .frame[data-disabled="true"] {
+    opacity: 0.68;
+  }
+
+  .header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .toolbar {
+    display: grid;
+    gap: 10px;
+    padding: 10px 12px;
+    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 82%, transparent);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--ui-chart-surface) 96%, transparent);
+  }
+
+  .toolbar[hidden] {
+    display: none;
+  }
+
+  .toolbar ::slotted(*) {
+    display: block;
+  }
+
+  .meta {
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .title {
+    font-size: 15px;
+    line-height: 1.35;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    margin: 0;
+  }
+
+  .subtitle {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--ui-chart-muted);
+  }
+
+  .title-slot,
+  .subtitle-slot {
+    display: contents;
+  }
+
+  .title-slot::slotted(*) {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.35;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    color: var(--ui-chart-text);
+  }
+
+  .subtitle-slot::slotted(*) {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--ui-chart-muted);
+  }
+
+  .status-pill {
+    align-self: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 24px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 88%, transparent);
+    background: color-mix(in srgb, var(--ui-chart-surface) 92%, transparent);
+    font-size: 11px;
+    line-height: 1;
+    font-weight: 600;
+    color: var(--ui-chart-muted);
+    white-space: nowrap;
+  }
+
+  .status-pill[data-state="success"] {
+    color: var(--ui-chart-success);
+    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);
+    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);
+    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);
+  }
+
+  .summary {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .metric {
+    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 82%, transparent);
+    border-radius: 10px;
+    padding: 8px 10px;
+    background: color-mix(in srgb, var(--ui-chart-surface) 95%, transparent);
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .metric-label {
+    font-size: 11px;
+    line-height: 1;
+    color: var(--ui-chart-muted);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .metric-value {
+    font-size: 14px;
+    line-height: 1.2;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .metric-value[data-tone="up"] {
+    color: var(--ui-chart-success);
+  }
+
+  .metric-value[data-tone="down"] {
+    color: var(--ui-chart-danger);
+  }
+
+  .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;
+    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);
+    overflow: auto hidden;
+  }
+
+  .plot-body {
+    display: grid;
+    grid-template-columns: minmax(32px, auto) minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) auto;
+    inline-size: 100%;
+    min-inline-size: calc(var(--ui-chart-plot-min-width) + 38px);
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .plot {
+    inline-size: 100%;
+    block-size: 100%;
+    display: block;
+  }
+
+  .axis-y {
+    grid-column: 1;
+    grid-row: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 8px 6px 24px 0;
+    color: var(--ui-chart-muted);
+    font-size: 11px;
+    line-height: 1;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .axis-x {
+    grid-column: 2;
+    grid-row: 2;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    align-items: start;
+    gap: 0;
+    padding: 6px 10px 8px;
+    color: var(--ui-chart-muted);
+    font-size: 11px;
+    line-height: 1.2;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .axis-x-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .axis-x-label[data-hidden="true"] {
+    visibility: hidden;
+  }
+
+  .plot-stage {
+    position: relative;
+    grid-column: 2;
+    grid-row: 1;
+    min-inline-size: var(--ui-chart-plot-min-width);
+    min-block-size: 0;
+  }
+
+  .plot-grid line,
+  .plot-grid path {
+    transition: stroke 140ms ease;
+  }
+
+  .plot-hit-layer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .plot-hit {
+    position: absolute;
+    inset-inline-start: calc(var(--x, 50) * 1%);
+    inset-block-start: calc(var(--y, 50) * 1%);
+    transform: translate(-50%, -50%);
+    inline-size: 22px;
+    block-size: 22px;
+    border: none;
+    border-radius: 999px;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    background: transparent;
+    pointer-events: auto;
+    color: inherit;
+  }
+
+  .plot-hit::after {
+    content: '';
+    position: absolute;
+    inset: 7px;
+    border-radius: inherit;
+    border: 1px solid color-mix(in srgb, var(--ui-chart-accent) 30%, transparent);
+    background: color-mix(in srgb, var(--ui-chart-surface) 70%, transparent);
+    transform: scale(0.85);
+    opacity: 0;
+    transition: opacity 140ms ease, transform 140ms ease;
+  }
+
+  .plot-hit:hover::after,
+  .plot-hit:focus-visible::after,
+  .plot-hit[data-active="true"]::after {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .plot-hit:focus-visible {
+    outline: 2px solid var(--ui-chart-accent);
+    outline-offset: 2px;
+  }
+
+  .axis-labels {
+    position: absolute;
+    inset-inline: 10px;
+    inset-block-end: 6px;
+    display: flex;
+    justify-content: space-between;
+    pointer-events: none;
+    color: var(--ui-chart-muted);
+    font-size: 11px;
+    line-height: 1;
+  }
+
+  .tooltip {
+    position: absolute;
+    inset-inline-start: clamp(72px, calc(var(--x, 50) * 1%), calc(100% - 72px));
+    inset-block-start: clamp(10px, calc(var(--y, 20) * 1%), calc(100% - 72px));
+    transform: translate(-50%, calc(-100% - 10px));
+    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);
+    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);
+    display: grid;
+    gap: 8px;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .tooltip-title {
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 700;
+  }
+
+  .tooltip-list {
+    display: grid;
+    gap: 6px;
+  }
+
+  .tooltip-row {
+    display: grid;
+    grid-template-columns: 8px minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    line-height: 1.2;
+  }
+
+  .tooltip-dot {
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: 999px;
+    background: var(--dot, var(--ui-chart-accent));
+  }
+
+  .tooltip-series {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--ui-chart-muted);
+  }
+
+  .tooltip-value {
+    font-weight: 700;
+    color: var(--ui-chart-text);
+    white-space: nowrap;
+  }
+
+  .insight {
+    display: flex;
+    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;
+    padding: 8px 10px;
+    font-size: 12px;
+    line-height: 1.35;
+    color: var(--ui-chart-muted);
+    background: color-mix(in srgb, var(--ui-chart-surface) 95%, transparent);
+  }
+
+  .insight strong {
+    color: var(--ui-chart-text);
+    font-weight: 700;
+  }
+
+  .legend {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 8px;
+  }
+
+  .legend-item {
+    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
+    background: color-mix(in srgb, var(--ui-chart-surface) 94%, transparent);
+    border-radius: 10px;
+    min-block-size: 30px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 10px;
+    font-size: 12px;
+    line-height: 1;
+    color: var(--ui-chart-muted);
+    cursor: pointer;
+    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
+  }
+
+  .legend-item[data-active="true"],
+  .legend-item:hover {
+    border-color: color-mix(in srgb, var(--ui-chart-accent) 35%, var(--ui-chart-border));
+    background: color-mix(in srgb, var(--ui-chart-accent) 12%, transparent);
+    color: var(--ui-chart-text);
+  }
+
+  .legend-item:focus-visible {
+    outline: 2px solid var(--ui-chart-accent);
+    outline-offset: 2px;
+  }
+
+  .legend-item[disabled],
+  .plot-hit[disabled] {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .legend-dot {
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: 999px;
+    flex: 0 0 auto;
+    background: var(--dot, var(--ui-chart-accent));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dot, var(--ui-chart-accent)) 35%, transparent);
+  }
+
+  .empty,
+  .message {
+    border: 1px dashed color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
+    border-radius: 10px;
+    padding: 14px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--ui-chart-muted);
+    background: color-mix(in srgb, var(--ui-chart-surface) 95%, transparent);
+  }
+
+  .message[data-tone="error"] {
+    color: var(--ui-chart-danger);
+    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);
+    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);
+  }
+
+  .loading-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+      linear-gradient(90deg,
+        color-mix(in srgb, var(--ui-chart-surface) 88%, transparent) 0%,
+        color-mix(in srgb, var(--ui-chart-surface) 68%, transparent) 50%,
+        color-mix(in srgb, var(--ui-chart-surface) 88%, transparent) 100%);
+    background-size: 220% 100%;
+    animation: ui-chart-shimmer 1.1s linear infinite;
+  }
+
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    white-space: nowrap;
+    clip-path: inset(100%);
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+  }
+
+  :host([headless]) .frame {
+    display: none !important;
+  }
+
+  @media (max-width: 720px) {
+    :host {
+      --ui-chart-plot-height: 188px;
+      --ui-chart-plot-min-height: 168px;
+      --ui-chart-plot-min-width: 320px;
+    }
+
+    .frame {
+      padding: 12px;
+      gap: 10px;
+    }
+
+    .summary {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .legend-item,
+    .plot-hit::after,
+    .loading-overlay {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .frame,
+    .metric,
+    .plot-shell,
+    .legend-item,
+    .insight,
+    .empty,
+    .message {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-chart-bg: Canvas;
+      --ui-chart-surface: Canvas;
+      --ui-chart-border: CanvasText;
+      --ui-chart-text: CanvasText;
+      --ui-chart-muted: CanvasText;
+      --ui-chart-grid: CanvasText;
+      --ui-chart-accent: Highlight;
+      --ui-chart-success: Highlight;
+      --ui-chart-warning: Highlight;
+      --ui-chart-danger: Highlight;
+      --ui-chart-shadow: none;
+    }
+
+    .frame,
+    .metric,
+    .plot-shell,
+    .legend-item,
+    .insight,
+    .empty,
+    .message,
+    .status-pill {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    .legend-dot {
+      background: Highlight;
+      box-shadow: none;
+    }
+  }
+
+  @keyframes ui-chart-shimmer {
+    from {
+      background-position: 220% 0;
+    }
+    to {
+      background-position: -220% 0;
+    }
+  }
+`, q = [
+  "var(--ui-color-primary, #2563eb)",
+  "var(--ui-color-success, #16a34a)",
+  "var(--ui-color-warning, #d97706)",
+  "var(--ui-color-danger, #dc2626)",
+  "var(--ui-color-info, #0891b2)",
+  "var(--ui-color-accent, #7c3aed)"
+];
+function u(p) {
+  return p.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function M(p, t, e) {
+  return Math.max(t, Math.min(e, p));
+}
+function J(p, t, e) {
+  if (p)
+    try {
+      const r = JSON.parse(p);
+      if (Array.isArray(r))
+        return r.map((n, o) => {
+          if (typeof n == "number")
+            return Number.isFinite(n) ? { label: String(o + 1), value: n } : null;
+          if (n && typeof n == "object") {
+            const i = Number(n.value);
+            if (!Number.isFinite(i))
+              return null;
+            const c = n.label, d = n.tone;
+            return {
+              label: typeof c == "string" && c.trim() ? c.trim() : String(o + 1),
+              value: i,
+              tone: typeof d == "string" && d.trim() ? d.trim() : void 0
+            };
+          }
+          return null;
+        }).filter((n) => !!n);
+    } catch {
+      return [];
+    }
+  const a = (t || "").split(",").map((r) => Number(r.trim())).filter((r) => Number.isFinite(r)), s = (e || "").split(",").map((r) => r.trim()).filter(Boolean);
+  return a.map((r, n) => ({
+    label: s[n] || String(n + 1),
+    value: r
+  }));
+}
+function G(p) {
+  return Array.isArray(p) ? p.map((t, e) => {
+    if (typeof t == "number")
+      return Number.isFinite(t) ? { label: String(e + 1), value: t } : null;
+    if (t && typeof t == "object") {
+      const a = Number(t.value);
+      if (!Number.isFinite(a))
+        return null;
+      const s = t.label, r = t.tone;
+      return {
+        label: typeof s == "string" && s.trim() ? s.trim() : String(e + 1),
+        value: a,
+        tone: typeof r == "string" && r.trim() ? r.trim() : void 0
+      };
+    }
+    return null;
+  }).filter((t) => !!t) : [];
+}
+function Q(p) {
+  if (!p)
+    return [];
+  try {
+    const t = JSON.parse(p);
+    return Array.isArray(t) ? t.map((a, s) => {
+      if (!a || typeof a != "object")
+        return null;
+      const r = a.name, n = G(a.data);
+      if (!n.length)
+        return null;
+      const o = a.tone, i = a.dash, c = Number(a.strokeWidth), d = Number(a.opacity), T = a.fill;
+      return {
+        name: typeof r == "string" && r.trim() ? r.trim() : `Series ${s + 1}`,
+        data: n,
+        tone: typeof o == "string" && o.trim() ? o.trim() : void 0,
+        dash: typeof i == "string" && i.trim() ? i.trim() : void 0,
+        strokeWidth: Number.isFinite(c) && c > 0 ? c : void 0,
+        opacity: Number.isFinite(d) && d > 0 ? d : void 0,
+        fill: typeof T == "boolean" ? T : void 0
+      };
+    }).filter((a) => !!a) : [];
+  } catch {
+    return [];
+  }
+}
+function tt(p) {
+  const t = p.map((a, s) => {
+    var r;
+    return {
+      label: ((r = a.label) == null ? void 0 : r.trim()) || String(s + 1),
+      value: Number(a.value),
+      tone: typeof a.tone == "string" && a.tone.trim() ? a.tone.trim() : void 0
+    };
+  }).filter((a) => Number.isFinite(a.value));
+  if (t.length <= V)
+    return { points: t, truncated: 0 };
+  const e = t.length - V;
+  return { points: t.slice(t.length - V), truncated: e };
+}
+function et(p, t) {
+  const a = (p.length ? p : t.length ? [{ name: "Series 1", data: t }] : []).map((i) => {
+    const c = tt(i.data);
+    return {
+      name: i.name,
+      data: c.points,
+      tone: i.tone,
+      fill: i.fill,
+      dash: i.dash,
+      strokeWidth: i.strokeWidth,
+      opacity: i.opacity,
+      truncated: c.truncated
+    };
+  }).filter((i) => i.data.length > 0), s = /* @__PURE__ */ new Set();
+  a.forEach((i) => {
+    i.data.forEach((c) => s.add(c.label));
+  });
+  let r = Array.from(s), n = a.reduce((i, c) => Math.max(i, c.truncated), 0);
+  r.length > V && (n += r.length - V, r = r.slice(r.length - V));
+  const o = a.map((i) => {
+    const c = new Set(r);
+    return {
+      name: i.name,
+      data: i.data.filter((d) => c.has(d.label)),
+      tone: i.tone,
+      fill: i.fill,
+      dash: i.dash,
+      strokeWidth: i.strokeWidth,
+      opacity: i.opacity
+    };
+  });
+  return { labels: r, series: o, truncated: n };
+}
+function K(p) {
+  return p === "loading" ? "Updating" : p === "error" ? "Issue" : p === "success" ? "Stable" : "Live";
+}
+function at(p) {
+  return p === "loading" || p === "error" || p === "success" ? p : "idle";
+}
+class it extends Y {
+  constructor() {
+    super(...arguments), this._activeIndex = null, this._activePinned = !1, this._onClickBound = (t) => this._onClick(t), this._onKeyDownBound = (t) => this._onKeyDown(t), this._onPointerOverBound = (t) => this._onPointerOver(t), this._onPointerLeaveBound = () => this._onPointerLeave(), this._onFocusInBound = (t) => this._onFocusIn(t);
+  }
+  static get observedAttributes() {
+    return [
+      "data",
+      "series",
+      "values",
+      "labels",
+      "type",
+      "variant",
+      "title",
+      "subtitle",
+      "headless",
+      "state",
+      "disabled",
+      "interactive",
+      "show-legend",
+      "show-summary",
+      "value-prefix",
+      "value-suffix",
+      "aria-label"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("click", this._onClickBound), this.root.addEventListener("keydown", this._onKeyDownBound), this.root.addEventListener("pointerover", this._onPointerOverBound), this.root.addEventListener("pointerleave", this._onPointerLeaveBound), this.root.addEventListener("focusin", this._onFocusInBound);
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("click", this._onClickBound), this.root.removeEventListener("keydown", this._onKeyDownBound), this.root.removeEventListener("pointerover", this._onPointerOverBound), this.root.removeEventListener("pointerleave", this._onPointerLeaveBound), this.root.removeEventListener("focusin", this._onFocusInBound), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, a) {
+    e !== a && ((t === "disabled" || t === "state" || t === "interactive") && (this._isInteractive() || (this._activeIndex = null, this._activePinned = !1)), super.attributeChangedCallback(t, e, a));
+  }
+  _data() {
+    const t = J(this.getAttribute("data"), this.getAttribute("values"), this.getAttribute("labels")), e = Q(this.getAttribute("series"));
+    return et(e, t);
+  }
+  _type() {
+    const t = this.getAttribute("type");
+    return t === "line" || t === "area" || t === "bar" || t === "donut" || t === "step" || t === "scatter" || t === "radial" ? t : "line";
+  }
+  _state() {
+    return at(this.getAttribute("state"));
+  }
+  _isDisabled() {
+    return this.hasAttribute("disabled") || this._state() === "loading";
+  }
+  _isInteractive() {
+    const t = (this.getAttribute("interactive") || "").trim().toLowerCase();
+    return t === "false" || t === "0" || t === "off" ? !1 : !this._isDisabled();
+  }
+  _showLegend() {
+    const t = (this.getAttribute("show-legend") || "").trim().toLowerCase();
+    return t ? t !== "false" && t !== "0" && t !== "off" : !0;
+  }
+  _showSummary() {
+    const t = (this.getAttribute("show-summary") || "").trim().toLowerCase();
+    return t ? t !== "false" && t !== "0" && t !== "off" : !0;
+  }
+  _primarySeries(t) {
+    return t.series[0] || null;
+  }
+  _valuePrefix() {
+    return this.getAttribute("value-prefix") || "";
+  }
+  _valueSuffix() {
+    return this.getAttribute("value-suffix") || "";
+  }
+  _resolveStats(t) {
+    const e = t.map((d) => d.value), a = e.reduce((d, T) => d + T, 0), s = e.length ? a / e.length : 0, r = e.length ? Math.min(...e) : 0, n = e.length ? Math.max(...e) : 0, o = e.length > 1 ? e[e.length - 1] - e[0] : 0, i = e[0] || 0, c = i !== 0 ? o / Math.abs(i) * 100 : null;
+    return { total: a, average: s, min: r, max: n, delta: o, deltaPct: c };
+  }
+  _valueDomain(t, e) {
+    const a = !!(e != null && e.includeZero), s = (e == null ? void 0 : e.fitPadding) ?? 0.14, r = t.map((d) => d.value);
+    let n = Math.min(...r), o = Math.max(...r);
+    a && (n = Math.min(0, n), o = Math.max(0, o));
+    let i = o - n;
+    if (i <= 0) {
+      const d = Math.max(Math.abs(o) * 0.12, 1);
+      n -= d, o += d, i = o - n;
+    } else {
+      const d = i * s;
+      a ? (n -= d * 0.25, o += d) : (n -= d, o += d), i = o - n;
+    }
+    const c = n <= 0 && o >= 0;
+    return { min: n, max: o, span: i, zeroInDomain: c };
+  }
+  _formatValue(t, e) {
+    const a = this._valuePrefix(), s = this._valueSuffix();
+    try {
+      const r = new Intl.NumberFormat(void 0, {
+        maximumFractionDigits: Math.abs(t) >= 100 ? 0 : 1,
+        ...e
+      }).format(t);
+      return `${a}${r}${s}`;
+    } catch {
+      return `${a}${t.toFixed(Math.abs(t) >= 100 ? 0 : 1)}${s}`;
+    }
+  }
+  _seriesTone(t, e) {
+    return t.tone || q[e % q.length] || "var(--ui-chart-accent)";
+  }
+  _pointTone(t, e, a) {
+    return t.tone || a || q[e % q.length] || "var(--ui-chart-accent)";
+  }
+  _seriesValueDetails(t, e, a) {
+    const s = t[a];
+    return e.map((r, n) => {
+      const o = r.data.find((i) => i.label === s) || null;
+      return {
+        series: r.name,
+        value: (o == null ? void 0 : o.value) ?? null,
+        tone: (o == null ? void 0 : o.tone) || this._seriesTone(r, n)
+      };
+    });
+  }
+  _pointDetail(t, e, a, s) {
+    const r = this._primarySeries(e);
+    if (!r)
+      return null;
+    const n = e.labels[t];
+    if (!n)
+      return null;
+    const o = r.data.find((d) => d.label === n) || r.data[t];
+    if (!o)
+      return null;
+    const i = this._resolveStats(r.data), c = this._seriesValueDetails(e.labels, e.series, t);
+    return {
+      index: t,
+      label: n,
+      value: o.value,
+      tone: o.tone || this._seriesTone(r, 0),
+      series: r.name,
+      seriesValues: c,
+      type: a,
+      total: i.total,
+      min: i.min,
+      max: i.max,
+      source: s
+    };
+  }
+  _emitPointSelect(t, e, a) {
+    const s = this._pointDetail(t, e, this._type(), a);
+    s && (this.dispatchEvent(
+      new CustomEvent("point-select", {
+        detail: s,
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new CustomEvent("ui-point-select", {
+        detail: s,
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _indexFromTarget(t) {
+    const e = t instanceof Element ? t.closest("[data-point-index]") : null;
+    if (!e)
+      return null;
+    const a = Number(e.getAttribute("data-point-index"));
+    return !Number.isInteger(a) || a < 0 ? null : a;
+  }
+  _setActiveIndex(t, e) {
+    this._activeIndex = t, this._activePinned = e, this.requestRender();
+  }
+  _focusIndex(t) {
+    const e = this.root.querySelector(
+      `.legend-item[data-point-index="${t}"]`
+    );
+    if (e)
+      try {
+        e.focus({ preventScroll: !0 });
+      } catch {
+        e.focus();
+      }
+  }
+  _onPointerOver(t) {
+    if (!this._isInteractive() || this._activePinned)
+      return;
+    const e = this._indexFromTarget(t.target);
+    e == null || this._activeIndex === e || (this._activeIndex = e, this.requestRender());
+  }
+  _onPointerLeave() {
+    !this._isInteractive() || this._activePinned || this._activeIndex == null || (this._activeIndex = null, this.requestRender());
+  }
+  _onFocusIn(t) {
+    if (!this._isInteractive())
+      return;
+    const e = this._indexFromTarget(t.target);
+    e == null || this._activeIndex === e || (this._activeIndex = e, this.requestRender());
+  }
+  _onClick(t) {
+    if (!this._isInteractive())
+      return;
+    const e = this._data();
+    if (!e.labels.length || !e.series.length)
+      return;
+    const a = this._indexFromTarget(t.target);
+    if (a == null || a >= e.labels.length)
+      return;
+    const s = !(this._activePinned && this._activeIndex === a);
+    this._activeIndex = a, this._activePinned = s, this.requestRender(), this._emitPointSelect(a, e, "pointer");
+  }
+  _onKeyDown(t) {
+    if (!this._isInteractive())
+      return;
+    const e = this._data();
+    if (!e.labels.length || !e.series.length)
+      return;
+    const s = this._indexFromTarget(t.target) ?? this._activeIndex ?? 0;
+    if (t.key === "ArrowRight" || t.key === "ArrowDown") {
+      t.preventDefault();
+      const n = M(s + 1, 0, e.labels.length - 1);
+      this._setActiveIndex(n, !0), this._focusIndex(n);
+      return;
+    }
+    if (t.key === "ArrowLeft" || t.key === "ArrowUp") {
+      t.preventDefault();
+      const n = M(s - 1, 0, e.labels.length - 1);
+      this._setActiveIndex(n, !0), this._focusIndex(n);
+      return;
+    }
+    if (t.key === "Home") {
+      t.preventDefault(), this._setActiveIndex(0, !0), this._focusIndex(0);
+      return;
+    }
+    if (t.key === "End") {
+      t.preventDefault();
+      const n = e.labels.length - 1;
+      this._setActiveIndex(n, !0), this._focusIndex(n);
+      return;
+    }
+    if (t.key === "Escape") {
+      if (!this._activePinned && this._activeIndex == null)
+        return;
+      t.preventDefault(), this._setActiveIndex(null, !1);
+      return;
+    }
+    if (t.key !== "Enter" && t.key !== " ")
+      return;
+    t.preventDefault();
+    const r = M(s, 0, e.labels.length - 1);
+    this._setActiveIndex(r, !0), this._emitPointSelect(r, e, "keyboard");
+  }
+  _axisXLabels(t) {
+    if (t.length <= 8)
+      return t.map(() => "visible");
+    const e = Math.max(1, Math.ceil(t.length / 6));
+    return t.map((a, s) => s === 0 || s === t.length - 1 || s % e === 0 ? "visible" : "hidden");
+  }
+  _buildCartesianTicks(t, e) {
+    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 x = 6 + 48 * g, I = y.zeroInDomain && Math.abs(x - h) < 0.5;
+      return `<line x1="8" y1="${x.toFixed(2)}" x2="${(8 + 208).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;
+      return {
+        xPct: M(I / 220 * 100, 0, 100),
+        yPct: M(C / 64 * 100, 0, 100)
+      };
+    }), E = $.map((g, x) => {
+      const I = j[x];
+      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${x}" data-active="${a === x ? "true" : "false"}" style="--x:${I.xPct.toFixed(3)};--y:${I.yPct.toFixed(3)};" aria-label="${u(g)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
+    }).join("");
+    if (e === "bar") {
+      const g = 208 / Math.max(1, $.length), x = M(g * 0.82, 6, 22), I = x / Math.max(1, P.length), D = P.map((C, z) => {
+        const N = this._seriesTone(C, z);
+        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;
+          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="${N}" opacity="${X}" />`;
+        }).join("");
+      }).join("");
+      return {
+        svg: `
+          <svg class="plot" part="plot" viewBox="0 0 220 64" width="100%" height="100%" role="img" aria-label="${u(this._ariaLabel())}" preserveAspectRatio="none">
+            <g class="plot-grid">${k}</g>
+            ${D}
+          </svg>
+        `,
+        hits: E,
+        anchors: j,
+        yTicks: this._buildCartesianTicks(F, l)
+      };
+    }
+    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;
+        return { x: R, y: B, point: A, index: _ };
+      }), C = [];
+      let z = [];
+      D.forEach((m) => {
+        if (!m.point || m.y == null) {
+          z.length && C.push(z), z = [];
+          return;
+        }
+        z.push({ x: m.x, y: m.y, point: m.point, index: m.index });
+      }), z.length && C.push(z);
+      const N = (m) => m.map((_, A) => A === 0 ? `M${_.x.toFixed(2)} ${_.y.toFixed(2)}` : e === "step" ? `H${_.x.toFixed(2)} V${_.y.toFixed(2)}` : `L${_.x.toFixed(2)} ${_.y.toFixed(2)}`).join(" "), O = e === "area" ? C.map((m) => {
+        if (!(typeof g.fill == "boolean" ? g.fill : x === 0))
+          return "";
+        const A = N(m), R = m[0], B = m[m.length - 1];
+        return `<path d="${A} L ${B.x.toFixed(2)} ${h.toFixed(2)} L ${R.x.toFixed(2)} ${h.toFixed(2)} Z" fill="color-mix(in srgb, ${I} 18%, transparent)" opacity="${g.opacity ?? (x === 0 ? 1 : 0.65)}" />`;
+      }).join("") : "", H = e === "scatter" ? "" : C.map((m) => `<path d="${N(m)}" fill="none" stroke="${I}" stroke-width="${(g.strokeWidth || (x === 0 ? 1.9 : 1.55)).toFixed(2)}" stroke-linecap="round" stroke-linejoin="round" ${g.dash ? `stroke-dasharray="${u(g.dash)}"` : ""} opacity="${g.opacity ?? 1}" />`).join(""), W = D.map((m) => {
+        if (!m.point || m.y == null)
+          return "";
+        const _ = a === m.index, A = _ ? 2.35 : 1.6, R = a == null || _ ? g.opacity ?? 1 : 0.72;
+        return `<circle cx="${m.x.toFixed(2)}" cy="${m.y.toFixed(2)}" r="${A.toFixed(2)}" fill="${this._pointTone(m.point, m.index, I)}" opacity="${R}" />`;
+      }).join("");
+      return `${O}${H}${W}`;
+    }).join("");
+    return {
+      svg: `
+        <svg class="plot" part="plot" viewBox="0 0 220 64" width="100%" height="100%" role="img" aria-label="${u(this._ariaLabel())}" preserveAspectRatio="none">
+          <g class="plot-grid">${k}</g>
+          ${U}
+        </svg>
+      `,
+      hits: E,
+      anchors: j,
+      yTicks: this._buildCartesianTicks(F, l)
+    };
+  }
+  _plotRadial(t, e) {
+    const i = t.map((l) => l.value), c = Math.min(...i), d = Math.max(...i), T = Math.max(1, d - c), $ = t.map((l, v) => {
+      const f = -Math.PI / 2 + Math.PI * 2 * v / t.length, h = 10 + (l.value - c) / T * (28 - 10), 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 * (28 - 10)).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="${v}" 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="${u(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="${u(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
+          ${w}
+          ${b}
+          <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>
+      `,
+      hits: F,
+      anchors: $.map((l) => ({
+        xPct: M(l.x / 64 * 100, 0, 100),
+        yPct: M(l.y / 64 * 100, 0, 100)
+      })),
+      yTicks: []
+    };
+  }
+  _plotDonut(t, e) {
+    const a = t.reduce((w, b) => w + Math.max(0, b.value), 0), s = Math.max(1, a), r = 18, n = 7, o = 32, i = 32, c = 2 * Math.PI * r;
+    let d = 0;
+    const T = t.map((w, b) => {
+      const l = Math.max(0, w.value) / s * c, v = this._pointTone(w, b), f = e === b, S = e == null || f ? "1" : "0.7", h = `
+          <circle
+            cx="${o}"
+            cy="${i}"
+            r="${r}"
+            fill="none"
+            stroke="${v}"
+            stroke-width="${f ? n + 0.8 : n}"
+            stroke-dasharray="${l.toFixed(3)} ${(c - l).toFixed(3)}"
+            stroke-dashoffset="${(-d).toFixed(3)}"
+            transform="rotate(-90 ${o} ${i})"
+            stroke-linecap="round"
+            opacity="${S}"
+          />
+        `;
+      return d += l, h;
+    }).join("");
+    let $ = 0;
+    const P = t.map((w, b) => {
+      const y = Math.max(0, w.value), l = y / s * Math.PI * 2, v = -Math.PI / 2 + $ + l / 2, f = o + Math.cos(v) * (r + 6), S = i + Math.sin(v) * (r + 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 = s > 0 ? y / s * 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="${u(E)}" ${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="${u(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
+          <circle cx="${o}" cy="${i}" r="${r}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="${n}" />
+          ${T}
+          <text x="${o}" y="30" text-anchor="middle" font-size="4.5" fill="var(--ui-chart-muted)">Total</text>
+          <text x="${o}" y="36" text-anchor="middle" font-size="6" font-weight="700" fill="var(--ui-chart-text)">${u(this._formatValue(a))}</text>
+        </svg>
+      `,
+      hits: P,
+      anchors: t.map((w, b) => {
+        let y = 0;
+        for (let F = 0; F <= b; F += 1) {
+          const f = Math.max(0, t[F].value) / s * Math.PI * 2;
+          if (F === b) {
+            const S = -Math.PI / 2 + y + f / 2, h = o + Math.cos(S) * (r + 6), k = i + Math.sin(S) * (r + 6);
+            return {
+              xPct: M(h / 64 * 100, 0, 100),
+              yPct: M(k / 64 * 100, 0, 100)
+            };
+          }
+          y += f;
+        }
+        return { xPct: 50, yPct: 50 };
+      }),
+      yTicks: []
+    };
+  }
+  _plot(t, e, a) {
+    const s = this._primarySeries(t);
+    return s ? e === "donut" ? this._plotDonut(s.data, a) : e === "radial" ? this._plotRadial(s.data, a) : this._plotCartesian(t, e, a) : { svg: "", hits: "", anchors: [], yTicks: [] };
+  }
+  _ariaLabel() {
+    const t = this.getAttribute("title") || "Chart";
+    return this.getAttribute("aria-label") || t;
+  }
+  _hasToolbarSlot() {
+    return !!this.querySelector('[slot="header"]');
+  }
+  _hasSlot(t) {
+    return !!this.querySelector(`[slot="${t}"]`);
+  }
+  _tooltipMarkup(t, e) {
+    const a = this._activeIndex;
+    if (a == null || !e.anchors[a])
+      return "";
+    const s = t.labels[a];
+    if (!s)
+      return "";
+    const r = this._seriesValueDetails(t.labels, t.series, a).filter((o) => o.value != null);
+    if (!r.length)
+      return "";
+    const n = e.anchors[a];
+    return `
+      <div class="tooltip" part="tooltip" style="--x:${n.xPct.toFixed(3)};--y:${n.yPct.toFixed(3)};">
+        <div class="tooltip-title">${u(s)}</div>
+        <div class="tooltip-list">
+          ${r.map(
+      (o) => `
+                <div class="tooltip-row">
+                  <span class="tooltip-dot" style="--dot:${o.tone || "var(--ui-chart-accent)"};"></span>
+                  <span class="tooltip-series">${u(o.series)}</span>
+                  <span class="tooltip-value">${u(this._formatValue(o.value || 0))}</span>
+                </div>
+              `
+    ).join("")}
+        </div>
+      </div>
+    `;
+  }
+  _activeInsight(t) {
+    var o;
+    const e = this._primarySeries(t);
+    if (!e)
+      return "";
+    const a = this._activeIndex;
+    if (a == null || !t.labels[a]) {
+      const i = this._resolveStats(e.data), c = i.delta > 0 ? "up" : i.delta < 0 ? "down" : "flat", d = `${i.delta >= 0 ? "+" : ""}${this._formatValue(i.delta)}${i.deltaPct == null ? "" : ` (${i.deltaPct >= 0 ? "+" : ""}${this._formatValue(i.deltaPct, { maximumFractionDigits: 1 })}%)`}`;
+      return `
+        <div class="insight" part="insight">
+          <span>Range <strong>${this._formatValue(i.min)}</strong> to <strong>${this._formatValue(i.max)}</strong></span>
+          <strong data-tone="${c}">${u(d)}</strong>
+        </div>
+      `;
+    }
+    const s = t.labels[a], r = this._seriesValueDetails(t.labels, t.series, a).filter((i) => i.value != null), n = r.reduce((i, c) => i + (c.value || 0), 0);
+    return `
+      <div class="insight" part="insight">
+        <span>Selected <strong>${u(s)}</strong></span>
+        <strong>${u(this._formatValue(t.series.length > 1 ? n : ((o = r[0]) == null ? void 0 : o.value) || 0))}</strong>
+      </div>
+    `;
+  }
+  render() {
+    const t = this._data(), e = this._primarySeries(t), a = this._type(), s = this._state(), r = this._isDisabled(), n = this._isInteractive(), o = (this.getAttribute("title") || "").trim(), i = (this.getAttribute("subtitle") || "").trim(), c = this._showLegend(), d = this._showSummary(), T = this._hasToolbarSlot(), $ = this._hasSlot("title"), P = this._hasSlot("subtitle"), w = $ || P || !!o || !!i || s !== "idle";
+    if (!e || !t.labels.length) {
+      const h = s === "error" ? "Chart data failed to load" : "No series data available";
+      this.setContent(`
+        <style>${Z}</style>
+        <section class="frame" part="frame" data-state="${s}" data-disabled="${r ? "true" : "false"}" aria-disabled="${r ? "true" : "false"}">
+          <div class="toolbar" part="toolbar" ${T ? "" : "hidden"}>
+            <slot name="header"></slot>
+          </div>
+          <header class="header" part="header" ${w ? "" : "hidden"}>
+            <div class="meta">
+              ${$ ? '<slot class="title-slot" name="title"></slot>' : o ? `<h3 class="title" part="title">${u(o)}</h3>` : ""}
+              ${P ? '<slot class="subtitle-slot" name="subtitle"></slot>' : i ? `<p class="subtitle" part="subtitle">${u(i)}</p>` : ""}
+            </div>
+            <span class="status-pill" data-state="${s}">${K(s)}</span>
+          </header>
+          <div class="empty" part="empty">${u(h)}</div>
+        </section>
+      `);
+      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(
+      (h, k) => `
+              <div class="legend-item" aria-label="${u(h.name)}">
+                <span class="legend-dot" style="--dot:${this._seriesTone(h, k)};"></span>
+                <span>${u(h.name)}</span>
+              </div>
+            `
+    ).join("") : e.data.map((h, k) => {
+      const L = this._activeIndex === k, j = this._pointTone(h, k), E = `${h.label}: ${this._formatValue(h.value)}`;
+      return `
+              <button
+                type="button"
+                class="legend-item"
+                data-role="legend-item"
+                data-point-index="${k}"
+                data-active="${L ? "true" : "false"}"
+                aria-label="${u(E)}"
+                ${n ? "" : "disabled"}
+              >
+                <span class="legend-dot" style="--dot:${j};"></span>
+                <span>${u(h.label)}</span>
+              </button>
+            `;
+    }).join(""), v = b.delta > 0 ? "up" : b.delta < 0 ? "down" : "flat", f = `${b.delta >= 0 ? "+" : ""}${this._formatValue(b.delta)}`, S = s === "error" ? '<div class="message" part="message" data-tone="error">Data source returned partial metrics. Review upstream mapping.</div>' : s === "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
+        class="frame"
+        part="frame"
+        data-state="${s}"
+        data-disabled="${r ? "true" : "false"}"
+        aria-disabled="${r ? "true" : "false"}"
+      >
+        <div class="sr-only" aria-live="polite">${u(o)} ${u(K(s))}</div>
+
+        <div class="toolbar" part="toolbar" ${T ? "" : "hidden"}>
+          <slot name="header"></slot>
+        </div>
+
+        <header class="header" part="header" ${w ? "" : "hidden"}>
+          <div class="meta">
+            ${$ ? '<slot class="title-slot" name="title"></slot>' : o ? `<h3 class="title" part="title">${u(o)}</h3>` : ""}
+            ${P ? '<slot class="subtitle-slot" name="subtitle"></slot>' : i ? `<p class="subtitle" part="subtitle">${u(i)}</p>` : ""}
+          </div>
+          <span class="status-pill" data-state="${s}">${K(s)}</span>
+        </header>
+
+        ${d ? `
+          <section class="summary" part="summary">
+            <div class="metric" part="metric">
+              <span class="metric-label">Total</span>
+              <span class="metric-value">${u(this._formatValue(b.total))}</span>
+            </div>
+            <div class="metric" part="metric">
+              <span class="metric-label">Average</span>
+              <span class="metric-value">${u(this._formatValue(b.average))}</span>
+            </div>
+            <div class="metric" part="metric">
+              <span class="metric-label">Peak</span>
+              <span class="metric-value">${u(this._formatValue(b.max))}</span>
+            </div>
+            <div class="metric" part="metric">
+              <span class="metric-label">Delta</span>
+              <span class="metric-value" data-tone="${v}">${u(f)}</span>
+            </div>
+          </section>
+        ` : ""}
+
+        <section class="plot-shell" part="plot-shell">
+          <div class="plot-body">
+            ${a === "donut" || a === "radial" ? "" : `
+              <div class="axis-y" part="axis-y">
+                ${y.yTicks.map((h) => `<span>${u(h)}</span>`).join("")}
+              </div>
+            `}
+            <div class="plot-stage">
+              ${y.svg}
+              <div class="plot-hit-layer" part="plot-hits">${y.hits}</div>
+              ${this._tooltipMarkup(t, y)}
+              ${s === "loading" ? '<div class="loading-overlay" part="loading-overlay" aria-hidden="true"></div>' : ""}
+            </div>
+            ${a === "donut" || a === "radial" ? "" : `
+              <div class="axis-x" part="axis-x">
+                ${t.labels.map(
+      (h, k) => `<span class="axis-x-label" data-hidden="${F[k] === "hidden" ? "true" : "false"}">${u(h)}</span>`
+    ).join("")}
+              </div>
+            `}
+          </div>
+        </section>
+
+        ${this._activeInsight(t)}
+
+        ${c ? `<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>` : ""}
+
+        ${S}
+      </section>
+    `);
+  }
+  shouldRenderOnAttributeChange(t, e, a) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-chart") && customElements.define("ui-chart", it);
+export {
+  it as UIChart
+};