@fusedashlabs/widgets 0.4.5 → 0.6.0

package/dist/components/spark-area-chart/element/ui9000-spark-area-chart.js

@@ -7,10 +7,10 @@ import { parseJsonAttr, getSparkLineDimensions } from "../../../utils/chart-help
 import { lineLegendEntries } from "../../../utils/chart-legend.js";
 import { isFuseWidgetPayload, xDomainHintFromWidget } from "../../../utils/fuse-widget.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
-import { renderSparkLineChart } from "../../spark-line-chart/render/draw.js";
-import { sparkLineChartStyles } from "../../spark-line-chart/element/styles.js";
 import { normalizeSparkLineData } from "../../spark-line-chart/lib/normalize.js";
 import { formatCompact } from "../../spark-line-chart/lib/format.js";
+import { renderSparkLineChart } from "../../spark-line-chart/render/draw.js";
+import { sparkLineChartStyles } from "../../spark-line-chart/element/styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -31,7 +31,6 @@ let Ui9000SparkAreaChart = class extends Ui9000ChartElement {
     this.showTooltip = true;
     this.xLabel = "";
     this.yLabel = "";
-    this._tooltip = null;
     this._empty = false;
     this._raf = 0;
   }
@@ -97,17 +96,15 @@ let Ui9000SparkAreaChart = class extends Ui9000ChartElement {
       yLabel: this.yLabel || void 0,
       ...this.axisLabelHandlers(),
       onHover: this.showTooltip ? ({ xLabel, entries, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          xLabel,
-          entries
-        };
+        this.openTooltip(event, {
+          title: xLabel,
+          rows: entries.map((entry) => ({
+            label: entry.seriesName,
+            value: formatCompact(entry.value)
+          }))
+        });
       } : void 0,
-      onLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
@@ -120,20 +117,6 @@ let Ui9000SparkAreaChart = class extends Ui9000ChartElement {
           ${this.renderLegend(series)}
           <div class="chart-root" part="chart" ?hidden=${this._empty}></div>
           ${this._empty ? html`<div class="empty" part="empty">No data</div>` : nothing}
-          ${this._tooltip ? html`<div
-                class="tooltip"
-                part="tooltip"
-                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
-              >
-                <div class="x">${this._tooltip.xLabel}</div>
-                ${this._tooltip.entries.map(
-      (entry) => html`<div class="row">
-                    <span class="swatch" style="background:${entry.color}"></span>
-                    <span>${entry.seriesName}</span>
-                    <span class="value">${formatCompact(entry.value)}</span>
-                  </div>`
-    )}
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -159,9 +142,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "y-label" })
 ], Ui9000SparkAreaChart.prototype, "yLabel", 2);
-__decorateClass([
-  state()
-], Ui9000SparkAreaChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000SparkAreaChart.prototype, "_empty", 2);

package/dist/components/spark-area-chart/element/ui9000-spark-area-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-spark-area-chart.js","sources":["../../../../src/components/spark-area-chart/element/ui9000-spark-area-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport type { DataPoint, WidgetScale } from '../../../types/index.js';\nimport { getSparkLineDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries } from '../../../utils/chart-legend.js';\nimport {\n  isFuseWidgetPayload,\n  xDomainHintFromWidget,\n  type FuseWidgetLike,\n} from '../../../utils/fuse-widget.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatCompact,\n  normalizeSparkLineData,\n  type SparkLineChartData,\n  type SparkLineHoverEntry,\n  type SparkLineSeries,\n} from '../../spark-line-chart/lib/index.js';\nimport { renderSparkLineChart } from '../../spark-line-chart/render/draw.js';\nimport { sparkLineChartStyles } from '../../spark-line-chart/element/styles.js';\n\n@customElement('ui9000-spark-area-chart')\nexport class Ui9000SparkAreaChart extends Ui9000ChartElement {\n  static override styles = [sparkLineChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @property({ type: String, attribute: 'x-label' })\n  xLabel = '';\n\n  @property({ type: String, attribute: 'y-label' })\n  yLabel = '';\n\n  @state()\n  private _tooltip: {\n    x: number;\n    y: number;\n    xLabel: string;\n    entries: SparkLineHoverEntry[];\n  } | null = null;\n\n  @state()\n  private _empty = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): SparkLineSeries[] {\n    const raw = parseJsonAttr<DataPoint[] | SparkLineChartData | SparkLineSeries[] | FuseWidgetLike>(\n      this.dataJson,\n      [],\n    );\n    return normalizeSparkLineData(raw);\n  }\n\n  private xDomainHint(): string[] | undefined {\n    const raw = parseJsonAttr<unknown>(this.dataJson, null);\n    if (isFuseWidgetPayload(raw)) return xDomainHintFromWidget(raw);\n    return undefined;\n  }\n\n  private renderLegend(series: SparkLineSeries[]) {\n    if (!this.showLegend || series.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    const entries = lineLegendEntries(series, theme);\n    return renderChartLegend(entries);\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const series = this.parseData();\n    this._empty = series.length === 0 || series.every((s) => !s.points.length);\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getSparkLineDimensions(root);\n\n    renderSparkLineChart(root, {\n      series,\n      width,\n      height,\n      margin,\n      theme,\n      showGrid: this.showGrid,\n      showArea: true,\n      xDomainHint: this.xDomainHint(),\n      showTooltip: this.showTooltip,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ xLabel, entries, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              xLabel,\n              entries,\n            };\n          }\n        : undefined,\n      onLeave: this.showTooltip ? () => { this._tooltip = null; } : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const series =\n      this._empty ? [] : this.parseData().filter((s) => s.points.length > 0);\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend(series)}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                <div class=\"x\">${this._tooltip.xLabel}</div>\n                ${this._tooltip.entries.map(\n                  (entry) => html`<div class=\"row\">\n                    <span class=\"swatch\" style=\"background:${entry.color}\"></span>\n                    <span>${entry.seriesName}</span>\n                    <span class=\"value\">${formatCompact(entry.value)}</span>\n                  </div>`,\n                )}\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-spark-area-chart': Ui9000SparkAreaChart;\n  }\n}\n\nexport function registerSparkAreaChart(): void {\n  if (!customElements.get('ui9000-spark-area-chart')) {\n    customElements.define('ui9000-spark-area-chart', Ui9000SparkAreaChart);\n  }\n}\n\nregisterSparkAreaChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-spark-area-chart.js","sources":["../../../../src/components/spark-area-chart/element/ui9000-spark-area-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport type { DataPoint, WidgetScale } from '../../../types/index.js';\nimport { getSparkLineDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries } from '../../../utils/chart-legend.js';\nimport {\n  isFuseWidgetPayload,\n  xDomainHintFromWidget,\n  type FuseWidgetLike,\n} from '../../../utils/fuse-widget.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatCompact,\n  normalizeSparkLineData,\n  type SparkLineChartData,\n  type SparkLineSeries,\n} from '../../spark-line-chart/lib/index.js';\nimport { renderSparkLineChart } from '../../spark-line-chart/render/draw.js';\nimport { sparkLineChartStyles } from '../../spark-line-chart/element/styles.js';\n\n@customElement('ui9000-spark-area-chart')\nexport class Ui9000SparkAreaChart extends Ui9000ChartElement {\n  static override styles = [sparkLineChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @property({ type: String, attribute: 'x-label' })\n  xLabel = '';\n\n  @property({ type: String, attribute: 'y-label' })\n  yLabel = '';\n\n  @state()\n  private _empty = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): SparkLineSeries[] {\n    const raw = parseJsonAttr<DataPoint[] | SparkLineChartData | SparkLineSeries[] | FuseWidgetLike>(\n      this.dataJson,\n      [],\n    );\n    return normalizeSparkLineData(raw);\n  }\n\n  private xDomainHint(): string[] | undefined {\n    const raw = parseJsonAttr<unknown>(this.dataJson, null);\n    if (isFuseWidgetPayload(raw)) return xDomainHintFromWidget(raw);\n    return undefined;\n  }\n\n  private renderLegend(series: SparkLineSeries[]) {\n    if (!this.showLegend || series.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    const entries = lineLegendEntries(series, theme);\n    return renderChartLegend(entries);\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const series = this.parseData();\n    this._empty = series.length === 0 || series.every((s) => !s.points.length);\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getSparkLineDimensions(root);\n\n    renderSparkLineChart(root, {\n      series,\n      width,\n      height,\n      margin,\n      theme,\n      showGrid: this.showGrid,\n      showArea: true,\n      xDomainHint: this.xDomainHint(),\n      showTooltip: this.showTooltip,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ xLabel, entries, event }) => {\n            this.openTooltip(event, {\n              title: xLabel,\n              rows: entries.map((entry) => ({\n                label: entry.seriesName,\n                value: formatCompact(entry.value),\n              })),\n            });\n          }\n        : undefined,\n      onLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const series =\n      this._empty ? [] : this.parseData().filter((s) => s.points.length > 0);\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend(series)}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-spark-area-chart': Ui9000SparkAreaChart;\n  }\n}\n\nexport function registerSparkAreaChart(): void {\n  if (!customElements.get('ui9000-spark-area-chart')) {\n    customElements.define('ui9000-spark-area-chart', Ui9000SparkAreaChart);\n  }\n}\n\nregisterSparkAreaChart();\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyBO,IAAM,uBAAN,cAAmC,mBAAmB;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AAIL,SAAA,QAAqB;AAGrB,SAAA,WAAW;AAGX,SAAA,aAAa;AAGb,SAAA,cAAc;AAGd,SAAA,SAAS;AAGT,SAAA,SAAS;AAGT,SAAQ,SAAS;AAGjB,SAAQ,OAAO;AAAA,EAAA;AAAA,EAEN,oBAA0B;AACjC,UAAM,kBAAA;AACN,SAAK,kBAAkB,IAAI,eAAe,MAAM,KAAK,cAAc;AACnE,SAAK,gBAAgB,QAAQ,IAAI;AAAA,EACnC;AAAA,EAES,uBAA6B;;AACpC,eAAK,oBAAL,mBAAsB;AACtB,yBAAqB,KAAK,IAAI;AAC9B,UAAM,qBAAA;AAAA,EACR;AAAA,EAES,QAAQ,SAA+B;AAC9C,QAAI,kBAAkB,OAAO,EAAG,MAAK,aAAA;AAAA,EACvC;AAAA,EAEQ,eAAqB;AAC3B,yBAAqB,KAAK,IAAI;AAC9B,SAAK,OAAO,sBAAsB,MAAM,KAAK,MAAM;AAAA,EACrD;AAAA,EAEQ,YAA+B;AACrC,UAAM,MAAM;AAAA,MACV,KAAK;AAAA,MACL,CAAA;AAAA,IAAC;AAEH,WAAO,uBAAuB,GAAG;AAAA,EACnC;AAAA,EAEQ,cAAoC;AAC1C,UAAM,MAAM,cAAuB,KAAK,UAAU,IAAI;AACtD,QAAI,oBAAoB,GAAG,EAAG,QAAO,sBAAsB,GAAG;AAC9D,WAAO;AAAA,EACT;AAAA,EAEQ,aAAa,QAA2B;AAC9C,QAAI,CAAC,KAAK,cAAc,OAAO,UAAU,EAAG,QAAO;AACnD,UAAM,QAAQ,qBAAqB,IAAI;AACvC,UAAM,UAAU,kBAAkB,QAAQ,KAAK;AAC/C,WAAO,kBAAkB,OAAO;AAAA,EAClC;AAAA,EAEQ,OAAa;;AACnB,UAAM,QAAO,UAAK,eAAL,mBAAiB,cAAc;AAC5C,QAAI,CAAC,KAAM;AAEX,UAAM,SAAS,KAAK,UAAA;AACpB,SAAK,SAAS,OAAO,WAAW,KAAK,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,MAAM;AACzE,QAAI,KAAK,QAAQ;AACf,WAAK,gBAAA;AACL;AAAA,IACF;AAEA,UAAM,QAAQ,qBAAqB,IAAI;AACvC,UAAM,EAAE,OAAO,QAAQ,OAAA,IAAW,uBAAuB,IAAI;AAE7D,yBAAqB,MAAM;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,KAAK;AAAA,MACf,UAAU;AAAA,MACV,aAAa,KAAK,YAAA;AAAA,MAClB,aAAa,KAAK;AAAA,MAClB,QAAQ,KAAK,UAAU;AAAA,MACvB,QAAQ,KAAK,UAAU;AAAA,MACvB,GAAG,KAAK,kBAAA;AAAA,MACR,SAAS,KAAK,cACV,CAAC,EAAE,QAAQ,SAAS,YAAY;AAC9B,aAAK,YAAY,OAAO;AAAA,UACtB,OAAO;AAAA,UACP,MAAM,QAAQ,IAAI,CAAC,WAAW;AAAA,YAC5B,OAAO,MAAM;AAAA,YACb,OAAO,cAAc,MAAM,KAAK;AAAA,UAAA,EAChC;AAAA,QAAA,CACH;AAAA,MACH,IACA;AAAA,MACJ,SAAS,KAAK,cAAc,MAAM,KAAK,iBAAiB;AAAA,IAAA,CACzD;AAAA,EACH;AAAA,EAES,SAAS;AAChB,UAAM,QAAQ,KAAK,YAAA;AACnB,UAAM,SACJ,KAAK,SAAS,CAAA,IAAK,KAAK,UAAA,EAAY,OAAO,CAAC,MAAM,EAAE,OAAO,SAAS,CAAC;AACvE,WAAO;AAAA;AAAA,UAED,KAAK,kBAAkB,KAAK,CAAC;AAAA;AAAA,YAE3B,KAAK,aAAa,MAAM,CAAC;AAAA,yDACoB,KAAK,MAAM;AAAA,YACxD,KAAK,SAAS,sDAAsD,OAAO;AAAA,YAC3E,KAAK,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIxC;AACF;AA/Ha,qBACK,SAAS,CAAC,sBAAsB,gBAAgB;AAGhE,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,SAAS;AAAA,GAHnC,qBAIX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GANxC,qBAOX,WAAA,YAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,eAAe;AAAA,GAT1C,qBAUX,WAAA,cAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB;AAAA,GAZ3C,qBAaX,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GAfrC,qBAgBX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GAlBrC,qBAmBX,WAAA,UAAA,CAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GArBI,qBAsBH,WAAA,UAAA,CAAA;AAtBG,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;AAuIN,SAAS,yBAA+B;AAC7C,MAAI,CAAC,eAAe,IAAI,yBAAyB,GAAG;AAClD,mBAAe,OAAO,2BAA2B,oBAAoB;AAAA,EACvE;AACF;AAEA,uBAAA;"}

package/dist/components/spark-area-chart/index.js

@@ -1,10 +1,10 @@
 import { registerSparkAreaChart } from "./element/ui9000-spark-area-chart.js";
 import { Ui9000SparkAreaChart } from "./element/ui9000-spark-area-chart.js";
 import { renderSparkLineChart } from "../spark-line-chart/render/draw.js";
-import { default as default2 } from "./metadata.json.js";
+import { normalizeSparkLineData } from "../spark-line-chart/lib/normalize.js";
 import { collectSparkXDomain, collectSparkYDomain, orderSparkXDomain, parseXDate } from "../spark-line-chart/lib/domain.js";
 import { formatCompact, selectTickIndices } from "../spark-line-chart/lib/format.js";
-import { normalizeSparkLineData } from "../spark-line-chart/lib/normalize.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000SparkAreaChart,
   collectSparkXDomain,

package/dist/components/spark-line-chart/element/ui9000-spark-line-chart.d.ts

@@ -9,7 +9,6 @@ export declare class Ui9000SparkLineChart extends Ui9000ChartElement {
     showTooltip: boolean;
     xLabel: string;
     yLabel: string;
-    private _tooltip;
     private _empty;
     private _resizeObserver?;
     private _raf;

package/dist/components/spark-line-chart/element/ui9000-spark-line-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-spark-line-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/spark-line-chart/element/ui9000-spark-line-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAG7F,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAmBtE,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAgB,MAAM,4BAA4C;IAGlE,KAAK,EAAE,WAAW,CAAa;IAG/B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,MAAM,SAAM;IAGZ,MAAM,SAAM;IAGZ,OAAO,CAAC,QAAQ,CAKA;IAGhB,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,IAAI;IAyCH,MAAM;CAgChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAI7C"}
+{"version":3,"file":"ui9000-spark-line-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/spark-line-chart/element/ui9000-spark-line-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAG7F,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAkBtE,qBACa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAgB,MAAM,4BAA4C;IAGlE,KAAK,EAAE,WAAW,CAAa;IAG/B,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,WAAW,UAAQ;IAGnB,MAAM,SAAM;IAGZ,MAAM,SAAM;IAGZ,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IAER,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI/C,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,IAAI;IAyCH,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF;AAED,wBAAgB,sBAAsB,IAAI,IAAI,CAI7C"}

package/dist/components/spark-line-chart/element/ui9000-spark-line-chart.js

@@ -7,10 +7,10 @@ import { parseJsonAttr, getSparkLineDimensions } from "../../../utils/chart-help
 import { lineLegendEntries } from "../../../utils/chart-legend.js";
 import { isFuseWidgetPayload, xDomainHintFromWidget } from "../../../utils/fuse-widget.js";
 import { chartPropsChanged } from "../../../utils/lit-draw.js";
-import { renderSparkLineChart } from "../render/draw.js";
-import { sparkLineChartStyles } from "./styles.js";
 import { normalizeSparkLineData } from "../lib/normalize.js";
 import { formatCompact } from "../lib/format.js";
+import { renderSparkLineChart } from "../render/draw.js";
+import { sparkLineChartStyles } from "./styles.js";
 import { chartShellStyles } from "../../../element/chart-shell-styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -31,7 +31,6 @@ let Ui9000SparkLineChart = class extends Ui9000ChartElement {
     this.showTooltip = true;
     this.xLabel = "";
     this.yLabel = "";
-    this._tooltip = null;
     this._empty = false;
     this._raf = 0;
   }
@@ -96,17 +95,15 @@ let Ui9000SparkLineChart = class extends Ui9000ChartElement {
       yLabel: this.yLabel || void 0,
       ...this.axisLabelHandlers(),
       onHover: this.showTooltip ? ({ xLabel, entries, event }) => {
-        const rect = this.getBoundingClientRect();
-        this._tooltip = {
-          x: event.clientX - rect.left,
-          y: event.clientY - rect.top,
-          xLabel,
-          entries
-        };
+        this.openTooltip(event, {
+          title: xLabel,
+          rows: entries.map((entry) => ({
+            label: entry.seriesName,
+            value: formatCompact(entry.value)
+          }))
+        });
       } : void 0,
-      onLeave: this.showTooltip ? () => {
-        this._tooltip = null;
-      } : void 0
+      onLeave: this.showTooltip ? () => this.closeTooltip() : void 0
     });
   }
   render() {
@@ -119,20 +116,6 @@ let Ui9000SparkLineChart = class extends Ui9000ChartElement {
           ${this.renderLegend(series)}
           <div class="chart-root" part="chart" ?hidden=${this._empty}></div>
           ${this._empty ? html`<div class="empty" part="empty">No data</div>` : nothing}
-          ${this._tooltip ? html`<div
-                class="tooltip"
-                part="tooltip"
-                style="left:${this._tooltip.x}px;top:${this._tooltip.y}px"
-              >
-                <div class="x">${this._tooltip.xLabel}</div>
-                ${this._tooltip.entries.map(
-      (entry) => html`<div class="row">
-                    <span class="swatch" style="background:${entry.color}"></span>
-                    <span>${entry.seriesName}</span>
-                    <span class="value">${formatCompact(entry.value)}</span>
-                  </div>`
-    )}
-              </div>` : nothing}
           ${this.renderShellLabelTooltip()}
         </div>
       </div>
@@ -158,9 +141,6 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "y-label" })
 ], Ui9000SparkLineChart.prototype, "yLabel", 2);
