@ind-ds/core 0.1.0 → 0.2.0

package/dist/collection/components/molecules/device-info-card/device-info-card.js

@@ -0,0 +1,194 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Device nameplate card: identity metadata (vendor, model, firmware, serial,
+ * address) plus a live connection indicator. For a device detail panel.
+ */
+export class IndDeviceInfoCard {
+    /** Device name (e.g. "Line 2 PLC"). */
+    name;
+    /** Manufacturer. */
+    vendor;
+    /** Model number. */
+    model;
+    /** Firmware / software version. */
+    firmware;
+    /** Serial number. */
+    serial;
+    /** Network address (IP / endpoint). */
+    address;
+    /** Connection state. */
+    state = 'disconnected';
+    rows() {
+        return [
+            { label: 'Vendor', value: this.vendor },
+            { label: 'Model', value: this.model },
+            { label: 'Firmware', value: this.firmware },
+            { label: 'Serial', value: this.serial },
+            { label: 'Address', value: this.address },
+        ].filter((r) => r.value !== undefined && r.value !== '');
+    }
+    render() {
+        return (h(Host, { key: '6096626ff4cca480a4783b9d3cd949775c184887', role: "group", "aria-label": `${this.name} device information` }, h("div", { key: '19399fee7f1391f85a21f737221ef3acfb1ba87e', class: "card-head" }, h("span", { key: '424553a7603eb96e57892b5ac7d80ba000c29f1e', class: "card-title", part: "name" }, this.name), h("ind-connection-indicator", { key: 'ae732aa0de850d5e0b29ffd3c43e7503cc871a1d', state: this.state, size: "sm" })), h("dl", { key: '516b28c08e1cfef117dc5ce314c8372e61b873cd', class: "meta", part: "meta" }, this.rows().map((r) => [
+            h("dt", { class: "dt", part: "dt" }, r.label),
+            h("dd", { class: "dd", part: "dd" }, r.value),
+        ]))));
+    }
+    static get is() { return "ind-device-info-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "device-info-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "device-info-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Device name (e.g. \"Line 2 PLC\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "vendor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Manufacturer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vendor"
+            },
+            "model": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Model number."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "model"
+            },
+            "firmware": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Firmware / software version."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "firmware"
+            },
+            "serial": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Serial number."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "serial"
+            },
+            "address": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Network address (IP / endpoint)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "address"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConnectionState",
+                    "resolved": "\"connected\" | \"connecting\" | \"disconnected\" | \"error\"",
+                    "references": {
+                        "ConnectionState": {
+                            "location": "import",
+                            "path": "../../atoms/connection-indicator/connection-indicator",
+                            "id": "src/components/atoms/connection-indicator/connection-indicator.tsx::ConnectionState",
+                            "referenceLocation": "ConnectionState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Connection state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'disconnected'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=device-info-card.js.map

package/dist/collection/components/molecules/device-info-card/device-info-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-info-card.js","sourceRoot":"","sources":["../../../../src/components/molecules/device-info-card/device-info-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;GAGG;AAMH,MAAM,OAAO,iBAAiB;IAC5B,uCAAuC;IAC/B,IAAI,CAAU;IACtB,oBAAoB;IACZ,MAAM,CAAU;IACxB,oBAAoB;IACZ,KAAK,CAAU;IACvB,mCAAmC;IAC3B,QAAQ,CAAU;IAC1B,qBAAqB;IACb,MAAM,CAAU;IACxB,uCAAuC;IAC/B,OAAO,CAAU;IACzB,wBAAwB;IACC,KAAK,GAAoB,cAAc,CAAC;IAEzD,IAAI;QACV,OAAO;YACL,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;YACvC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YACrC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YAC3C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;YACvC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;SAC1C,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,GAAG,IAAI,CAAC,IAAI,qBAAqB;YAC9D,4DAAK,KAAK,EAAC,WAAW;gBACpB,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ;gBACvD,iFAA0B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG,CACrD;YACN,2DAAI,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IACzB,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;gBACtB,UAAI,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,IAAE,CAAC,CAAC,KAAK,CAAM;gBACvC,UAAI,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,IAAE,CAAC,CAAC,KAAK,CAAM;aACxC,CAAC,CACC,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { ConnectionState } from '../../atoms/connection-indicator/connection-indicator';\n\n/**\n * Device nameplate card: identity metadata (vendor, model, firmware, serial,\n * address) plus a live connection indicator. For a device detail panel.\n */\n@Component({\n  tag: 'ind-device-info-card',\n  styleUrls: ['../_shared/card.css', 'device-info-card.css'],\n  shadow: true,\n})\nexport class IndDeviceInfoCard {\n  /** Device name (e.g. \"Line 2 PLC\"). */\n  @Prop() name!: string;\n  /** Manufacturer. */\n  @Prop() vendor?: string;\n  /** Model number. */\n  @Prop() model?: string;\n  /** Firmware / software version. */\n  @Prop() firmware?: string;\n  /** Serial number. */\n  @Prop() serial?: string;\n  /** Network address (IP / endpoint). */\n  @Prop() address?: string;\n  /** Connection state. */\n  @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n\n  private rows() {\n    return [\n      { label: 'Vendor', value: this.vendor },\n      { label: 'Model', value: this.model },\n      { label: 'Firmware', value: this.firmware },\n      { label: 'Serial', value: this.serial },\n      { label: 'Address', value: this.address },\n    ].filter((r) => r.value !== undefined && r.value !== '');\n  }\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={`${this.name} device information`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"name\">{this.name}</span>\n          <ind-connection-indicator state={this.state} size=\"sm\" />\n        </div>\n        <dl class=\"meta\" part=\"meta\">\n          {this.rows().map((r) => [\n            <dt class=\"dt\" part=\"dt\">{r.label}</dt>,\n            <dd class=\"dd\" part=\"dd\">{r.value}</dd>,\n          ])}\n        </dl>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/energy-card/energy-card.css

@@ -0,0 +1,12 @@
+:host {
+  min-width: 180px;
+}
+
+.arrow.trend-up   { color: var(--ind-state-fault-bg, #dc2626); }
+.arrow.trend-down { color: var(--ind-state-running-bg, #16a34a); }
+.arrow.trend-flat { color: var(--ind-surface-text-muted); }
+
+.spark {
+  width: 100%;
+  height: 36px;
+}

package/dist/collection/components/molecules/energy-card/energy-card.js

@@ -0,0 +1,206 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Energy / power KPI card: a headline reading plus an `<ind-sparkline>` for the
+ * recent profile and an optional cumulative figure for the period.
+ */
+export class IndEnergyCard {
+    /** Metric name (e.g. "Active power", "Energy today"). */
+    label;
+    /** Instantaneous value. */
+    value;
+    /** Unit (default kW). */
+    unit = 'kW';
+    /** Decimal places. */
+    precision = 1;
+    /** Recent samples for the sparkline. */
+    points = [];
+    /** Trend arrow. */
+    trend = 'none';
+    /** Cumulative value for the period (e.g. kWh today). */
+    total;
+    /** Cumulative unit (default kWh). */
+    totalUnit = 'kWh';
+    render() {
+        const arrow = this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : this.trend === 'flat' ? '▬' : '';
+        const valueTrend = this.trend === 'flat' ? 'stable' : this.trend === 'none' ? 'none' : this.trend;
+        return (h(Host, { key: '6a1e87d1ba637c85937d672a72e6b04eb2c53bd1', role: "group", "aria-label": `${this.label}: ${this.value.toFixed(this.precision)} ${this.unit}` }, h("div", { key: 'a9b7c35217f479e2fecd7c4b3055bee9c31dc792', class: "card-head" }, h("span", { key: '97d732992573a11bebce1c7eb71637c1c0d4e8ec', class: "card-title", part: "label" }, this.label), arrow && h("span", { key: 'ddfa5633ce99e620fff7f3014c56b854d7609d5e', class: `arrow trend-${this.trend}`, part: "arrow", "aria-hidden": "true" }, arrow)), h("ind-value", { key: 'c9a36ee2223c248354bc03f1ca5713b293906acd', part: "value", value: this.value, unit: this.unit, precision: this.precision, trend: valueTrend, size: "lg" }), this.points.length > 1 && (h("ind-sparkline", { key: 'acb497f4a84df274fc77f07ebd2ae92f511ec41b', class: "spark", part: "spark", points: this.points, variant: "default", area: true })), this.total !== undefined && (h("div", { key: '66afecfb971972446303c9cacb79b5ec7aaa191d', class: "card-detail", part: "total" }, this.total.toLocaleString(), " ", this.totalUnit, " this period"))));
+    }
+    static get is() { return "ind-energy-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "energy-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "energy-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Metric name (e.g. \"Active power\", \"Energy today\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Instantaneous value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unit (default kW)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit",
+                "defaultValue": "'kW'"
+            },
+            "precision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Decimal places."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision",
+                "defaultValue": "1"
+            },
+            "points": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Recent samples for the sparkline."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "trend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EnergyTrend",
+                    "resolved": "\"down\" | \"flat\" | \"none\" | \"up\"",
+                    "references": {
+                        "EnergyTrend": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/molecules/energy-card/energy-card.tsx",
+                            "id": "src/components/molecules/energy-card/energy-card.tsx::EnergyTrend"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Trend arrow."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trend",
+                "defaultValue": "'none'"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cumulative value for the period (e.g. kWh today)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total"
+            },
+            "totalUnit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cumulative unit (default kWh)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-unit",
+                "defaultValue": "'kWh'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=energy-card.js.map

package/dist/collection/components/molecules/energy-card/energy-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-card.js","sourceRoot":"","sources":["../../../../src/components/molecules/energy-card/energy-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;GAGG;AAMH,MAAM,OAAO,aAAa;IACxB,yDAAyD;IACjD,KAAK,CAAU;IACvB,2BAA2B;IACnB,KAAK,CAAU;IACvB,yBAAyB;IACjB,IAAI,GAAW,IAAI,CAAC;IAC5B,sBAAsB;IACd,SAAS,GAAW,CAAC,CAAC;IAC9B,wCAAwC;IAChC,MAAM,GAAa,EAAE,CAAC;IAC9B,mBAAmB;IACX,KAAK,GAAgB,MAAM,CAAC;IACpC,wDAAwD;IAChD,KAAK,CAAU;IACvB,qCAAqC;IAC7B,SAAS,GAAW,KAAK,CAAC;IAElC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QACzG,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAClG,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;YAChG,4DAAK,KAAK,EAAC,WAAW;gBACpB,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACxD,KAAK,IAAI,6DAAM,KAAK,EAAE,eAAe,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAC,OAAO,iBAAa,MAAM,IAAE,KAAK,CAAQ,CAC9F;YACN,kEACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,UAA+C,EACtD,IAAI,EAAC,IAAI,GACT;YACD,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,sEAAe,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,SAAG,CACzF;YACA,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAC3B,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO;gBAClC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;;gBAAG,IAAI,CAAC,SAAS;+BACzC,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EnergyTrend = 'none' | 'up' | 'down' | 'flat';\n\n/**\n * Energy / power KPI card: a headline reading plus an `<ind-sparkline>` for the\n * recent profile and an optional cumulative figure for the period.\n */\n@Component({\n  tag: 'ind-energy-card',\n  styleUrls: ['../_shared/card.css', 'energy-card.css'],\n  shadow: true,\n})\nexport class IndEnergyCard {\n  /** Metric name (e.g. \"Active power\", \"Energy today\"). */\n  @Prop() label!: string;\n  /** Instantaneous value. */\n  @Prop() value!: number;\n  /** Unit (default kW). */\n  @Prop() unit: string = 'kW';\n  /** Decimal places. */\n  @Prop() precision: number = 1;\n  /** Recent samples for the sparkline. */\n  @Prop() points: number[] = [];\n  /** Trend arrow. */\n  @Prop() trend: EnergyTrend = 'none';\n  /** Cumulative value for the period (e.g. kWh today). */\n  @Prop() total?: number;\n  /** Cumulative unit (default kWh). */\n  @Prop() totalUnit: string = 'kWh';\n\n  render() {\n    const arrow = this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : this.trend === 'flat' ? '▬' : '';\n    const valueTrend = this.trend === 'flat' ? 'stable' : this.trend === 'none' ? 'none' : this.trend;\n    return (\n      <Host role=\"group\" aria-label={`${this.label}: ${this.value.toFixed(this.precision)} ${this.unit}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{this.label}</span>\n          {arrow && <span class={`arrow trend-${this.trend}`} part=\"arrow\" aria-hidden=\"true\">{arrow}</span>}\n        </div>\n        <ind-value\n          part=\"value\"\n          value={this.value}\n          unit={this.unit}\n          precision={this.precision}\n          trend={valueTrend as 'none' | 'up' | 'down' | 'stable'}\n          size=\"lg\"\n        />\n        {this.points.length > 1 && (\n          <ind-sparkline class=\"spark\" part=\"spark\" points={this.points} variant=\"default\" area />\n        )}\n        {this.total !== undefined && (\n          <div class=\"card-detail\" part=\"total\">\n            {this.total.toLocaleString()} {this.totalUnit} this period\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/equipment-status-card/equipment-status-card.css

@@ -0,0 +1,29 @@
+.body {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-5, 12px);
+}
+
+.symbol {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+  margin-left: auto;
+}
+
+.state-label {
+  font-size: var(--ind-font-size-lg, 14px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+}
+
+:host([state="running"])     .state-label { color: var(--ind-state-running-bg, #16a34a); }
+:host([state="fault"])       .state-label { color: var(--ind-state-fault-bg, #dc2626); }
+:host([state="warning"])     .state-label { color: var(--ind-state-warning-bg, #f59e0b); }
+:host([state="maintenance"]) .state-label { color: var(--ind-state-maintenance-bg, #2563eb); }
+:host([state="stopped"])     .state-label { color: var(--ind-surface-text-secondary); }
+:host([state="unknown"])     .state-label { color: var(--ind-surface-text-muted); }

package/dist/collection/components/molecules/equipment-status-card/equipment-status-card.js

@@ -0,0 +1,150 @@
+import { h, Host } from "@stencil/core";
+const DEFAULT_LABEL = {
+    running: 'Running',
+    stopped: 'Stopped',
+    fault: 'Fault',
+    warning: 'Warning',
+    maintenance: 'Maintenance',
+    unknown: '—',
+};
+/**
+ * Generic equipment status card. Slot a process symbol (`<ind-pump>`,
+ * `<ind-motor>`, …) into the default slot; the card supplies the heading,
+ * a state badge and an optional detail line.
+ */
+export class IndEquipmentStatusCard {
+    /** Equipment name (e.g. "Feed pump"). */
+    heading;
+    /** Equipment tag (e.g. "P-101"). */
+    tag;
+    /** Process state — drives the badge color and fault chrome. */
+    state = 'unknown';
+    /** Override the default state label. */
+    stateLabel;
+    /** Sub-line for context (runtime, last fault, …). */
+    detail;
+    render() {
+        const label = this.stateLabel ?? DEFAULT_LABEL[this.state];
+        const dot = this.state === 'unknown' ? 'neutral' : this.state;
+        return (h(Host, { key: '50ef02041e1221b96bb57907725bf22cc5e0d609', role: "group", "aria-label": `${this.heading}: ${label}`, "aria-live": this.state === 'fault' ? 'assertive' : 'polite' }, h("div", { key: 'b173cac3ff0f2f10ff25e461aa1016ffe2952e2d', class: "card-head" }, h("span", { key: '53f425c3d75617add7807f77dd411f0ed1cd1b80', class: "card-title", part: "heading" }, this.heading), this.tag && h("span", { key: '1bcdbdaaaffc476ffb5f99a4d1c248b37f428c9a', class: "card-tag", part: "tag" }, this.tag)), h("div", { key: '75b94da1c391f16ebfa6ed3468f98d9a42b1be8d', class: "body", part: "body" }, h("span", { key: '684412e91904a96e24cce09c8003cf87b3b47fb1', class: "symbol", part: "symbol" }, h("slot", { key: '398342832c19ddd39cd59d3e30b8c057d939d7d1' })), h("div", { key: '6b26f6e32e85949ffa226c522be010693fcfa868', class: "status", part: "status" }, h("ind-status-dot", { key: '0c9e97b62ef0435e8ebe0889fdfde5822506eb4c', state: dot, size: "md" }), h("span", { key: '6a0506b7ab72f4b3f2b28c6bd5210062b77d9594', class: "state-label", part: "state-label" }, label))), this.detail && h("div", { key: 'e7993508dabe25207fc675182bac2034263f775b', class: "card-detail", part: "detail" }, this.detail)));
+    }
+    static get is() { return "ind-equipment-status-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "equipment-status-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "equipment-status-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Equipment name (e.g. \"Feed pump\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Equipment tag (e.g. \"P-101\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentCardState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"running\" | \"stopped\" | \"unknown\" | \"warning\"",
+                    "references": {
+                        "EquipmentCardState": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/molecules/equipment-status-card/equipment-status-card.tsx",
+                            "id": "src/components/molecules/equipment-status-card/equipment-status-card.tsx::EquipmentCardState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Process state \u2014 drives the badge color and fault chrome."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'unknown'"
+            },
+            "stateLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the default state label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state-label"
+            },
+            "detail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sub-line for context (runtime, last fault, \u2026)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "detail"
+            }
+        };
+    }
+}
+//# sourceMappingURL=equipment-status-card.js.map

package/dist/collection/components/molecules/equipment-status-card/equipment-status-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"equipment-status-card.js","sourceRoot":"","sources":["../../../../src/components/molecules/equipment-status-card/equipment-status-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAUzD,MAAM,aAAa,GAAuC;IACxD,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,GAAG;CACb,CAAC;AAEF;;;;GAIG;AAMH,MAAM,OAAO,sBAAsB;IACjC,yCAAyC;IACjC,OAAO,CAAU;IACzB,oCAAoC;IAC5B,GAAG,CAAU;IACrB,+DAA+D;IACtC,KAAK,GAAuB,SAAS,CAAC;IAC/D,wCAAwC;IAChC,UAAU,CAAU;IAC5B,qDAAqD;IAC7C,MAAM,CAAU;IAExB,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAC9D,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,OAAO,gBACA,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,eAC5B,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ;YAE1D,4DAAK,KAAK,EAAC,WAAW;gBACpB,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ;gBAC5D,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ,CAC5D;YACN,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;gBAC3B,6DAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;oBAAC,8DAAQ,CAAO;gBAClD,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;oBAC/B,uEAAgB,KAAK,EAAE,GAAU,EAAE,IAAI,EAAC,IAAI,GAAG;oBAC/C,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,IAAE,KAAK,CAAQ,CACvD,CACF;YACL,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAO,CACrE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EquipmentCardState =\n  | 'running'\n  | 'stopped'\n  | 'fault'\n  | 'warning'\n  | 'maintenance'\n  | 'unknown';\n\nconst DEFAULT_LABEL: Record<EquipmentCardState, string> = {\n  running: 'Running',\n  stopped: 'Stopped',\n  fault: 'Fault',\n  warning: 'Warning',\n  maintenance: 'Maintenance',\n  unknown: '—',\n};\n\n/**\n * Generic equipment status card. Slot a process symbol (`<ind-pump>`,\n * `<ind-motor>`, …) into the default slot; the card supplies the heading,\n * a state badge and an optional detail line.\n */\n@Component({\n  tag: 'ind-equipment-status-card',\n  styleUrls: ['../_shared/card.css', 'equipment-status-card.css'],\n  shadow: true,\n})\nexport class IndEquipmentStatusCard {\n  /** Equipment name (e.g. \"Feed pump\"). */\n  @Prop() heading!: string;\n  /** Equipment tag (e.g. \"P-101\"). */\n  @Prop() tag?: string;\n  /** Process state — drives the badge color and fault chrome. */\n  @Prop({ reflect: true }) state: EquipmentCardState = 'unknown';\n  /** Override the default state label. */\n  @Prop() stateLabel?: string;\n  /** Sub-line for context (runtime, last fault, …). */\n  @Prop() detail?: string;\n\n  render() {\n    const label = this.stateLabel ?? DEFAULT_LABEL[this.state];\n    const dot = this.state === 'unknown' ? 'neutral' : this.state;\n    return (\n      <Host\n        role=\"group\"\n        aria-label={`${this.heading}: ${label}`}\n        aria-live={this.state === 'fault' ? 'assertive' : 'polite'}\n      >\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"heading\">{this.heading}</span>\n          {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n        </div>\n        <div class=\"body\" part=\"body\">\n          <span class=\"symbol\" part=\"symbol\"><slot /></span>\n          <div class=\"status\" part=\"status\">\n            <ind-status-dot state={dot as any} size=\"md\" />\n            <span class=\"state-label\" part=\"state-label\">{label}</span>\n          </div>\n        </div>\n        {this.detail && <div class=\"card-detail\" part=\"detail\">{this.detail}</div>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/event-row/event-row.css

@@ -0,0 +1,3 @@
+:host {
+  grid-template-columns: auto 12px auto 1fr;
+}