@ind-ds/core 0.1.1 → 0.2.0

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

@@ -0,0 +1,162 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Motor faceplate: animated `<ind-motor>` symbol plus speed / current / load
+ * readouts. Drop into an equipment overview grid.
+ */
+export class IndMotorCard {
+    /** Equipment tag (e.g. "M-204"). */
+    tag;
+    /** Human label (e.g. "Agitator motor"). */
+    label;
+    /** Process state — `running` animates the symbol, drives fault chrome. */
+    state = 'stopped';
+    /** Speed in rpm. */
+    speed;
+    /** Motor current in amps. */
+    current;
+    /** Load in percent. */
+    load;
+    render() {
+        const name = this.label ?? this.tag ?? 'Motor';
+        return (h(Host, { key: '71d47740db2ceab165ac349e77aa05332d6307b2', role: "group", "aria-label": `${name} — ${this.state}` }, h("div", { key: '8fae992272f6041a487d589a98377721715cbf7e', class: "card-head" }, h("span", { key: '8e60fb2c1764646b247bf6639330e905768e97fc', class: "card-title", part: "label" }, name), this.tag && h("span", { key: '093e30f926336401c6c2bee0fd076cd1b1670591', class: "card-tag", part: "tag" }, this.tag)), h("div", { key: '9630066ab4fcc87b12cc3b7d765bc5cd9a993fd1', class: "body", part: "body" }, h("ind-motor", { key: '45deb69064fea96890646b2b3c153cb6c1f46143', class: "symbol", state: this.state, size: "md" }), h("div", { key: '038f877e3d154bb7a6150b97c015a9843666c2fc', class: "metrics", part: "metrics" }, this.speed !== undefined && (h("ind-value", { key: '202763a0f2f38f3338868867699e11a0863ad73b', value: this.speed, unit: "rpm", precision: 0, label: "Speed", size: "md" })), this.current !== undefined && (h("ind-value", { key: '69c9c6c769b16768dcf75b70e509736fb2c41f26', value: this.current, unit: "A", precision: 1, label: "Current", size: "sm" })), this.load !== undefined && (h("ind-value", { key: '1b8eda905a846b08d85d92c79c866eb43a8413e0', value: this.load, unit: "%", precision: 0, label: "Load", size: "sm" }))))));
+    }
+    static get is() { return "ind-motor-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "../_shared/equipment-card.css", "motor-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "../_shared/equipment-card.css", "motor-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Equipment tag (e.g. \"M-204\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Human label (e.g. \"Agitator motor\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"running\" | \"stopped\" | \"warning\"",
+                    "references": {
+                        "EquipmentState": {
+                            "location": "import",
+                            "path": "../../atoms/_equipment/types",
+                            "id": "src/components/atoms/_equipment/types.ts::EquipmentState",
+                            "referenceLocation": "EquipmentState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Process state \u2014 `running` animates the symbol, drives fault chrome."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'stopped'"
+            },
+            "speed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Speed in rpm."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "speed"
+            },
+            "current": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Motor current in amps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current"
+            },
+            "load": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Load in percent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "load"
+            }
+        };
+    }
+}
+//# sourceMappingURL=motor-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"motor-card.js","sourceRoot":"","sources":["../../../../src/components/molecules/motor-card/motor-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;GAGG;AAMH,MAAM,OAAO,YAAY;IACvB,oCAAoC;IAC5B,GAAG,CAAU;IACrB,2CAA2C;IACnC,KAAK,CAAU;IACvB,0EAA0E;IACjD,KAAK,GAAmB,SAAS,CAAC;IAC3D,oBAAoB;IACZ,KAAK,CAAU;IACvB,6BAA6B;IACrB,OAAO,CAAU;IACzB,uBAAuB;IACf,IAAI,CAAU;IAEtB,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,CAAC;QAC/C,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,EAAE;YACtD,4DAAK,KAAK,EAAC,WAAW;gBACpB,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAQ;gBAClD,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,kEAAW,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG;gBACzD,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBAChC,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAC3B,kEAAW,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,GAAG,CAClF;oBACA,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,kEAAW,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,GAAG,CACpF;oBACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,kEAAW,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC9E,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState } from '../../atoms/_equipment/types';\n\n/**\n * Motor faceplate: animated `<ind-motor>` symbol plus speed / current / load\n * readouts. Drop into an equipment overview grid.\n */\n@Component({\n  tag: 'ind-motor-card',\n  styleUrls: ['../_shared/card.css', '../_shared/equipment-card.css', 'motor-card.css'],\n  shadow: true,\n})\nexport class IndMotorCard {\n  /** Equipment tag (e.g. \"M-204\"). */\n  @Prop() tag?: string;\n  /** Human label (e.g. \"Agitator motor\"). */\n  @Prop() label?: string;\n  /** Process state — `running` animates the symbol, drives fault chrome. */\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  /** Speed in rpm. */\n  @Prop() speed?: number;\n  /** Motor current in amps. */\n  @Prop() current?: number;\n  /** Load in percent. */\n  @Prop() load?: number;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'Motor';\n    return (\n      <Host role=\"group\" aria-label={`${name} — ${this.state}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{name}</span>\n          {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n        </div>\n        <div class=\"body\" part=\"body\">\n          <ind-motor class=\"symbol\" state={this.state} size=\"md\" />\n          <div class=\"metrics\" part=\"metrics\">\n            {this.speed !== undefined && (\n              <ind-value value={this.speed} unit=\"rpm\" precision={0} label=\"Speed\" size=\"md\" />\n            )}\n            {this.current !== undefined && (\n              <ind-value value={this.current} unit=\"A\" precision={1} label=\"Current\" size=\"sm\" />\n            )}\n            {this.load !== undefined && (\n              <ind-value value={this.load} unit=\"%\" precision={0} label=\"Load\" size=\"sm\" />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mqtt-tag-binding/mqtt-tag-binding.css