-__decorateClass([
-  state()
-], Ui9000SparkLineChart.prototype, "_tooltip", 2);
 __decorateClass([
   state()
 ], Ui9000SparkLineChart.prototype, "_empty", 2);

package/dist/components/spark-line-chart/element/ui9000-spark-line-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui9000-spark-line-chart.js","sources":["../../../../src/components/spark-line-chart/element/ui9000-spark-line-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport type { DataPoint, WidgetScale } from '../../../types/index.js';\nimport { getSparkLineDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries } from '../../../utils/chart-legend.js';\nimport {\n  isFuseWidgetPayload,\n  xDomainHintFromWidget,\n  type FuseWidgetLike,\n} from '../../../utils/fuse-widget.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatCompact,\n  normalizeSparkLineData,\n  type SparkLineChartData,\n  type SparkLineHoverEntry,\n  type SparkLineSeries,\n} from '../lib/index.js';\nimport { renderSparkLineChart } from '../render/draw.js';\nimport { sparkLineChartStyles } from './styles.js';\n\n@customElement('ui9000-spark-line-chart')\nexport class Ui9000SparkLineChart extends Ui9000ChartElement {\n  static override styles = [sparkLineChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @property({ type: String, attribute: 'x-label' })\n  xLabel = '';\n\n  @property({ type: String, attribute: 'y-label' })\n  yLabel = '';\n\n  @state()\n  private _tooltip: {\n    x: number;\n    y: number;\n    xLabel: string;\n    entries: SparkLineHoverEntry[];\n  } | null = null;\n\n  @state()\n  private _empty = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): SparkLineSeries[] {\n    const raw = parseJsonAttr<DataPoint[] | SparkLineChartData | SparkLineSeries[] | FuseWidgetLike>(\n      this.dataJson,\n      [],\n    );\n    return normalizeSparkLineData(raw);\n  }\n\n  private xDomainHint(): string[] | undefined {\n    const raw = parseJsonAttr<unknown>(this.dataJson, null);\n    if (isFuseWidgetPayload(raw)) return xDomainHintFromWidget(raw);\n    return undefined;\n  }\n\n  private renderLegend(series: SparkLineSeries[]) {\n    if (!this.showLegend || series.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    const entries = lineLegendEntries(series, theme);\n    return renderChartLegend(entries);\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const series = this.parseData();\n    this._empty = series.length === 0 || series.every((s) => !s.points.length);\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getSparkLineDimensions(root);\n\n    renderSparkLineChart(root, {\n      series,\n      width,\n      height,\n      margin,\n      theme,\n      showGrid: this.showGrid,\n      xDomainHint: this.xDomainHint(),\n      showTooltip: this.showTooltip,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ xLabel, entries, event }) => {\n            const rect = this.getBoundingClientRect();\n            this._tooltip = {\n              x: event.clientX - rect.left,\n              y: event.clientY - rect.top,\n              xLabel,\n              entries,\n            };\n          }\n        : undefined,\n      onLeave: this.showTooltip ? () => { this._tooltip = null; } : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const series =\n      this._empty ? [] : this.parseData().filter((s) => s.points.length > 0);\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend(series)}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\n          ${this._tooltip\n            ? html`<div\n                class=\"tooltip\"\n                part=\"tooltip\"\n                style=\"left:${this._tooltip.x}px;top:${this._tooltip.y}px\"\n              >\n                <div class=\"x\">${this._tooltip.xLabel}</div>\n                ${this._tooltip.entries.map(\n                  (entry) => html`<div class=\"row\">\n                    <span class=\"swatch\" style=\"background:${entry.color}\"></span>\n                    <span>${entry.seriesName}</span>\n                    <span class=\"value\">${formatCompact(entry.value)}</span>\n                  </div>`,\n                )}\n              </div>`\n            : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-spark-line-chart': Ui9000SparkLineChart;\n  }\n}\n\nexport function registerSparkLineChart(): void {\n  if (!customElements.get('ui9000-spark-line-chart')) {\n    customElements.define('ui9000-spark-line-chart', Ui9000SparkLineChart);\n  }\n}\n\nregisterSparkLineChart();\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui9000-spark-line-chart.js","sources":["../../../../src/components/spark-line-chart/element/ui9000-spark-line-chart.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chartShellStyles, Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';\nimport { renderChartLegend } from '../../../element/chart-legend-render.js';\nimport { readThemeFromElement } from '../../../context/widget-context.js';\nimport type { DataPoint, WidgetScale } from '../../../types/index.js';\nimport { getSparkLineDimensions, parseJsonAttr } from '../../../utils/chart-helpers.js';\nimport { lineLegendEntries } from '../../../utils/chart-legend.js';\nimport {\n  isFuseWidgetPayload,\n  xDomainHintFromWidget,\n  type FuseWidgetLike,\n} from '../../../utils/fuse-widget.js';\nimport { chartPropsChanged } from '../../../utils/lit-draw.js';\nimport {\n  formatCompact,\n  normalizeSparkLineData,\n  type SparkLineChartData,\n  type SparkLineSeries,\n} from '../lib/index.js';\nimport { renderSparkLineChart } from '../render/draw.js';\nimport { sparkLineChartStyles } from './styles.js';\n\n@customElement('ui9000-spark-line-chart')\nexport class Ui9000SparkLineChart extends Ui9000ChartElement {\n  static override styles = [sparkLineChartStyles, chartShellStyles];\n\n  @property({ type: String, attribute: 'scale' })\n  scale: WidgetScale = 'default';\n\n  @property({ type: Boolean, attribute: 'show-grid' })\n  showGrid = true;\n\n  @property({ type: Boolean, attribute: 'show-legend' })\n  showLegend = true;\n\n  @property({ type: Boolean, attribute: 'show-tooltip' })\n  showTooltip = true;\n\n  @property({ type: String, attribute: 'x-label' })\n  xLabel = '';\n\n  @property({ type: String, attribute: 'y-label' })\n  yLabel = '';\n\n  @state()\n  private _empty = false;\n\n  private _resizeObserver?: ResizeObserver;\n  private _raf = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._resizeObserver = new ResizeObserver(() => this.scheduleDraw());\n    this._resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    this._resizeObserver?.disconnect();\n    cancelAnimationFrame(this._raf);\n    super.disconnectedCallback();\n  }\n\n  override updated(changed: PropertyValues): void {\n    if (chartPropsChanged(changed)) this.scheduleDraw();\n  }\n\n  private scheduleDraw(): void {\n    cancelAnimationFrame(this._raf);\n    this._raf = requestAnimationFrame(() => this.draw());\n  }\n\n  private parseData(): SparkLineSeries[] {\n    const raw = parseJsonAttr<DataPoint[] | SparkLineChartData | SparkLineSeries[] | FuseWidgetLike>(\n      this.dataJson,\n      [],\n    );\n    return normalizeSparkLineData(raw);\n  }\n\n  private xDomainHint(): string[] | undefined {\n    const raw = parseJsonAttr<unknown>(this.dataJson, null);\n    if (isFuseWidgetPayload(raw)) return xDomainHintFromWidget(raw);\n    return undefined;\n  }\n\n  private renderLegend(series: SparkLineSeries[]) {\n    if (!this.showLegend || series.length <= 1) return nothing;\n    const theme = readThemeFromElement(this);\n    const entries = lineLegendEntries(series, theme);\n    return renderChartLegend(entries);\n  }\n\n  private draw(): void {\n    const root = this.shadowRoot?.querySelector('.chart-root') as HTMLElement | null;\n    if (!root) return;\n\n    const series = this.parseData();\n    this._empty = series.length === 0 || series.every((s) => !s.points.length);\n    if (this._empty) {\n      root.replaceChildren();\n      return;\n    }\n\n    const theme = readThemeFromElement(this);\n    const { width, height, margin } = getSparkLineDimensions(root);\n\n    renderSparkLineChart(root, {\n      series,\n      width,\n      height,\n      margin,\n      theme,\n      showGrid: this.showGrid,\n      xDomainHint: this.xDomainHint(),\n      showTooltip: this.showTooltip,\n      xLabel: this.xLabel || undefined,\n      yLabel: this.yLabel || undefined,\n      ...this.axisLabelHandlers(),\n      onHover: this.showTooltip\n        ? ({ xLabel, entries, event }) => {\n            this.openTooltip(event, {\n              title: xLabel,\n              rows: entries.map((entry) => ({\n                label: entry.seriesName,\n                value: formatCompact(entry.value),\n              })),\n            });\n          }\n        : undefined,\n      onLeave: this.showTooltip ? () => this.closeTooltip() : undefined,\n    });\n  }\n\n  override render() {\n    const title = this.headerTitle();\n    const series =\n      this._empty ? [] : this.parseData().filter((s) => s.points.length > 0);\n    return html`\n      <div class=\"widget-shell\" part=\"shell\">\n        ${this.renderShellHeader(title)}\n        <div class=\"widget-body\">\n          ${this.renderLegend(series)}\n          <div class=\"chart-root\" part=\"chart\" ?hidden=${this._empty}></div>\n          ${this._empty ? html`<div class=\"empty\" part=\"empty\">No data</div>` : nothing}\n          ${this.renderShellLabelTooltip()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui9000-spark-line-chart': Ui9000SparkLineChart;\n  }\n}\n\nexport function registerSparkLineChart(): void {\n  if (!customElements.get('ui9000-spark-line-chart')) {\n    customElements.define('ui9000-spark-line-chart', Ui9000SparkLineChart);\n  }\n}\n\nregisterSparkLineChart();\n"],"names":[],"mappings":"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"}

