@ind-ds/core 0.1.0 → 0.2.0

package/dist/collection/components/molecules/batch-parameter-row/batch-parameter-row.js

@@ -0,0 +1,304 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One editable parameter in a batch / recipe parameter list: label, value
+ * input, unit suffix and an optional target hint. Designed to stack inside a
+ * scrolling parameter table.
+ */
+export class IndBatchParameterRow {
+    /** Parameter name (e.g. "Dose volume"). */
+    label;
+    /** Current value (two-way). */
+    value;
+    /** Engineering unit. */
+    unit;
+    /** Input type. */
+    type = 'number';
+    min;
+    max;
+    step;
+    placeholder;
+    disabled = false;
+    /** Read-only target / default hint shown after the unit. */
+    target;
+    /** Mark the row as out of range / invalid. */
+    invalid = false;
+    /** Live value as the operator types. */
+    indInput;
+    /** Committed value. */
+    indChange;
+    onInput = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indInput.emit(e.detail);
+    };
+    onChange = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indChange.emit(e.detail);
+    };
+    render() {
+        return (h(Host, { key: 'ca3fcc16b4b12beafc70edb7139309f6106161f7' }, h("span", { key: 'bbfddee78a90efa9192ecfdfb6ff231febce8e97', class: "label", part: "label" }, this.label), h("ind-input", { key: 'f73bd43569badba5e96f70515b8da648e2380696', class: "field", part: "field", type: this.type, value: this.value !== undefined ? String(this.value) : '', min: this.min, max: this.max, step: this.step, placeholder: this.placeholder, disabled: this.disabled, invalid: this.invalid, size: "sm", label: this.label, onIndInput: this.onInput, onIndChange: this.onChange }), this.unit && h("span", { key: '8f0b4fc7bf745ae322c31c406ed2e50776ccaf42', class: "unit", part: "unit" }, this.unit), this.target && h("span", { key: 'aa38b054882735e874d168c254d76e904dbd40c7', class: "target", part: "target" }, "/ ", this.target)));
+    }
+    static get is() { return "ind-batch-parameter-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["batch-parameter-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["batch-parameter-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Parameter name (e.g. \"Dose volume\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value (two-way)."
+                },
+                "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"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'number'"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Read-only target / default hint shown after the unit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark the row as out of range / invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indInput",
+                "name": "indInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Live value as the operator types."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Committed value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=batch-parameter-row.js.map

package/dist/collection/components/molecules/batch-parameter-row/batch-parameter-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"batch-parameter-row.js","sourceRoot":"","sources":["../../../../src/components/molecules/batch-parameter-row/batch-parameter-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9E;;;;GAIG;AAMH,MAAM,OAAO,oBAAoB;IAC/B,2CAA2C;IACnC,KAAK,CAAU;IACvB,+BAA+B;IACN,KAAK,CAAmB;IACjD,wBAAwB;IAChB,IAAI,CAAU;IACtB,kBAAkB;IACV,IAAI,GAAW,QAAQ,CAAC;IACxB,GAAG,CAAU;IACb,GAAG,CAAU;IACb,IAAI,CAAU;IACd,WAAW,CAAU;IACrB,QAAQ,GAAY,KAAK,CAAC;IAClC,4DAA4D;IACpD,MAAM,CAAU;IACxB,8CAA8C;IACrB,OAAO,GAAY,KAAK,CAAC;IAElD,wCAAwC;IAC/B,QAAQ,CAAwB;IACzC,uBAAuB;IACd,SAAS,CAAwB;IAElC,OAAO,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC3C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IACM,QAAQ,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;YACpD,kEACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAW,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EACzD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,OAAO,EACxB,WAAW,EAAE,IAAI,CAAC,QAAQ,GAC1B;YACD,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ;YAC9D,IAAI,CAAC,MAAM,IAAI,6DAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;;gBAAI,IAAI,CAAC,MAAM,CAAQ,CACpE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n/**\n * One editable parameter in a batch / recipe parameter list: label, value\n * input, unit suffix and an optional target hint. Designed to stack inside a\n * scrolling parameter table.\n */\n@Component({\n  tag: 'ind-batch-parameter-row',\n  styleUrl: 'batch-parameter-row.css',\n  shadow: true,\n})\nexport class IndBatchParameterRow {\n  /** Parameter name (e.g. \"Dose volume\"). */\n  @Prop() label!: string;\n  /** Current value (two-way). */\n  @Prop({ mutable: true }) value?: string | number;\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Input type. */\n  @Prop() type: string = 'number';\n  @Prop() min?: number;\n  @Prop() max?: number;\n  @Prop() step?: number;\n  @Prop() placeholder?: string;\n  @Prop() disabled: boolean = false;\n  /** Read-only target / default hint shown after the unit. */\n  @Prop() target?: string;\n  /** Mark the row as out of range / invalid. */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Live value as the operator types. */\n  @Event() indInput!: EventEmitter<string>;\n  /** Committed value. */\n  @Event() indChange!: EventEmitter<string>;\n\n  private onInput = (e: CustomEvent<string>) => {\n    e.stopPropagation();\n    this.value = e.detail;\n    this.indInput.emit(e.detail);\n  };\n  private onChange = (e: CustomEvent<string>) => {\n    e.stopPropagation();\n    this.value = e.detail;\n    this.indChange.emit(e.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <span class=\"label\" part=\"label\">{this.label}</span>\n        <ind-input\n          class=\"field\"\n          part=\"field\"\n          type={this.type as any}\n          value={this.value !== undefined ? String(this.value) : ''}\n          min={this.min}\n          max={this.max}\n          step={this.step}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          invalid={this.invalid}\n          size=\"sm\"\n          label={this.label}\n          onIndInput={this.onInput}\n          onIndChange={this.onChange}\n        />\n        {this.unit && <span class=\"unit\" part=\"unit\">{this.unit}</span>}\n        {this.target && <span class=\"target\" part=\"target\">/ {this.target}</span>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/command-group/command-group.css

@@ -0,0 +1,26 @@
+:host {
+  display: inline-flex;
+  gap: var(--ind-spacing-3, 6px);
+  align-items: center;
+}
+
+:host([orientation="vertical"]) {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+:host([attached]) {
+  gap: 0;
+  border-radius: var(--ind-radius-md, 3px);
+  overflow: hidden;
+  border: 1px solid var(--ind-surface-border-default);
+}
+
+:host([attached]) ::slotted(ind-button:not(:last-child)) {
+  border-right: 1px solid var(--ind-surface-border-default);
+}
+
+:host([attached][orientation="vertical"]) ::slotted(ind-button:not(:last-child)) {
+  border-right: 0;
+  border-bottom: 1px solid var(--ind-surface-border-default);
+}

package/dist/collection/components/molecules/command-group/command-group.js

@@ -0,0 +1,99 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Groups related command buttons into a single segmented bar with a shared
+ * border. Slot `<ind-button>`s into the default slot. Purely presentational —
+ * each button keeps its own `indActivate` event.
+ */
+export class IndCommandGroup {
+    /** Accessible label for the toolbar group. */
+    label;
+    /** Layout direction. */
+    orientation = 'horizontal';
+    /** Render attached (shared borders, no gap) instead of spaced. */
+    attached = false;
+    render() {
+        return (h(Host, { key: '9b4a75ffd5999eb7ffec1e428b66f00bce939ae3', role: "group", "aria-label": this.label }, h("slot", { key: 'a433f837349fe52f09a2de8dc51e51024d947d0f' })));
+    }
+    static get is() { return "ind-command-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["command-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["command-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the toolbar group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CommandGroupOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "CommandGroupOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/molecules/command-group/command-group.tsx",
+                            "id": "src/components/molecules/command-group/command-group.tsx::CommandGroupOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "attached": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render attached (shared borders, no gap) instead of spaced."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "attached",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=command-group.js.map

package/dist/collection/components/molecules/command-group/command-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group.js","sourceRoot":"","sources":["../../../../src/components/molecules/command-group/command-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;GAIG;AAMH,MAAM,OAAO,eAAe;IAC1B,8CAA8C;IACtC,KAAK,CAAU;IACvB,wBAAwB;IACC,WAAW,GAA4B,YAAY,CAAC;IAC7E,kEAAkE;IACzC,QAAQ,GAAY,KAAK,CAAC;IAEnD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,KAAK;YACvC,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CommandGroupOrientation = 'horizontal' | 'vertical';\n\n/**\n * Groups related command buttons into a single segmented bar with a shared\n * border. Slot `<ind-button>`s into the default slot. Purely presentational —\n * each button keeps its own `indActivate` event.\n */\n@Component({\n  tag: 'ind-command-group',\n  styleUrl: 'command-group.css',\n  shadow: true,\n})\nexport class IndCommandGroup {\n  /** Accessible label for the toolbar group. */\n  @Prop() label?: string;\n  /** Layout direction. */\n  @Prop({ reflect: true }) orientation: CommandGroupOrientation = 'horizontal';\n  /** Render attached (shared borders, no gap) instead of spaced. */\n  @Prop({ reflect: true }) attached: boolean = false;\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.label}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/device-connection-card/device-connection-card.css

@@ -0,0 +1,19 @@
+:host {
+  min-width: 210px;
+}
+
+/* The connection card uses its own state vocabulary, so map error→fault chrome. */
+:host([state="error"]) {
+  border-color: var(--ind-state-fault-bg, #dc2626);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);
+}
+
+.endpoint {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-secondary);
+  background: var(--ind-surface-sunken);
+  padding: 3px 6px;
+  border-radius: var(--ind-radius-sm, 2px);
+  word-break: break-all;
+}

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

@@ -0,0 +1,140 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Connection summary for a field device / driver: protocol, endpoint, live
+ * connection state and round-trip latency.
+ */
+export class IndDeviceConnectionCard {
+    /** Device / driver name. */
+    name;
+    /** Protocol (e.g. "Modbus TCP", "EtherNet/IP"). */
+    protocol;
+    /** Endpoint (host:port / URL). */
+    endpoint;
+    /** Connection state — drives the indicator and fault chrome. */
+    state = 'disconnected';
+    /** Round-trip latency in ms. */
+    latency;
+    render() {
+        return (h(Host, { key: 'd4650fd63a64a9dd3bc58fae077ea5a6f1cf71fb', role: "group", "aria-label": `${this.name} connection ${this.state}` }, h("div", { key: '0e4f0b7d8beeb28c51449a56a9bebea4ab0580ca', class: "card-head" }, h("span", { key: 'dec224a80ed7880f33e0c1bb6d2c5c28feeb8435', class: "card-title", part: "name" }, this.name), this.protocol && h("span", { key: '3e446e59f250e22556a8c6476363d6ad37395626', class: "card-tag", part: "protocol" }, this.protocol)), h("ind-connection-indicator", { key: '7c41a2d6f998360827fbf299ff40197d98eb02a9', state: this.state, size: "md" }), this.endpoint && h("code", { key: '26982889839026079a9fda011d3276efd99e26cc', class: "endpoint", part: "endpoint" }, this.endpoint), this.latency !== undefined && (h("div", { key: '8eed12b7cee83a545d01efbc6fb98c24e5241b49', class: "card-detail", part: "latency" }, "Latency ", Math.round(this.latency), " ms"))));
+    }
+    static get is() { return "ind-device-connection-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "device-connection-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "device-connection-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 / driver name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "protocol": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Protocol (e.g. \"Modbus TCP\", \"EtherNet/IP\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "protocol"
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint (host:port / URL)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "endpoint"
+            },
+            "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 \u2014 drives the indicator and fault chrome."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'disconnected'"
+            },
+            "latency": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Round-trip latency in ms."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "latency"
+            }
+        };
+    }
+}
+//# sourceMappingURL=device-connection-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"device-connection-card.js","sourceRoot":"","sources":["../../../../src/components/molecules/device-connection-card/device-connection-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;GAGG;AAMH,MAAM,OAAO,uBAAuB;IAClC,4BAA4B;IACpB,IAAI,CAAU;IACtB,mDAAmD;IAC3C,QAAQ,CAAU;IAC1B,kCAAkC;IAC1B,QAAQ,CAAU;IAC1B,gEAAgE;IACvC,KAAK,GAAoB,cAAc,CAAC;IACjE,gCAAgC;IACxB,OAAO,CAAU;IAEzB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,GAAG,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,KAAK,EAAE;YACpE,4DAAK,KAAK,EAAC,WAAW;gBACpB,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ;gBACtD,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAQ,CAC3E;YACN,iFAA0B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG;YACxD,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,IAAE,IAAI,CAAC,QAAQ,CAAQ;YAC9E,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS;;gBAAU,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;sBAAU,CACpF,CACI,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 * Connection summary for a field device / driver: protocol, endpoint, live\n * connection state and round-trip latency.\n */\n@Component({\n  tag: 'ind-device-connection-card',\n  styleUrls: ['../_shared/card.css', 'device-connection-card.css'],\n  shadow: true,\n})\nexport class IndDeviceConnectionCard {\n  /** Device / driver name. */\n  @Prop() name!: string;\n  /** Protocol (e.g. \"Modbus TCP\", \"EtherNet/IP\"). */\n  @Prop() protocol?: string;\n  /** Endpoint (host:port / URL). */\n  @Prop() endpoint?: string;\n  /** Connection state — drives the indicator and fault chrome. */\n  @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n  /** Round-trip latency in ms. */\n  @Prop() latency?: number;\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={`${this.name} connection ${this.state}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"name\">{this.name}</span>\n          {this.protocol && <span class=\"card-tag\" part=\"protocol\">{this.protocol}</span>}\n        </div>\n        <ind-connection-indicator state={this.state} size=\"md\" />\n        {this.endpoint && <code class=\"endpoint\" part=\"endpoint\">{this.endpoint}</code>}\n        {this.latency !== undefined && (\n          <div class=\"card-detail\" part=\"latency\">Latency {Math.round(this.latency)} ms</div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+:host {
+  min-width: 220px;
+}
+
+.card-head {
+  align-items: center;
+}
+
+.meta {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--ind-spacing-2, 4px) var(--ind-spacing-5, 12px);
+  margin: 0;
+}
+
+.dt {
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+
+.dd {
+  margin: 0;
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-primary);
+  text-align: right;
+}