@@ -0,0 +1,3 @@
+:host {
+  min-width: 220px;
+}

package/dist/collection/components/molecules/mqtt-tag-binding/mqtt-tag-binding.js

@@ -0,0 +1,185 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Visualises the binding between an MQTT topic and a process value: topic,
+ * last value, QoS, retain flag and the broker connection state.
+ */
+export class IndMqttTagBinding {
+    /** Friendly label (e.g. "Tank level"). */
+    label;
+    /** MQTT topic (e.g. "plant/line2/tank/level"). */
+    topic;
+    /** Last received value. */
+    value;
+    /** Engineering unit. */
+    unit;
+    /** Quality of Service level. */
+    qos = 0;
+    /** Retained message flag. */
+    retained = false;
+    /** Broker connection state. */
+    state = 'disconnected';
+    render() {
+        const v = this.value !== undefined ? String(this.value) : '—';
+        return (h(Host, { key: '91e10cb05ff15d0433c21671217755a07a8cf839', role: "group", "aria-label": `MQTT ${this.topic}` }, h("div", { key: '6c6e89543957fc8a46ea7453c3d635a434682ba9', class: "card-head" }, h("span", { key: '66c5e517be5affa4884a3cc17684604e3f31155d', class: "card-title", part: "label" }, this.label ?? 'MQTT'), h("ind-connection-indicator", { key: '45424df1e2ae710564e27c07cec08efbe756a793', state: this.state, size: "sm" })), h("code", { key: 'c75951ebdfd0ebd1bbaab8320d4e0f6444687a00', class: "address", part: "topic" }, this.topic), h("div", { key: '94d6cc331ee1ff28ec16c27d3cff3fc144d6cf35', class: "readout", part: "readout" }, h("span", { key: '5e0b8f02e7efa155f7902f432687896557052d9a', class: "value", part: "value" }, v, this.unit ? ` ${this.unit}` : ''), h("span", { key: '2d48d247486292a2ed3ff510ae0708e8fc195d9a', class: "flags", part: "flags" }, h("span", { key: '7d403bb7af76c35aafd529bcea1ca7ca13752640', class: "flag", part: "qos" }, "QoS ", this.qos), this.retained && h("span", { key: 'a4357d910b2aa15a9fa9e782f0dd8402db60f172', class: "flag", part: "retain" }, "retained")))));
+    }
+    static get is() { return "ind-mqtt-tag-binding"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "../_shared/binding.css", "mqtt-tag-binding.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "../_shared/binding.css", "mqtt-tag-binding.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Friendly label (e.g. \"Tank level\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "topic": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "MQTT topic (e.g. \"plant/line2/tank/level\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "topic"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Last received value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Engineering unit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit"
+            },
+            "qos": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "0 | 1 | 2",
+                    "resolved": "0 | 1 | 2",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quality of Service level."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "qos",
+                "defaultValue": "0"
+            },
+            "retained": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Retained message flag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "retained",
+                "defaultValue": "false"
+            },
+            "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": "Broker connection state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'disconnected'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=mqtt-tag-binding.js.map

package/dist/collection/components/molecules/mqtt-tag-binding/mqtt-tag-binding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mqtt-tag-binding.js","sourceRoot":"","sources":["../../../../src/components/molecules/mqtt-tag-binding/mqtt-tag-binding.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;GAGG;AAMH,MAAM,OAAO,iBAAiB;IAC5B,0CAA0C;IAClC,KAAK,CAAU;IACvB,kDAAkD;IAC1C,KAAK,CAAU;IACvB,2BAA2B;IACnB,KAAK,CAAmB;IAChC,wBAAwB;IAChB,IAAI,CAAU;IACtB,gCAAgC;IACxB,GAAG,GAAc,CAAC,CAAC;IAC3B,6BAA6B;IACrB,QAAQ,GAAY,KAAK,CAAC;IAClC,+BAA+B;IACN,KAAK,GAAoB,cAAc,CAAC;IAEjE,MAAM;QACJ,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC9D,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,QAAQ,IAAI,CAAC,KAAK,EAAE;YACjD,4DAAK,KAAK,EAAC,WAAW;gBACpB,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,IAAI,MAAM,CAAQ;gBACnE,iFAA0B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG,CACrD;YACN,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;YACtD,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBACjC,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;oBAAE,CAAC;oBAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAQ;gBAC7E,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;oBAC9B,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK;;wBAAM,IAAI,CAAC,GAAG,CAAQ;oBAClD,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,eAAgB,CAC7D,CACH,CACD,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 * Visualises the binding between an MQTT topic and a process value: topic,\n * last value, QoS, retain flag and the broker connection state.\n */\n@Component({\n  tag: 'ind-mqtt-tag-binding',\n  styleUrls: ['../_shared/card.css', '../_shared/binding.css', 'mqtt-tag-binding.css'],\n  shadow: true,\n})\nexport class IndMqttTagBinding {\n  /** Friendly label (e.g. \"Tank level\"). */\n  @Prop() label?: string;\n  /** MQTT topic (e.g. \"plant/line2/tank/level\"). */\n  @Prop() topic!: string;\n  /** Last received value. */\n  @Prop() value?: number | string;\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Quality of Service level. */\n  @Prop() qos: 0 | 1 | 2 = 0;\n  /** Retained message flag. */\n  @Prop() retained: boolean = false;\n  /** Broker connection state. */\n  @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n\n  render() {\n    const v = this.value !== undefined ? String(this.value) : '—';\n    return (\n      <Host role=\"group\" aria-label={`MQTT ${this.topic}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{this.label ?? 'MQTT'}</span>\n          <ind-connection-indicator state={this.state} size=\"sm\" />\n        </div>\n        <code class=\"address\" part=\"topic\">{this.topic}</code>\n        <div class=\"readout\" part=\"readout\">\n          <span class=\"value\" part=\"value\">{v}{this.unit ? ` ${this.unit}` : ''}</span>\n          <span class=\"flags\" part=\"flags\">\n            <span class=\"flag\" part=\"qos\">QoS {this.qos}</span>\n            {this.retained && <span class=\"flag\" part=\"retain\">retained</span>}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/nav-item/nav-item.js

@@ -24,11 +24,11 @@ export class IndNavItem {
         const ariaCurrent = this.active ? 'page' : undefined;
         const showBadge = this.badge !== undefined && this.badge !== '' && this.badge !== null;
         const inner = [
-            h("span", { key: 'ad9e90d0aab88711ff9e5f5db2cd988a76520c3c', class: "indicator", part: "indicator", "aria-hidden": "true" }, "\u25B6"),
-            h("span", { key: '33fa94a1e111cfc992dbd20ec1c8cfc9a30b18c5', class: "content", part: "content" }, h("slot", { key: 'bfc5072816f07d0fc276d67621efa09d4ce421f4' }, this.label)),
+            h("span", { key: 'eff40a1126717fd21592eca3f809c1cf0c3b510d', class: "indicator", part: "indicator", "aria-hidden": "true" }, "\u25B6"),
+            h("span", { key: '87b50e12513279369e4acfe97ea65cdb30f70237', class: "content", part: "content" }, h("slot", { key: '0ade4bc1a93ad8ca42f82141bbfc3b33848d4e04' }, this.label)),
             showBadge ? h("span", { class: "badge", part: "badge" }, this.badge) : null,
         ];
-        return (h(Host, { key: '895afdd6a1a347adadb7213e4b42ece2d3e32c65' }, this.href ? (h("a", { class: "item", part: "item", href: this.href, "aria-current": ariaCurrent, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "item", part: "item", disabled: this.disabled, "aria-current": ariaCurrent, onClick: this.onClick }, inner))));
+        return (h(Host, { key: 'fd2006e3f0b3653dc76c1f28d24279994feda1b7' }, this.href ? (h("a", { class: "item", part: "item", href: this.href, "aria-current": ariaCurrent, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "item", part: "item", disabled: this.disabled, "aria-current": ariaCurrent, onClick: this.onClick }, inner))));
     }
     static get is() { return "ind-nav-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,31 @@
+:host {
+  min-width: 200px;
+}
+
+:host([state="error"]) {
+  border-color: var(--ind-state-fault-bg, #dc2626);
+}
+
+.signal {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-4, 8px);
+}
+
+.address {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-secondary);
+}
+
+.throughput {
+  display: flex;
+  gap: var(--ind-spacing-6, 16px);
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-primary);
+}
+
+.arrow {
+  color: var(--ind-surface-text-muted);
+}

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

@@ -0,0 +1,168 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Network link summary: signal quality, address and throughput, with the
+ * overall link state. Suits a wireless gateway or cellular modem panel.
+ */
+export class IndNetworkStatusCard {
+    /** Link label (e.g. "Cellular WAN"). */
+    label = 'Network';
+    /** Signal level 0–4 for the bars. */
+    level = 0;
+    /** IP / address. */
+    address;
+    /** Downlink throughput (kbit/s). */
+    rxKbps;
+    /** Uplink throughput (kbit/s). */
+    txKbps;
+    /** Overall link state. */
+    state = 'disconnected';
+    fmt(kbps) {
+        if (kbps === undefined)
+            return '—';
+        return kbps >= 1000 ? `${(kbps / 1000).toFixed(1)} Mb/s` : `${Math.round(kbps)} kb/s`;
+    }
+    render() {
+        return (h(Host, { key: '1751b85b43388f16fae5f172f6f8df561fd8a629', role: "group", "aria-label": `${this.label} ${this.state}` }, h("div", { key: '8135d6bbfbee58a33abc67fc14da817444ea598d', class: "card-head" }, h("span", { key: 'cc6baee0b2673ea8d460352f011417d8aa009366', class: "card-title", part: "label" }, this.label), h("ind-connection-indicator", { key: 'b80f177558c359d38a945b5a19d3320a4e90eefe', state: this.state, size: "sm" })), h("div", { key: '64e367c87acb2589e46ca50fd7eac63107d80a8a', class: "signal", part: "signal" }, h("ind-signal-quality", { key: 'b0751c2aecf1d0c3c8cb9a6ec3eccdad8ab17e3c', level: this.level, size: "md" }), this.address && h("code", { key: 'fb6ac7d8631724723ea2adc6907bc38d38bfa12b', class: "address", part: "address" }, this.address)), h("div", { key: '962d4cacd7e5e44531e2f4181b5686c40b99799f', class: "throughput", part: "throughput" }, h("span", { key: 'f1a5b4fd42b426591195dce0c6fe36e8b6649765', class: "tp" }, h("span", { key: '75b92dc90ab7663deddf37570a8a842aaaf75e13', class: "arrow", "aria-hidden": "true" }, "\u2193"), " ", this.fmt(this.rxKbps)), h("span", { key: '9faa7be07797784f537d60348497499409a3aaf2', class: "tp" }, h("span", { key: '03fe2661325064012b3f7bd033e386e5baccff21', class: "arrow", "aria-hidden": "true" }, "\u2191"), " ", this.fmt(this.txKbps)))));
+    }
+    static get is() { return "ind-network-status-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "network-status-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "network-status-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Link label (e.g. \"Cellular WAN\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Network'"
+            },
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Signal level 0\u20134 for the bars."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "level",
+                "defaultValue": "0"
+            },
+            "address": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "IP / address."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "address"
+            },
+            "rxKbps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Downlink throughput (kbit/s)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rx-kbps"
+            },
+            "txKbps": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Uplink throughput (kbit/s)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tx-kbps"
+            },
+            "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": "Overall link state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'disconnected'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=network-status-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"network-status-card.js","sourceRoot":"","sources":["../../../../src/components/molecules/network-status-card/network-status-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;GAGG;AAMH,MAAM,OAAO,oBAAoB;IAC/B,wCAAwC;IAChC,KAAK,GAAW,SAAS,CAAC;IAClC,qCAAqC;IAC7B,KAAK,GAAW,CAAC,CAAC;IAC1B,oBAAoB;IACZ,OAAO,CAAU;IACzB,oCAAoC;IAC5B,MAAM,CAAU;IACxB,kCAAkC;IAC1B,MAAM,CAAU;IACxB,0BAA0B;IACD,KAAK,GAAoB,cAAc,CAAC;IAEzD,GAAG,CAAC,IAAa;QACvB,IAAI,IAAI,KAAK,SAAS;YAAE,OAAO,GAAG,CAAC;QACnC,OAAO,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IACxF,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;YAC1D,4DAAK,KAAK,EAAC,WAAW;gBACpB,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;gBACzD,iFAA0B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG,CACrD;YACN,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;gBAC/B,2EAAoB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG;gBAClD,IAAI,CAAC,OAAO,IAAI,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CACvE;YACN,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY;gBACvC,6DAAM,KAAK,EAAC,IAAI;oBAAC,6DAAM,KAAK,EAAC,OAAO,iBAAa,MAAM,aAAS;;oBAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ;gBAC/F,6DAAM,KAAK,EAAC,IAAI;oBAAC,6DAAM,KAAK,EAAC,OAAO,iBAAa,MAAM,aAAS;;oBAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,CAC3F,CACD,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 * Network link summary: signal quality, address and throughput, with the\n * overall link state. Suits a wireless gateway or cellular modem panel.\n */\n@Component({\n  tag: 'ind-network-status-card',\n  styleUrls: ['../_shared/card.css', 'network-status-card.css'],\n  shadow: true,\n})\nexport class IndNetworkStatusCard {\n  /** Link label (e.g. \"Cellular WAN\"). */\n  @Prop() label: string = 'Network';\n  /** Signal level 0–4 for the bars. */\n  @Prop() level: number = 0;\n  /** IP / address. */\n  @Prop() address?: string;\n  /** Downlink throughput (kbit/s). */\n  @Prop() rxKbps?: number;\n  /** Uplink throughput (kbit/s). */\n  @Prop() txKbps?: number;\n  /** Overall link state. */\n  @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n\n  private fmt(kbps?: number): string {\n    if (kbps === undefined) return '—';\n    return kbps >= 1000 ? `${(kbps / 1000).toFixed(1)} Mb/s` : `${Math.round(kbps)} kb/s`;\n  }\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={`${this.label} ${this.state}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{this.label}</span>\n          <ind-connection-indicator state={this.state} size=\"sm\" />\n        </div>\n        <div class=\"signal\" part=\"signal\">\n          <ind-signal-quality level={this.level} size=\"md\" />\n          {this.address && <code class=\"address\" part=\"address\">{this.address}</code>}\n        </div>\n        <div class=\"throughput\" part=\"throughput\">\n          <span class=\"tp\"><span class=\"arrow\" aria-hidden=\"true\">↓</span> {this.fmt(this.rxKbps)}</span>\n          <span class=\"tp\"><span class=\"arrow\" aria-hidden=\"true\">↑</span> {this.fmt(this.txKbps)}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/opcua-tag-binding/opcua-tag-binding.css

@@ -0,0 +1,7 @@
+:host {
+  min-width: 240px;
+}
+
+.quality-good { color: var(--ind-state-running-bg, #16a34a); }
+.quality-uncertain { color: var(--ind-state-warning-bg, #f59e0b); }
+.quality-bad { color: var(--ind-state-fault-bg, #dc2626); }