package/dist/components/spark-line-chart/index.js

@@ -1,10 +1,10 @@
 import { registerSparkLineChart } from "./element/ui9000-spark-line-chart.js";
 import { Ui9000SparkLineChart } from "./element/ui9000-spark-line-chart.js";
 import { renderSparkLineChart } from "./render/draw.js";
-import { default as default2 } from "./metadata.json.js";
+import { normalizeSparkLineData } from "./lib/normalize.js";
 import { collectSparkXDomain, collectSparkYDomain, orderSparkXDomain, parseXDate } from "./lib/domain.js";
 import { formatCompact, selectTickIndices } from "./lib/format.js";
-import { normalizeSparkLineData } from "./lib/normalize.js";
+import { default as default2 } from "./metadata.json.js";
 export {
   Ui9000SparkLineChart,
   collectSparkXDomain,

package/dist/components/status-gauge-widget/element/styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Surfaces follow the chart tokens (`--ui9000-color-*`) and, when the host
+ * provides them, the client `--colors-*` theme. Series colors are the same
+ * qualitative palette as the other charts (`fuse-palette` / `FD.series`).
+ */
+export declare const statusGaugeStyles: import('lit').CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/status-gauge-widget/element/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-gauge-widget/element/styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,yBAoQ7B,CAAC"}

package/dist/components/status-gauge-widget/element/styles.js

@@ -0,0 +1,266 @@
+import { css } from "lit";
+const statusGaugeStyles = css`
+  :host {
+    display: block;
+    height: 100%;
+    min-height: 0;
+    font-family: var(--ui9000-font-family, Inter, system-ui, -apple-system, sans-serif);
+    font-feature-settings: 'ss01' on, 'cv11' on;
+    -webkit-font-smoothing: antialiased;
+    --sg-text: var(--colors-neutral-text-default, #21262e);
+    --sg-muted: var(--colors-neutral-text-weak, #6c7584);
+    --sg-surface: var(--colors-neutral-background-base, #ffffff);
+    --sg-card: var(--colors-neutral-background-default, #f3f4f6);
+    --sg-badge: var(--colors-neutral-background-hover, #e8eaed);
+    --sg-line: var(--colors-neutral-border-weakest, #e5e7eb);
+    --sg-track: var(--colors-neutral-border-weaker, #d5d8de);
+    --sg-thumb: #ffffff;
+    --sg-thumb-ink: #21262e;
+    --sg-primary: var(--ui9000-color-primary, #473dd9);
+    --sg-ok: #36c4a5;
+    --sg-warning: #ff8c47;
+    --sg-critical: #ff4781;
+    --sg-neutral: #56546d;
+    --sg-gauge-0: #36c4a5;
+    --sg-gauge-1: #473dd9;
+    --sg-gauge-2: #ff8c47;
+    --sg-gauge-3: #ff4781;
+    color: var(--sg-text);
+  }
+
+  :host([theme='dark']),
+  :host([data-mode='dark']),
+  :host-context([data-theme='dark']) {
+    --sg-text: #eff0f1;
+    --sg-muted: #a4a9b1;
+    --sg-surface: #16181d;
+    --sg-card: #22262e;
+    --sg-badge: #2a2e36;
+    --sg-line: #343a44;
+    --sg-track: #4a5160;
+    --sg-thumb: #ffffff;
+    --sg-thumb-ink: #16181d;
+    color: var(--sg-text);
+  }
+
+  .panel {
+    box-sizing: border-box;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 16px;
+    border-radius: 12px;
+    background: var(--sg-surface);
+    border: 1px solid var(--sg-line);
+    color: var(--sg-text);
+    overflow: hidden;
+  }
+
+  .panel[data-mode='dark'] {
+    --sg-text: #eff0f1;
+    --sg-muted: #a4a9b1;
+    --sg-surface: #16181d;
+    --sg-card: #22262e;
+    --sg-badge: #2a2e36;
+    --sg-line: #343a44;
+    --sg-track: #4a5160;
+    --sg-thumb: #ffffff;
+    --sg-thumb-ink: #16181d;
+    background: #16181d;
+    border-color: #343a44;
+    color: #eff0f1;
+  }
+
+  .title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: -0.011em;
+    line-height: 22px;
+  }
+
+  .subtitle {
+    margin: 2px 0 0;
+    color: var(--sg-muted);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+
+  .rule {
+    height: 1px;
+    margin: 4px 0 2px;
+    background: var(--sg-line);
+  }
+
+  .health {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-height: 28px;
+  }
+
+  .health-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .check {
+    width: 22px;
+    height: 22px;
+    flex: none;
+    display: grid;
+    place-items: center;
+    border-radius: 6px;
+    border: 1px solid var(--sg-line);
+    color: var(--sg-muted);
+  }
+
+  .check svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex: none;
+    padding: 3px 9px;
+    border-radius: 14px;
+    background: var(--sg-badge);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+  }
+
+  .badge.ok { color: var(--sg-ok); }
+  .badge.warning { color: var(--sg-warning); }
+  .badge.critical { color: var(--sg-critical); }
+  .badge.neutral { color: var(--sg-neutral); }
+
+  .dot {
+    width: 8px;
+    height: 8px;
+    flex: none;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .gauge {
+    flex: 1 1 140px;
+    min-height: 140px;
+    min-width: 0;
+  }
+
+  .gauge svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .gauge text {
+    font-family: inherit;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .metrics {
+    display: grid;
+    gap: 8px;
+    min-height: 0;
+    max-height: 48%;
+    overflow: auto;
+  }
+
+  .metrics[data-cols='1'] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .metrics[data-cols='2'] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .card {
+    min-width: 0;
+    padding: 10px 12px 8px;
+    border-radius: 8px;
+    background: var(--sg-card);
+  }
+
+  .card-top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .card-label {
+    color: var(--sg-muted);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+  }
+
+  .card .dot {
+    margin-top: 3px;
+  }
+
+  .card.ok .dot { color: var(--sg-ok); background: var(--sg-ok); }
+  .card.warning .dot { color: var(--sg-warning); background: var(--sg-warning); }
+  .card.critical .dot { color: var(--sg-critical); background: var(--sg-critical); }
+  .card.neutral .dot { color: var(--sg-neutral); background: var(--sg-neutral); }
+
+  .card.ok .bar > span { background: linear-gradient(90deg, #36c4a5, #adf4e5); }
+  .card.warning .bar > span { background: linear-gradient(90deg, #ff8c47, #ffceb0); }
+  .card.critical .bar > span { background: linear-gradient(90deg, #ff4781, #ffb0c9); }
+  .card.neutral .bar > span { background: var(--sg-neutral); }
+
+  .value {
+    margin-top: 6px;
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1.15;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .unit {
+    margin-left: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--sg-muted);
+  }
+
+  .bar {
+    height: 4px;
+    margin-top: 10px;
+    overflow: hidden;
+    border-radius: 99px;
+    background: var(--sg-track);
+  }
+
+  .bar > span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .empty {
+    margin: auto;
+    color: var(--sg-muted);
+    font-size: 13px;
+  }
+`;
+export {
+  statusGaugeStyles
+};
+//# sourceMappingURL=styles.js.map

package/dist/components/status-gauge-widget/element/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/status-gauge-widget/element/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Surfaces follow the chart tokens (`--ui9000-color-*`) and, when the host\n * provides them, the client `--colors-*` theme. Series colors are the same\n * qualitative palette as the other charts (`fuse-palette` / `FD.series`).\n */\nexport const statusGaugeStyles = css`\n  :host {\n    display: block;\n    height: 100%;\n    min-height: 0;\n    font-family: var(--ui9000-font-family, Inter, system-ui, -apple-system, sans-serif);\n    font-feature-settings: 'ss01' on, 'cv11' on;\n    -webkit-font-smoothing: antialiased;\n    --sg-text: var(--colors-neutral-text-default, #21262e);\n    --sg-muted: var(--colors-neutral-text-weak, #6c7584);\n    --sg-surface: var(--colors-neutral-background-base, #ffffff);\n    --sg-card: var(--colors-neutral-background-default, #f3f4f6);\n    --sg-badge: var(--colors-neutral-background-hover, #e8eaed);\n    --sg-line: var(--colors-neutral-border-weakest, #e5e7eb);\n    --sg-track: var(--colors-neutral-border-weaker, #d5d8de);\n    --sg-thumb: #ffffff;\n    --sg-thumb-ink: #21262e;\n    --sg-primary: var(--ui9000-color-primary, #473dd9);\n    --sg-ok: #36c4a5;\n    --sg-warning: #ff8c47;\n    --sg-critical: #ff4781;\n    --sg-neutral: #56546d;\n    --sg-gauge-0: #36c4a5;\n    --sg-gauge-1: #473dd9;\n    --sg-gauge-2: #ff8c47;\n    --sg-gauge-3: #ff4781;\n    color: var(--sg-text);\n  }\n\n  :host([theme='dark']),\n  :host([data-mode='dark']),\n  :host-context([data-theme='dark']) {\n    --sg-text: #eff0f1;\n    --sg-muted: #a4a9b1;\n    --sg-surface: #16181d;\n    --sg-card: #22262e;\n    --sg-badge: #2a2e36;\n    --sg-line: #343a44;\n    --sg-track: #4a5160;\n    --sg-thumb: #ffffff;\n    --sg-thumb-ink: #16181d;\n    color: var(--sg-text);\n  }\n\n  .panel {\n    box-sizing: border-box;\n    height: 100%;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    padding: 16px;\n    border-radius: 12px;\n    background: var(--sg-surface);\n    border: 1px solid var(--sg-line);\n    color: var(--sg-text);\n    overflow: hidden;\n  }\n\n  .panel[data-mode='dark'] {\n    --sg-text: #eff0f1;\n    --sg-muted: #a4a9b1;\n    --sg-surface: #16181d;\n    --sg-card: #22262e;\n    --sg-badge: #2a2e36;\n    --sg-line: #343a44;\n    --sg-track: #4a5160;\n    --sg-thumb: #ffffff;\n    --sg-thumb-ink: #16181d;\n    background: #16181d;\n    border-color: #343a44;\n    color: #eff0f1;\n  }\n\n  .title {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    letter-spacing: -0.011em;\n    line-height: 22px;\n  }\n\n  .subtitle {\n    margin: 2px 0 0;\n    color: var(--sg-muted);\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n  }\n\n  .rule {\n    height: 1px;\n    margin: 4px 0 2px;\n    background: var(--sg-line);\n  }\n\n  .health {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    min-height: 28px;\n  }\n\n  .health-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    min-width: 0;\n    font-size: 14px;\n    font-weight: 600;\n    line-height: 20px;\n  }\n\n  .check {\n    width: 22px;\n    height: 22px;\n    flex: none;\n    display: grid;\n    place-items: center;\n    border-radius: 6px;\n    border: 1px solid var(--sg-line);\n    color: var(--sg-muted);\n  }\n\n  .check svg {\n    width: 14px;\n    height: 14px;\n  }\n\n  .badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    flex: none;\n    padding: 3px 9px;\n    border-radius: 14px;\n    background: var(--sg-badge);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n  }\n\n  .badge.ok { color: var(--sg-ok); }\n  .badge.warning { color: var(--sg-warning); }\n  .badge.critical { color: var(--sg-critical); }\n  .badge.neutral { color: var(--sg-neutral); }\n\n  .dot {\n    width: 8px;\n    height: 8px;\n    flex: none;\n    border-radius: 50%;\n    background: currentColor;\n  }\n\n  .gauge {\n    flex: 1 1 140px;\n    min-height: 140px;\n    min-width: 0;\n  }\n\n  .gauge svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n\n  .gauge text {\n    font-family: inherit;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .metrics {\n    display: grid;\n    gap: 8px;\n    min-height: 0;\n    max-height: 48%;\n    overflow: auto;\n  }\n\n  .metrics[data-cols='1'] {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .metrics[data-cols='2'] {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .card {\n    min-width: 0;\n    padding: 10px 12px 8px;\n    border-radius: 8px;\n    background: var(--sg-card);\n  }\n\n  .card-top {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 8px;\n  }\n\n  .card-label {\n    color: var(--sg-muted);\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 16px;\n  }\n\n  .card .dot {\n    margin-top: 3px;\n  }\n\n  .card.ok .dot { color: var(--sg-ok); background: var(--sg-ok); }\n  .card.warning .dot { color: var(--sg-warning); background: var(--sg-warning); }\n  .card.critical .dot { color: var(--sg-critical); background: var(--sg-critical); }\n  .card.neutral .dot { color: var(--sg-neutral); background: var(--sg-neutral); }\n\n  .card.ok .bar > span { background: linear-gradient(90deg, #36c4a5, #adf4e5); }\n  .card.warning .bar > span { background: linear-gradient(90deg, #ff8c47, #ffceb0); }\n  .card.critical .bar > span { background: linear-gradient(90deg, #ff4781, #ffb0c9); }\n  .card.neutral .bar > span { background: var(--sg-neutral); }\n\n  .value {\n    margin-top: 6px;\n    font-size: 22px;\n    font-weight: 600;\n    letter-spacing: -0.02em;\n    line-height: 1.15;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .unit {\n    margin-left: 4px;\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--sg-muted);\n  }\n\n  .bar {\n    height: 4px;\n    margin-top: 10px;\n    overflow: hidden;\n    border-radius: 99px;\n    background: var(--sg-track);\n  }\n\n  .bar > span {\n    display: block;\n    height: 100%;\n    border-radius: inherit;\n  }\n\n  .empty {\n    margin: auto;\n    color: var(--sg-muted);\n    font-size: 13px;\n  }\n`;\n"],"names":[],"mappings":";AAOO,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/status-gauge-widget/element/ui9000-status-gauge-widget.d.ts

@@ -0,0 +1,29 @@
+import { PropertyValues } from 'lit';
+import { Ui9000ChartElement } from '../../../element/ui9000-chart-base.js';
+export declare class Ui9000StatusGaugeWidget extends Ui9000ChartElement {
+    static styles: import('lit').CSSResult[];
+    /** `light` or `dark`. Empty follows `--ui9000-mode` and the host `data-theme`. */
+    theme: string;
+    private _model;
+    private _columns;
+    private _mode;
+    private _resizeObserver?;
+    private _raf;
+    private readonly _gradientId;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues): void;
+    private syncMode;
+    updated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private scheduleLayout;
+    private drawGauge;
+}
+export declare function registerStatusGaugeWidget(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui9000-status-gauge-widget': Ui9000StatusGaugeWidget;
+    }
+}
+//# sourceMappingURL=ui9000-status-gauge-widget.d.ts.map

package/dist/components/status-gauge-widget/element/ui9000-status-gauge-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui9000-status-gauge-widget.d.ts","sourceRoot":"","sources":["../../../../src/components/status-gauge-widget/element/ui9000-status-gauge-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI9D,OAAO,EAAoB,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAc7F,qBACa,uBAAwB,SAAQ,kBAAkB;IAC7D,OAAgB,MAAM,4BAAyC;IAE/D,kFAAkF;IAElF,KAAK,SAAM;IAGX,OAAO,CAAC,MAAM,CAMZ;IAGF,OAAO,CAAC,QAAQ,CAAK;IAGrB,OAAO,CAAC,KAAK,CAA6B;IAE1C,OAAO,CAAC,eAAe,CAAC,CAAiB;IACzC,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA6C;;IAOhE,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAM5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAOlD,OAAO,CAAC,QAAQ;IASP,OAAO,IAAI,IAAI;IAIf,MAAM;IAqDf,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,SAAS;CAKlB;AAED,wBAAgB,yBAAyB,IAAI,IAAI,CAIhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,uBAAuB,CAAC;KACvD;CACF"}